asked on

Rowspan in Bootstrap?

See attached. I want to lay out this page in Bootstrap.

Ignore the items in Red Text.

I was thinking of a column layout like (sm-4 sm-2 sm-6 and xs-4 xs-2 xs-6).

The left columns are obvious.

I can't see how to make the upper right extend as natural columns to the right. I think I need something like the old "rowspan" of html columns.

How can I do this in bootstrap?

Thanks
final_summary.jpg

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Richard Korts

ASKER

Rob,

Rob,

I think I found a different solution.

Please look at http://rkassoc.org/Lakos_config/summary_b.php

Then view source.

I'm not done, but the concept (class short-div) seems to work.

Thanks

Rob

The issue I have with what you've got is that the left and right columns are not separate. Therefore, the height of that row will be the height of internal elements. I would assume that the height of the left column would be different than the right. I wouldn't want the content on the right shifting around, If I expanded a menu on the left etc.

Given they're conceptually separate components, you should also separate them in your layout.

Richard Korts

ASKER

Rob,

OK, I'm trying that. It's all squshed horizontally.

I think I see my problem, I am assuming that TOTAL columns is 12, globally.

I'm beginning to thing it's 12 within each sub row. Is that correct?

Richard Korts

ASKER

Rob,

I figured out the column thing.

It looks good, with ONE exception I can't figure out.

Please look at http://rkassoc.org/Lakos_config/summary.php

Why are there extra blank lines in the placeholder latin text in the "3rd" column? How can I get that do display with no line spacing?

Thanks

Richard Korts

ASKER

Rob,

You might want to look at http://rkassoc.org/Lakos_config/summary_ex.php instead of the link above; I will be modifying summary.php to generalize it.

Rob

You're right about the 12 columns per row :) and then 12 columns again within each column. Just be sure to always put a column within a row. Never put a column within a column:

Do this:
<div class='row'>
<div class='col-xs-6'>
<div class='row'>
<div class='col-xs-9'></div>
<div class='col-xs-3'></div>
</div>
</div>
</div>

NOT this:
<div class='row'>
<div class='col-xs-6'>
<div class='col-xs-9'></div>
<div class='col-xs-3'></div>
</div>
</div>

I'll look at your link now

Rob

change the <span> to a <div> That will give you the ability to control sizing as span elements to not have spatial awareness, so to speak.