Center align item with Bootstrap 5 Jumbotron

Question

I have a jumbotron where the bx-message-error icon should be centered both horizontally and vertically in a row, but, I can't get it to align, despite Googling and reading the document, I am sure this is really simple, but help would really be appreciated and a link to where this is documented if possible so I know where to look.

I am using Bootstrap 5.0.1 on a Windows 10 machine.

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>

  <style>
    #no_data_jumbo {
      padding: 0px;
    }
    
    .jumbo_button {
      background: #567178;
    }
  </style>

  <title>Integrated Test Management Suite | Home</title>
</head>

<body id="body-pd">

  <div class="wrapper mx-2 height-100">

    <div id="content">
      <div class="row m-2">
        <div class="jumbotron text-black border border-dark w-100">
          <div class="container mt-1" id="no_data_jumbo">
            <div class="row w-100">
              <div class="col-1 text-center">
                <i class='bx bx-message-error'></i>
              </div>
              <div class="col">
                <p>Messsage goes here..</p>
                <p><a class="btn btn-primary btn-sm jumbo_button" role="button">Button 1</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>

</html>

Rok Benko · Accepted Answer · 2021-07-16T16:35:51.633

Here you go...

Add d-flex justify-content-center align-items-center to the parent container.

The first one (i.e., justify-content-) is used to set the horizontal alignment, the second one (i.e., align-items-) is used to set the vertical alignment.

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>

  <style>
    #no_data_jumbo {
      padding: 0px;
    }
    
    .jumbo_button {
      background: #567178;
    }
  </style>

  <title>Integrated Test Management Suite | Home</title>
</head>

<body id="body-pd">

  <div class="wrapper mx-2 height-100">

    <div id="content">
      <div class="row m-2">
        <div class="jumbotron text-black border border-dark w-100">
          <div class="container mt-1" id="no_data_jumbo">
            <div class="row w-100">
              <div class="col-1 text-center d-flex justify-content-center align-items-center">
                <i class='bx bx-message-error'></i>
              </div>
              <div class="col">
                <p>Messsage goes here..</p>
                <p><a class="btn btn-primary btn-sm jumbo_button" role="button">Button 1</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>

</html>

Center align item with Bootstrap 5 Jumbotron

1 Answers1