Steve Sheppard Steve Sheppard - 3 months ago 12
HTML Question

What do I need to do to get these bootstrap colunms to align left?

I have a web template that I am using with a top and left nav and I want to have the three column elements left aligned. Even in a simple example, the columns want to be center aligned.

Can anyone tell me how to get the columns to snuggle up to the left margin?

*disclaimer - I am Learning Bootstrap so my ability to answer this myself is probably limited by my Bootstrap vocabulary.

I tried searching a bunch of different ways and settle don this as the most relevant search query:
bootstrap left align columns -nav -navbar

That search produced this answer, but it didn't seem to solve my problem, or I didn't do it right.

I have created a bootply that simulates my problem so if anyone wants to try it out, they can.

Answer

You can left align the container as described in this question, or simply use a full-width container-fluid, and then only use a portion of the 12 Bootstrap columns, for example 8 columns..

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
         .. page layout here
        </div>
    </div>
</div>

http://www.bootply.com/SRnhM22tPr

On smaller screens you'd probably want the layout to be full-width instead of left aligned.