CODEWITHSUNDEEP
csstwitter-bootstrap
Eugene Goldberg
Eugene Goldberg

Reputation: 15564

how to properly place a specific column into a bootstrap 3 grid

I'm having trouble placing a column into a bootstrap 3 grid. Specifically - column "Row 2 Col 4".

  <div class="row" >
        <div class="col-sm-3" style="background: #777;margin-right: 2px">
            <h3>Row 2 Col 1</h3>
            <div class="row">
                <div class="col-sm-12 other" style="background: #765;min-height: 300px">
                    <h3>Row 2 Col 1 Nested 1</h3>
                </div>
                <div class="col-sm-12 other" style="background: #755;min-height: 300px">
                    <h3>Row 2 Col 1 Nested 2</h3>
                </div>
            </div>

        </div>
        <div class="col-sm-6 other">
            <h3>Row 2 Col 2</h3>
            <div class="row">
                <div class="col-sm-12 other" style="background: #770;min-height: 540px">
                    <h3>Row 2 Col 2 Nested 1</h3>
                </div>
                <div class="col-sm-12 other" style="background: #760">
                    <h3>Row 2 Col 2 Nested 2</h3>
                </div>

            </div>
        </div>
        <div class="col-sm-3" style="background: #737;margin-right: 2px">
            <h3>Row 2 Col 4</h3>
        </div>

    </div>

My sample: https://jsfiddle.net/eugene_goldberg/84wLqsjk/#&togetherjs=gf9y1cvQIK I need to have this column right under "Row 1 Col 4". What should I fix here, please?

Upvotes: 0

Views: 56

Answers (1)

tao
tao

Reputation: 90287

You can't use custom margins on bootstrap col-* and still expect them to work.
They're carefully tailored to sum up 100% of row width when you reach 12 columns. Add margins to them and they will exceed 100% row width, making the last item float on next row.

Remove margin:2px placed inline on your .col-*s and it will work as expected.

If you want to keep the white space displayed between the columns, consider using wrappers for your content, placed inside .col-*s. And, of course, moving the backgrounds to the wrappers. padding on .col-*s is also a viable option.

Edit: after giving it some thought, I realized the fastest way to achieve what you want (also considering what you already have) is by using borders on cols. Here it is.

Upvotes: 1

Related Questions