How do I align columns in the center of the page? [duplicate] - html

Question

This question already has answers here:
Center a column using Twitter Bootstrap 3
(34 answers)
Closed 6 years ago.
How do I align the columns so that they go in the center of the page? The columns are aligning to the left but I need them to be centered in the middle of the page Im using CSS3, HTML5 and bootstrap v3.3.4
<section id="about-us" class="about-us">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="900ms">
<h2>one</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="block wow fadeInRight" data-wow-delay=".6s" data-wow-duration="900ms">
<h1>One</h1>
<h1>Two</h1>
<h1>Three</h1>
<h1>Four</h1>
<h1>Five</h1>
<h1>Six</h1>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.about-us {
background-image:linear-gradient(rgba(18, 172, 234, 0.42), rgba(0, 191, 255, 0.55)),url(background-about-header.png);
background-size: cover;
background-attachment: scroll;
color: #fff;
position: relative;
background-position: center;
overflow: hidden;
height: 100vh;
}
#about-us h1 {
font-size: 400%;
font-weight: 400;
text-transform: none;
color: #666;
text-align: justify;
margin: auto;
}
.about-us h2 {
font-size: 750%;
font-weight: 400;
text-transform: uppercase;
color: #666;
line-height: 80px;
padding-top: 120px;
margin: auto;
}
#about-us .block {
position: relative;
padding: 310px 0px 0px;
text-align: center;
margin: auto;
}

Answer 1

You will want to use Twitter Bootstraps .col-md-offset-* classes. Here is the documentation. You will want to add an offset to the furthest left column which will then move that div over the amount of columns you define, so for example your html will look like this:
<section id="about-us" class="about-us">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-md-offset-3 col-sm-3 col-sm-offset-3"> //see here we added the two offset classes
<div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="900ms">
<h2>one</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="block wow fadeInRight" data-wow-delay=".6s" data-wow-duration="900ms">
<h1>One</h1>
<h1>Two</h1>
<h1>Three</h1>
<h1>Four</h1>
<h1>Five</h1>
<h1>Six</h1>
</div>
</div>
</div>
</div>
</div>
</section>