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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <title>Homepage</title>
</head>
<body>
    <div >
        <h1>Employee details</h1>
        <span >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.

CodePudding user response：

The updated code is as below:

<div >
  <h1>Employee details</h1>
  <span >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

CodePudding user response：

you can use row class and col class like this

<div >
    <div >
       <h1 >Employee details</h1>
          <span >2020-21 period</span>
     </div>
</div>

CodePudding user response：

<div >
    <div >
        <h1 >Employee details</h1>
        <p >2020-21 period</p>
    </div>    
</div>

In a row there are 12 columns. Change the col-3 number to increase or decrease the number of columns that you want to fill.

The offset-1 is the space between the actual column and the previous. The number of the offset works exactly the same.

CodePudding user response：

what you need is a display:flex and align items: center which using bootstrap can be done by the following:

<div >
    <h1>Employee details</h1>
    <span >2020-21 period</span>    
</div>

Note that if you need a gap between your span and your h1 you either need to give a margin-right to your h1 or margin-left to your span. If you want your h1 & span to be positioned in the middle of the div you need to add justify-content-center