CODEWITHSUNDEEP
csstwitter-bootstraptext-align
user3389584
user3389584

Reputation: 135

Bootstrap max-width columns responsive

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

Upvotes: 6

Views: 17645

Answers (1)

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

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.

Upvotes: 4

Related Questions