Avatar of Richard Korts
Richard KortsFlag for United States of America

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
CSSWeb FrameworksBootstrap

Avatar of undefined
Last Comment
Rob
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Richard Korts
Richard Korts
Flag of United States of America image

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
Avatar of Rob
Rob
Flag of Australia image

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.
Avatar of Richard Korts
Richard Korts
Flag of United States of America image

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?
Avatar of Richard Korts
Richard Korts
Flag of United States of America image

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
Avatar of Richard Korts
Richard Korts
Flag of United States of America image

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.
Avatar of Rob
Rob
Flag of Australia image

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
Avatar of Rob
Rob
Flag of Australia image

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.
CSS
CSS

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo