Is there any way to align jumbotron elements in center?

Question

In the below code snippet, I tried to align the div inside .jumbotron to the center but it didn't work. Is there any extra class needed because I already tried .justify-content-center and .mx-auto.

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->

<div class="jumbotron">
  <div class="justify-content-center">
    <h1 class="display-3">Lorem.</h1>
    <p class="lead">Lorem, ipsum dolor.<span class="text-     
      warning">Lorem, ipsum.</span><br>Lorem ipsum dolor 
      sitamet.
    </p>
  </div>
</div>

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->

use `flex` and `justify-content:center;` to `jumbotron` https://jsfiddle.net/Manju06/qr6wLx5t/44/ — Manjuboyz, Jun 23 '20 at 07:22

score 2 · Answer 1 · answered Jun 23 '20 at 07:26

text-center class of bootstrap may help

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="jumbotron text-center">
    <h1 class="display-3">Lorem.</h1>
    <p class="lead">Lorem, ipsum dolor.<span class="text-     
      warning">Lorem, ipsum.</span><br>Lorem ipsum dolor sitamet.
    </p>
</div>

Sebastian Brosch · Accepted Answer · 2020-06-23T08:58:47.790

You can use the following solution:

Set d-flex to the jumbotron to use flex classes (like justify-content-center) on the jumbotron.
Set the justify-content-center to the jumbotron itself to center its content.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="jumbotron d-flex justify-content-center">
  <div>
    <h1 class="display-3">Lorem.</h1>
    <p class="lead">Lorem, ipsum dolor.<span class="text-     
      warning">Lorem, ipsum.</span><br>Lorem ipsum dolor 
      sitamet.
    </p>
  </div>
</div>

.d-inline-block is not needed since you will be using flexbox — Temani Afif, Jun 23 '20 at 08:46

score 1 · Answer 3 · answered Jun 23 '20 at 07:31

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->

<div class="jumbotron">
 <div class="d-flex flex-row justify-content-center">
    <h1 class="display-3">Lorem.</h1>
    <p class="lead">Lorem, ipsum dolor.<span class="text-     
      warning">Lorem, ipsum.</span><br>Lorem ipsum dolor 
      sitamet.
    </p>
  </div>
</div>

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->

score 0 · Answer 4 · answered Jun 23 '20 at 07:57

Please try this code,To Is there any way to align jumbotron elements in center?

<!DOCTYPE html>
<html>
<head>

  <!-- Credit: http://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap -->
  <title>Bootstrap Centered Jumbotron</title>
  <meta charset="utf-8" />

  <link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
  <style type="text/css">

    html, body {
      height: 100%;
    }

    .container{
      width: 1025px;
    }

    .vertical-center {
      height: 100%;
      width: 100%;

      text-align: center;  /* align the inline(-block) elements horizontally */
      font: 0/0 a;         /* remove the gap between inline(-block) elements */
    }

    .vertical-center:before {    /* create a full-height inline block pseudo=element */
      content: ' ';
      display: inline-block;
      vertical-align: middle;  /* vertical alignment of the inline element */
      height: 100%;
    }

    .vertical-center > .container {
      max-width: 100%;
      background-color: gold;

      display: inline-block;
      vertical-align: middle;  /* vertical alignment of the inline element */
      font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;        /* <-- reset the font property */
    }

    @media (max-width: 768px) {
      .vertical-center:before {
        /* height: auto; */
        display: none;
      }
    }

  </style>

</head>
<body>

  <div class="jumbotron vertical-center">
    <div class="container text-center">

      <h1>The easiest and powerful way</h1>

      <div class="row">

        <div class="col-md-7">
          <div class="top-bg"></div>
        </div>

        <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
          <ul class="top-features">
            <li>
              <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
              <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
            </li>
            <li>
              <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
              <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
            </li>
            <li>
              <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
              <p><strong>Check</strong><br>Constantly the status of your links.</p>
            </li>
            <li>
              <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
              <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
            </li>
            <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
            <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
          </ul>
        </div>

      </div>

    </div>
  </div>

  <!-- JavaScript -->
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

</body>
</html>

I hope this code will be useful for you.

Thank you.

Is there any way to align jumbotron elements in center?

4 Answers4