CODEWITHSUNDEEP
csstwitter-bootstrap
tino
tino

Reputation: 4830

Bootstrap: Content spanning multiple grid columns?

My Bootstrap grid is divided into three columns: a sidebar and two content columns.

<div class="col-xs-2">
    Sidebar column.
</div>
<div class="col-xs-3">
    Left content column.
</div>
<div class="col-xs-7">
    Right content column.
</div>

I'd like to display a confirmation message that spans across the two content columns but not the sidebar. Is it possible to do this without altering the bootstrap grid layout?

Example (in ugly HTML tables):
http://jsfiddle.net/jcCUs/

Since the confirmation messages will only be displayed occasionally it doesn't seem ideal to dynamically change the Bootstrap grid layout based on the presence or absence of a message.

Many thanks!

UPDATE: Unfortunately, a solution that requires altering the width and/or proportions of the columns (as suggested below) is not viable. Too many other elements on the page (and website) are based on the existing 2-3-7 layout and we can't scrap the overall proportions just to integrate confirmation messages.

Upvotes: 4

Views: 11628

Answers (4)

Tiquelou
Tiquelou

Reputation: 459

As you rightly pointed out, offsets can be used to have a display as you desire.

<div class="row">
  <div class="col-xs-2">
    <div class="well">col-xs-2</div>
  </div>
  <div class="col-xs-10 col-sm-offset-2"><div class="alert alert-success">Updated Successfully!</div></div>
  <div class="col-xs-3">
    <div class="well">col-xs-3</div>
  </div>
  <div class="col-xs-7">
    <div class="well">col-xs-7</div>
  </div>
</div>

Demo here

Upvotes: 0

tino
tino

Reputation: 4830

After a lot of playing around with the Bootstrap grid, my current working solution is below.

It's more straight forward than one might expect... you just stack the columns!

<div class="row">
  <div class="col-xs-2">
    Sidebar (2)
    <br><br><br>
  </div>
  <div class="col-xs-10">
    Confirmation Message (10)
  </div>
  <div class="col-xs-3">
    Left Content (3)
  </div>
  <div class="col-xs-7">
    Right Content (7)
  </div>
</div>

Demo: http://jsfiddle.net/ravQm/

Some notes:

  • This works only if the sidebar is taller than the confirmation message, which should usually be the case.
  • Bootstrap 3 provides a number of offset, push, and pull classes that might be very helpful in this situation. However: Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier. Since we're using "xs" columns in this particular case, they can't be utilized here. But see: http://getbootstrap.com/css/#grid-responsive-resets

I'm still a little uneasy about this because I'm not sure I have a firm grasp on exactly how the Bootstrap 3 grid functions. But I've tested it a few different ways and will update if I discover more as we apply it in practice.

Upvotes: 0

Phil Nicholas
Phil Nicholas

Reputation: 3719

You need to wrap the "left" and "right" columns in a 10 sized column, then display them as rows, with the warning message row about it. Like this:

<div class="col-xs-2">
    Sidebar column.
</div>
<div class="col-xs-10">
    <div class="row" id="confirmation_msg">
        <div class="col-xs-12 alert alert-success">
            <button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button>
            <strong>Update:</strong> Widths and structure redesigned.
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4"  style="background-color: #d9edf7;">
            Left content column.   
        </div>
        <div class="col-xs-8" style="background-color: #fcf8e3;">
            Right content column.
        </div>
    </div>
</div>

Note that the confirmation message row is ID'd as "confirmation_msg" so you can hide/show it as needed.

UPDATE: JSFiddle demo

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362820

In addition to wrapping the 3 and 7 in a 10 sized column as PhilNicholas suggested, you could change the alert position to absolute so that it overlays the left and right columns. Otherwise the content will slide up/down when the alert displays.

.alert {
    position:absolute;
    z-index:1;
}

Demo: http://bootply.com/91235

Upvotes: 1

Related Questions