HTML & Bootstrap 5 - Center content of a column-CodePudding

I am trying to center the content of a column using Bootstrap. This is my current code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    
    <!-- CODE -->
    
    <header>
      <div >
        <div >
           <!-- LEFT -->
           <div  style="background-color: lime;">
             <div> <!-- THIS SHOULD BE IN THE CENTER -->
               <h1>Welcome</h1>
               <h2>to my web!</h2>
             </div>
             
             <div> <!-- THIS SHOULD BE IN THE BOTTOM -->
               <p>Icons</p>
             </div>
           </div>
           

           <!-- RIGHT -->
           <div  style="background-color: red"></div>
        </div>
      </div>
    </header>
    
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

I have tried using d-flex justify-content-center, as follows:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    
    <!-- CODE -->
    
    <header>
      <div >
        <div >
           <!-- LEFT -->
           <div  style="background-color: lime;">
             <div> <!-- THIS SHOULD BE IN THE CENTER -->
               <h1>Welcome</h1>
               <h2>to my web!</h2>
             </div>
             
             <div> <!-- THIS SHOULD BE IN THE BOTTOM -->
               <p>Icons</p>
             </div>
           </div>
           

           <!-- RIGHT -->
           <div  style="background-color: red"></div>
        </div>
      </div>
    </header>
    
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

But this is not working...

How can I do to put the elements correctly inside the column?

CodePudding user response：

You can add “ align-items-center” to the class, if that still doesn’t work, make sure you’re not adding different margins to left and right of the section, but justify-content-center and align-items-center will work fine

CodePudding user response：

Here you go...

It's very easy, just add the class text-center.

See the snippet below.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body>

  <!-- CODE -->

  <header>
    <div >
      <div >
        <!-- LEFT -->
        <div  style="background-color: lime;">
          <div >
            <!-- THIS SHOULD BE IN THE CENTER -->
            <h1>Welcome</h1>
            <h2>to my web!</h2>
          </div>

          <div >
            <!-- THIS SHOULD BE IN THE BOTTOM -->
            <p>Icons</p>
          </div>
        </div>


        <!-- RIGHT -->
        <div  style="background-color: red"></div>
      </div>
    </div>
  </header>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>

UPDATE

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body>

  <!-- CODE -->

  <header>
    <div >
      <div  style="height: 900px; background-color: yellow;">
        <!-- LEFT -->
        <div  style="background-color: lime;">
          <div >
            <!-- THIS SHOULD BE IN THE CENTER -->
            <div>
              <h1>Lorem Ipsum</h1>
              <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h2>
            </div>
          </div>

          <div >
            <!-- THIS SHOULD BE IN THE BOTTOM -->
            <div>
              <p>THIS SHOULD BE IN THE BOTTOM: 0</p>
            </div>
          </div>
        </div>


        <!-- RIGHT -->
        <div  style="background-color: red"></div>
      </div>
    </div>
  </header>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

Adding d-flex flex-column h-100 to the child, with an align-items-center solves the scenario.