CODEWITHSUNDEEP
csstwitter-bootstrap
John
John

Reputation: 887

How to make bootstrap responsive layout that does not stack all the content in single column?

First of all, I am a very new to front-end development so please bear it with me. Hopefully, I can use the right terms to describe the problem I am trying to solve. I've started using Twitter's bootstrap framework recently and I am trying to figure out if one can have the following fluid layout:

Say, this is the main layout, a row with 4 span3s.

1111 3333 2222 4444

When the screen is resized, the columns in that row stack-up in a single column as following:

1111

3333

2222

4444

And what I am trying to figure out is, if it is possible to stack those up in this manner if there is enough screen size:

1111 3333

2222 4444

And then if the screen size becomes really small then do a single column stack as mentioned above:

1111

3333

2222

4444

Thanks.

Upvotes: 2

Views: 922

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362610

You can use a media query like this to override Bootstrap's default width on .span3. Bootstrap normally changes span* to 100% width when the screen is 768px or less.

@media (min-width: 768px) and (max-width: 980px) {
  .span3 {
    width:41%;
  }
  .span3:nth-child(3) {
    margin-left:0;
  }
}

You may need to tweak the margins and width accordingly.

Demo on Bootply

Upvotes: 3

Tim Franklin
Tim Franklin

Reputation: 3060

When you download Bootstrap from their home page (http://twitter.github.io/bootstrap/, instead of via their Customize page or via the GitHub project) it has the responsive styles separated into its own file. You can then tweak/override the media queries (@media ...) to achieve what you're after without having to mess with the other Bootstrap baseline styles. As one of your commenters mentioned, what you're describing is not out-of-the-box for TB, but it's not too difficult to achieve.

I'd suggest floating the spans to the left with a display of inline-block (might use the *display: inline; *zoom: 1; hack for IE7 if support is needed) for certain media queries to get them to fall as described.

Upvotes: 2

Related Questions