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
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)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?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor 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)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.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Richard KortsBusiness Owner / Chief DeveloperAuthor 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 DeveloperAuthor 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 DeveloperAuthor 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)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)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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.