CODEWITHSUNDEEP
csstwitter-bootstrap
kdweber89
kdweber89

Reputation: 2174

Is it possible to use bootstrap to have different sized rows per column? if so, how?

So I am in a situation where I have four divs. Two divs need to be on the right side of the screen, and two need to be on the left side. I cannot bundle the two on each side within another div because when they are responsive in the mobile view their positioning needs to be webbed. (check out the pen in mobile view, and you'll see what I am mean)

This is the code, the html is here

<div class="col-xs-12 col-sm-8 start">Start Ride </div>
<div class="col-xs-12 col-sm-4 pull-right open">Open ride</div>
<div class="hidden-xs hidden-sm"></div>
<div class="col-xs-12 col-sm-8 pull-left rides ">Rides We have</div>
<div class="col-sm-4 hours">Hours of Operation</div>

with the css as 

.start { height: 125px; background: #fcc; }
.open { height: 95px; background: #fdb; }
.hours { height: 50px; background: #ffb; }
.rides { height: 150px; background: #cfc; }

And a pen for illustration purposes http://codepen.io/KDweber89/pen/LVddKK?editors=110

The problem here is that, the top two divs often change sizes. Because of bootstrap's inline features with the rows, it creates white spaces within the divs. So if the div on the top of one column is tall, the bottom div on the second column will begin where the tall one left off, rather than where the the top div on the second column leaving a white space between each column. (definitely check out the pen, and you'll see what I am dealing with) I cannot have any of the white spaces. I need the sizes of each row in each columns to be independent of each other -- and because I'm using bootstrap, I'm not sure if that is possible. Does anybody have any ideas?

Upvotes: 0

Views: 39

Answers (1)

Ceili
Ceili

Reputation: 1308

What you're trying to accomplish isn't instantly possible with Bootstrap, because of the way you have the divs folding in to each other in the responsive view. To illustrate, it's very easy with Bootstrap to go from this: 

1    |    2
3    |    4

to this:

1
2
3
4

It would also be very easy to go from this:

1    |    2
3    |    4

to this:

1
3
2
4

But what it looks like you're trying to do is this:

4
1
2
3

Semantic HTML will read from left to right, and from top to bottom. The best way to go about this would be taking advantage of Bootstrap's responsive utilities, which would allow you to do something like this:

 5 (hidden)
1    |    2
3    |    4

to this:

5
1
2
3
4 (hidden)

by applying hidden-* classes. See this codepen based on yours. Furthermore, you can get rid of the space between the rows in a column by dividing the page semantically in half (two columns) and then making each block a div inside that column.

Upvotes: 2

Related Questions