skip to Main Content

How can i center a jumbotron in the center of my page?
I already tried col-lg-6 with float-lg-center.

.jumbotron {
  min-width: 585px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  margin: 10px 10px 10px 10px;
  border: 0.08em solid black;
}

h1 {
  font-size: 6em;
  color: #484949;
}

#socDesc {
  color: black;
}

body {
  min-width: 520px;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="col-lg-8 col-md-10 col-sm-12 col-xs-12 offset-lg-2 offset-md-1 float-md-center">
  <div class="jumbotron">
    <div class="container">
      <div class="container-fluid">
        <div class="column">
          <h1 class="text-center">Society</h1>
          <hr />
          <h4 class="text-center">"That's one small step for a man, one giant leap for mankind" - Neil Armstrong</h4>
          <hr />
          <div class="figure">
            <div class="row">
              <div class="col-lg-6 col-md-5 col-sm-4 col-xs-3">
                <img id="" class="figure-img img-fluid rounded" src='http://4.bp.blogspot.com/-1tvR6wEiwiI/VYJSH4pfrsI/AAAAAAAABa8/RoQtTAtnD6Q/s1600/PBS.jpg' />
              </div>
              <div class="col-lg-6 col-md-5 col-sm-4 col-xs-3">
                <img id="" class="figure-img img-fluid rounded" src='http://www.extremetech.com/wp-content/uploads/2013/04/lhc17.jpg' />
              </div>
            </div>
            <!-- row-->
            <figcaption class="figure-caption">This is the Large Ha</figcaption>
            <hr />
          </div>
          <!-- figure -->
        </div>
        <!-- column -->
      </div>
    </div>
  </div>
</div>

View on Codepen

2

Answers


  1. Try <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 offset-3 float-md-center"> That worked for me, but offset-xs-3 may be more proper due to the following:
    It wasn’t working in codepen for some reason but if you want the same amount of columns on all screen sizes you can use only col-xs-6 and it will apply that to all larger screen sizes.

    Login or Signup to reply.
  2. Add text-center in the class

    <div class="jumbotron text-center">
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search