Bootstrap max-width columns responsive

Question

I am trying to code a section of a one-page responsive Bootstrap design that has two side-by-side columns of text. The designer wants these two columns to have a max-width, but once it reaches its max, it is no longer centered (as the rest of the content continues to be responsive).

Is there a way around this to still have the two columns of text centered?

Edit: Here is a link to what the code looks like: http://www.bootply.com/119539

Please share a link to test website, or a fiddle or at least a screenshot. — Lokesh Suthar, Mar 06 '14 at 19:11

score 4 · Accepted Answer · answered Mar 06 '14 at 20:13

4

Here try this Bootply. Is this what you are looking for?

<div class="row">
    <div class="col-lg-12">
            <h2 class="center-block">How We Work</h2>

    </div>
    <div class="col-lg-4 col-lg-offset-2">
        <p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla nec lacus condimentum molestie.</p>
    </div>
    <div class="col-lg-4">
        <p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
    </div>
</div>

h2.center-block{
    text-align:center;
}

p.text-justify{
 max-width:400px;
}

NOTE: You can use col-lg-offset-2 to shift the div by 2 columns.

answered Mar 06 '14 at 20:13

Lokesh Suthar

3,201
1
16
28

I didn't use proper classname and used whatever was available. Sorry about that. – Lokesh Suthar Mar 06 '14 at 20:13
Wow, thanks! That looks great! Is there any way to maintain the 30px gutter spacing between the two columns and still keep it all centered like that? – user3389584 Mar 06 '14 at 20:24
Yeah. I used `center-block` on `
` remove that and float first one to right and second one to left;
– Lokesh Suthar Mar 06 '14 at 20:25
For some reason when I try and implement it, it doesn't work on my site: http://watchcampfire.com/pre – user3389584 Mar 06 '14 at 21:26
And your text isn't justified because you used `` on every word. Plus I can't see, where you used `max-width` – Lokesh Suthar Mar 06 '14 at 21:46
Thanks! Yeah, I noticed the justification issue. I'll have to fix that. Also, max-width is on col-lg-4. Should I place it elsewhere? – user3389584 Mar 06 '14 at 21:53
Yes. Specifically on paragraphs. bootstrap columns work because they have a specified width in %. You shouldn't override that. – Lokesh Suthar Mar 06 '14 at 21:54
Buddy could you mark this as correct if your problem is solved ? – Lokesh Suthar Mar 07 '14 at 07:25
Thanks for all your help! I just have one last question. Can anything be done about this in-between. I think it's between col-md and col-sm that I get this: http://imgur.com/3eCDzHH This is the code I'm using: http://www.bootply.com/119779 – user3389584 Mar 07 '14 at 14:38
add col-xs and you should be fine – Lokesh Suthar Mar 07 '14 at 14:39
For some reason it's still doing that, even after adding it: http://watchcampfire.com/pre2 – user3389584 Mar 07 '14 at 15:02
You're using col-xs-12 means it will occupy whole row. Use col-xs-6 – Lokesh Suthar Mar 07 '14 at 15:10
1

If you use col-xs-6, NO they won't stack. Seems like I might have to charge you after this for consultation. :) – Lokesh Suthar Mar 07 '14 at 15:13

Bootstrap max-width columns responsive

1 Answers1

Linked