How to centre bootstrap jumbotron

Question

I am using bootstrap's jumbotron and have the the following:

    <div class="container">
      <div class="row">
        <div class="jumbotron">
          <h1 class="display-4">Hello, world!</h1>
          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
          <hr class="my-4">
          <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
          <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
          </p>
        </div>
      </div>
    </div>

Now this code gets the following:

I want to now centre the jumbotron to the centre of the screen, I know I can add mt class to jumbotron but that doesn't get me to exact centre

Do you mean centered vertically? – j08691 May 17 '19 at 19:08 — j08691, May 17 '19 at 19:08

score 1 · Accepted Answer · answered May 17 '19 at 19:06

1

html,body { height: 100% }
body { display: flex; align-items: center; justity-content: center }

answered May 17 '19 at 19:06

Anees

569
9
17

score 0 · Answer 2 · answered May 17 '19 at 19:08

0

Bootstrap 4's row class creates a -15px margin on the left and right. That's why it's a little off. Do the following:

...
<div class="row">
  <div class="col-12">
     <div class="jumbotron">
     </div>
  </div>
</div>
...

answered May 17 '19 at 19:08

Brian

1,873
16
25

How to centre bootstrap jumbotron

2 Answers2