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>
2
Answers
Try
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 offset-3 float-md-center">
That worked for me, butoffset-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.Add text-center in the class