CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ben Diamant
Ben Diamant

Reputation: 6206

Bootstrap grid: unexpected result with divs layout

I have the following code: 

<div class="row">
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
</div>

I would expect 1 row of 3 divs and second row with 2 divs.

The result is: enter image description here

What can cause that to happen?

Upvotes: 0

Views: 95

Answers (2)

maioman
maioman

Reputation: 18734

How about using row structure in the default way:

<div class="row">
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
    <div class="col-sm-4">*some content*</div>
</div>
<div class="row">
     <div class="col-sm-6">*some content*</div>
     <div class="col-sm-6">*some content*</div>
</div>

in the standard bootstrap grid you would also set an outside container wrapping everything up, check out the documentation !

Upvotes: 0

bcesars
bcesars

Reputation: 1012

Try to use another classes defined in bootstrap like this:

<div class="row">
    <div class="col-xs-12 col-sm-12">
        <div class="box">
            <div class="box-content">
                <div class="col-sm-4">*some content*</div>
                <div class="col-sm-4">*some content*</div>
                <div class="col-sm-4">*some content*</div>
                <div class="col-sm-4">*some content*</div>
                <div class="col-sm-4">*some content*</div>
            </div>
        </div>
    </div>
</div>

That should help you format positions of your <div> tags. Before you can use those classes, it is important define how many col-sm-* you gonna need.
You can use class="col-sm-offset-4"as well inside a <div> to "skip" some cols defined and make the second line more properly adjusted in your browser.

Hope it helps you.

Upvotes: 2

Related Questions