Rowspan in Bootstrap?

Richard Korts
Richard Korts used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
What you're looking for in nested rows.

Start with 1 row with 2 columns, one for the left column and one for the section on the right

for the right column, start with 3 rows.  Then within each row, create rows as needed.

Does this approach make sense?
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
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
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Richard KortsBusiness Owner / Chief Developer

Author

Commented:
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 KortsBusiness Owner / Chief Developer

Author

Commented:
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 KortsBusiness Owner / Chief Developer

Author

Commented:
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.
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
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
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial