How do I align columns in the center of the page?

Question

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;
}

score 3 · Accepted Answer · answered Mar 07 '16 at 02:51

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>

Thank you!! I was trying to figure it out and then looked aver the grid system too. Can't believe it! thanks a bunch! — Classics07, Mar 07 '16 at 02:56

How do I align columns in the center of the page?

1 Answers1