CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Lajdák Marek
Lajdák Marek

Reputation: 3069

Bootstrap grid system rows in row

I am trying make some grid in bootstrap and I do not know whether I'm coming correctly so here is my HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row bg-white">

        <div style="background-color: #0a4d85" class="col-md-6">
            <div class="col-md-12" style="background-color: #00B312">
                <p>text</p>
            </div>
        </div>

        <div style="background-color: #0000BB" class="col-md-6">
            <div class="row"> <!-- This row -->
                <div class="col-md-12" style="background-color: #0c0c0c">
                    <p>text</p>
                </div>
                <div class="col-md-12" style="background-color: #00a1e8">
                    <p>text</p>
                </div>
            </div>
        </div>
    </div>
</div>

Result from this code is like this (no padding for right side): enter image description here But if I remove "row" class (selected in HTML comment) result is as i expected: enter image description here

So how? I am doing something wrong or row in row is bad practise?

Upvotes: 0

Views: 492

Answers (1)

Vivek Pratap Singh
Vivek Pratap Singh

Reputation: 9964

Bootstrap grid is based on a 12 column layout. There are three major components containers, rows, and columns. Rows are horizontal groups of columns that ensure your columns are lined up properly. Hence, Row in row is not good practice. Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So if you want three equal-width columns, you’d use .col-md-4.

Upvotes: 1

Related Questions