CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
J145
J145

Reputation: 699

Twitter-Bootstrap Grids

im new here and have a question. I have read up on bootstrap and have a few quick questions regarding the grid layout. I get that the layout should add up to 12 and have been mucking about with it just to get a feel for it. My first bit of code gave me the display I expected, code and picture shown below.Edited, apparently I need 10 rep points to post images so I cant supply images, sorry.

css:

.c{
border-style: solid;
}
.r{
border-style: solid;
border-color: red;
}
.b{
border-style: solid;
border-color: #ffff00;
}

html:

<div class="container-fluid">
<div class="row r">
    <div class="col-md-6 c">
        this is a test

    </div>

    <div class="col-md-6 c">
        this is another test
        <br><br><br>
        test
    </div>
    <div class="col-md-6 c">
        <p>this is a test</p>

    </div>

    <div class="col-md-6 c">
        this is another test
        <br><br><br>
        test
    </div>
</div>
<div class="row r">
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
</div>

However, changing the layout slightly by placing the bigger columns to the left completely messed up the layout:

html:

<div class="container-fluid">
<div class="row r">

    <div class="col-md-6 c">
        this is another test 1
        <br><br><br>
        test
    </div>

    <div class="col-md-6 c">
        this is a test 1

    </div>
<div class="row b">
    <div class="col-md-6 c">
        this is another test 2
        <br><br><br>
        test 2
    </div>
    <div class="col-md-6 c">
        <p>this is a test 2</p>

    </div>

</div>

</div>
<div class="row r">
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
</div>

What I expected to see was the elements in row b to be nicely placed below row r as seen in the first example. Could someone please explain to me why this wasnt the case?

Thanks.

Upvotes: 0

Views: 57

Answers (1)

sylwester
sylwester

Reputation: 16508

you forgot to close div tag in first row please see comment

<div class="container-fluid">
<div class="row r">

    <div class="col-md-6 c">
        this is another test 1
        <br><br><br>
        test
    </div>

    <div class="col-md-6 c">
        this is a test 1

    </div>
</div> <!--missed end of row--->
<div class="row b">
    <div class="col-md-6 c">
        this is another test 2
        <br><br><br>
        test 2
    </div>
    <div class="col-md-6 c">
        <p>this is a test 2</p>

    </div>

</div>

</div>
<div class="row r">
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
    <div class="col-md-1 c">
        test
    </div>
</div>

Upvotes: 1

Related Questions