CODEWITHSUNDEEP
htmltwitter-bootstrap-3
14wml
14wml

Reputation: 4166

Why does Bootstrap grid system overflow when cols add up to 12?

What is happening

enter image description here

What I want

enter image description here

As you can see, the Amy grey box and rectangle grey box are not positioning themselves on the same line. This is strange considering my codes uses the Bootstrap col sys to put both grey boxes on the same row.

My cols add up to 12 so I'm not sure what is happening. I do notice, however, if I make the cols add up to 11, then both grey boxes are put on the same line. But this is not a fix I want as I would like my cols to add up to 12 and have both boxes appear on the same line.

If anyone could help me solve this it would be greatly appreciated!

My code

HTML

<div class="row student-row">
     <div class="col-xs-2 student-box"> 
          <h1>Amy</h1>
    </div>
    <div class="col-xs-10 worksheet-box">
          ...
    </div>
</div>

CSS

.student-row{
    margin: 20px 10px 10px 10px;
}

.student-box{
    margin-right: 10px;
}

.worksheet-cell{
    margin-top: 10px;
    margin-left: 10px;
    width: 20%;
}

.worksheet-group{
    margin: 10px 15px 20px 15px;
}

JSFiddle

Upvotes: 0

Views: 5507

Answers (2)

Aakash
Aakash

Reputation: 1515

Your style is breaking since you are adding the following to your .row element in Bootstrap. If you play with the margin of the row it will break.

.student-box{
    margin-right: 10px;
}

I recommend to use the following pattern:

<div class="row student-row">
     <div class="col-xs-2 student-box"> 
          <h1>Amy</h1>
    </div>
    <div class="col-xs-10 worksheet-box">
          <!-- Add new elements row wise here -->
          <div class="row">
          </div>
    </div>
</div>

Upvotes: 0

Quentin
Quentin

Reputation: 943556

You've overridden the margins that Bootstrap set and set your own. Now the box needs more space so it doesn't fit.

Remove those margins and the two boxes fit side by side.

.student-row{
   /* margin: 20px 10px 10px 10px;*/
}

.student-box{
    background-color: #F5F5F5;
    font-weight: 700;
    text-transform: uppercase;
   /* margin-right: 10px; */
}

Upvotes: 5

Related Questions