Bootstrap Column Alignment

Question

I have a problem at aligning columns inside rows in bootstrap. I have the following structure:

<section class="container-fluid centerP">

    <div class="row">
        <div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
            <h1></h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>
        </div>
        <div class="col-lg-4 col-lg-offset-2  col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>

        </div>
        <div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-lg-offset-4  col-xs-8 col-xs-offset-2">
            <h3></h3>
            <p></p>
        </div>
    </div>


</section>

It should look like a 1-2-2-1 (vertically aligned boxes of cntent). Currently they are centered but too far apart because of the overset of 2. I found a solution that mentioned using classes of "row-centered" and "col-centered" and it worked untill i modified the classes to "col-xs" and "col-lg". So what i was trying to do for the last two days was to bring them closer together but with no success.

I started coding a couple of weeks ago so please bear with me if the question is stupid

score 1 · Answer 1 · answered Sep 09 '15 at 10:05

1

Each row should split to 12 col.

for exemple:

<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>

answered Sep 09 '15 at 10:05

hava nagila

11
2

score 0 · Answer 2 · edited May 23 '17 at 11:44

A few suggestions:

I think you mean to use <div class="container-fluid centerP"> rather than <section class="container-fluid centerP>. Check out What is the difference between <section> and <div>? for more on why you should probably use a div rather than a section here.

A simple 1-2-2-1 block of vertically aligned central columns could be written like this:

<div class="container">
<div class="row">
    <div class="col-md-12">
        <h1 id="headerBox">Dolloping doubloons!</h1>
    </div>
</div>
<div class="row">
    <div class="col-md-5">
        <p class="contentText">Dolloping doubloons!</p>
    </div>
    <div class="col-md-2"></div>
    <div class="col-md-5">
        <p class="contentText">Dolloping doubloons!</p>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <h3 id="footerText">Dolloping doubloons!</h3>
    </div>
</div>

`

You can then use the ids and classes to set the text's padding and margin properties in CSS, which in turn will offer you more precise control over where the text displays. For example, if you wanted to centre the text within its respective box, you could use margin: 0 auto;.

Bootstrap Column Alignment

2 Answers2