CODEWITHSUNDEEP
twitter-bootstrapresponsive-design
sybrek
sybrek

Reputation: 362

How to create a collapsing 3columns layout width bootstrap 2.3

my goal is a responsive layout with fixed column-width (for tablets and desktops) to achieve 3 columns for desktops, 2 columns for tablets and 1 column for phones. Unfortunately, the width of the "768"-container is calculated by using the grid and glutter widths.

Is there any way to say "hey, the 768-container should only be 700px" without changing the responsive*.less files ?

Upvotes: 2

Views: 953

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362700

One way to achieve this without LESS changes would be to use a @media query..

For example, if you're using .span4 to get 3 columns across, you can use CSS to override Bootstrap's width of the .span4 on tablets:

@media (min-width: 768px) and (max-width: 979px) {
    .row .span4 {width:46%;}
}

Demo with @media queries: http://www.bootply.com/64864

Another way is using the responsive utility classes. This method involves more HTML markup, but the layout is easier. For example, here 3 span4 are displyed for desktop, and 2 span6 are displayed for tablet. For phone the span6 switch to 100% to display 1 column.

<div class="container">
  <div class="row visible-desktop hidden-tablet hidden-phone">
      <div class="span4">..</div>
      <div class="span4">..</div>
      <div class="span4">..</div>
  </div>
  <div class="row hidden-desktop visible-tablet">
      <div class="span6">..</div>
      <div class="span6">..</div>
  </div>
</div>

Demo with utility classes: http://www.bootply.com/64868

Upvotes: 1

Related Questions