Steve Sheppard Steve Sheppard - 11 months ago 64
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 Source

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.