Align <h1> and <span> in the same line

December 29, 2021

I am using Bootstrap 5 to build a webpage. My html code is as following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Homepage</title>
</head>
<body>
    <div class="container-fluid p-1 bg-secondary text-white text-center">
        <h1>Employee details</h1>
        <span class="badge rounded-pill bg-success">2020-21 period</span>    
    </div>
    
</body>
</html>

I want to make the <h1> and <span> appear in the same line, rather than one below the other, but am unable to do so. Please help me.

>Solution :

The updated code is as below:

<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center justify-content-center">
  <h1>Employee details</h1>
  <span class="badge rounded-pill bg-success ms-3">2020-21 period</span>
</div>

Explanation:

Add class d-flex to make h1 and span in same line.
Add class align-items-center justify-content-center to make them center.
(Optional) Add margin by class ms-3 to the span div to add space between h1 and span