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

Question

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.

You mean not on the left like this? http://www.bootply.com/SRnhM22tPr — Carol Skelly, Sep 07 '16 at 15:26
Yes! If I follow your changes correctly, all you did was change the div class at the top to container-fluid from container and change the outermost column side from col-md-12 to col-md-8. Is that correct? — Steve Sheppard, Sep 07 '16 at 15:36
@GeorgeLee - Not like that. I want the columns all side by side, but I wanted them left aligned in the container. ZimSystem got it right. — Steve Sheppard, Sep 07 '16 at 15:39

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

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.

edited May 23 '17 at 12:10

Community

1
1

answered Sep 07 '16 at 15:49

Carol Skelly

351,302
90
710
624

Just so I am clear, container-fluid could be construed as container-left-aligned-with-wrapping-on-smaller-devices, yes? – Steve Sheppard Sep 07 '16 at 15:58
Hmm.. I don't know. I'd construe it as only-using-the-left-portion-of-full-width-container on large screens – Carol Skelly Sep 07 '16 at 16:42

score 0 · Answer 2 · answered Sep 07 '16 at 15:33

0

in your main div (page-wrapper), change the class from container, to container-fluid.

<div id="page-wrapper" class="container-fluid">

and you should see those elements all with left alignment.

answered Sep 07 '16 at 15:33

john_h

149
1
18

I could swear I tried that :( I read the [docs on containers](http://getbootstrap.com/css/#overview-container) and I still don't understand why this fixed it? – Steve Sheppard Sep 07 '16 at 15:41

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

2 Answers2