CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
betelgewse
betelgewse

Reputation: 406

Bootstrap's grid: elements with different heights

I've been working on an application that dynamicaly adds elements to the DOM. The added elements are of two types: ones with height 50px and ones with 100px. They are displayed in with the help of the bootstrap grid system.

Working example:

<div>
  <div class="col-xs-6" style="height: 100px;">1</div>
  <div class="col-xs-6" style="height: 50px;">2</div>
  <div class="col-xs-6" style="height: 50px;">3</div>
</div>

But when i try to rearrange, some unexpected spaces occur on certain layouts:

<div>
  <div class="col-xs-6" style="height: 50px;">2</div>
  <div class="col-xs-6" style="height: 100px;">1</div>
  <div class="col-xs-6" style="height: 50px;">3</div>
</div>

Between element '1' and '3' there is a 50px wide gap. Is there any arrangement where the element '3' is placed in that gap? Why is this gap occuring?

Upvotes: 1

Views: 689

Answers (2)

4dgaurav
4dgaurav

Reputation: 11496

This is happening because you have added inline style for height.

style="height: 100px;
style="height: 50px;
style="height: 50px;

To know it better look the example here jsfiddle 1 jsfiddle 2

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362400

@Gaurav is correct.. it's happening because you have specific height set. When the height:100px col is placed 2nd it forces #3 to wrap to a new row since the Bootstrap colums float left, but do not float right.

A workaround would be to use the pull-right class on the taller (100px) column...

http://bootply.com/129818

Upvotes: 0

Related Questions