CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Bhavuk Suthar
Bhavuk Suthar

Reputation: 101

Bootstrap 3 stack grid according to browser size

i am designing a template for bootstrap

so far i have done this and i am stuck with 2 things

I want to change the number of columns as browser window changes like following

@media (min-width: 600px) {
#columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
 }
}
@media (min-width: 800px) {
#columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
 }
}
@media (min-width: 1000px) {
 #columns {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
 }
}

But if i use this code it gives very strange behavior, apart from that i also wants to change the size of font as window size changes.

So is there any other way to change the column size and font size?

Thank you

Upvotes: 0

Views: 155

Answers (2)

pierdevara
pierdevara

Reputation: 406

Take a few minutes to understand the grid system in bootstrap. The proper way to increase columns at various breakpoints is to add the correct bootstrap class for each size. The sizes are xs, sm, md, lg.

So the proper way to achieve what you need is to use the grid system:

3 columns for xs  - .col-xs-4                   because 12/4 = 3
4 columns for sm  - .col-sm-3                   because 12/3 = 3
5 columns for md+ - .col-md-offset-1 .col-md-2  because 10/2 = 5 and padding of 1 column

<div class="section col-xs-4 col-sm-3 col-md-offset-1 col-md-2"></div>

For the font size you need to target the proper width like you were initially doing, but since we are using the bootstrap breakpoints we should also use them for the font. Looking at the link above we can see the media queries we need:

.section {font-size: 12px}    /* anything below 750 */

@media (min-width: 750px)  { .section {font-size: 14px} }

@media (min-width: 970px)  { .section {font-size: 16px} }

@media (min-width: 1170px) { .section {font-size: 18px} }

Upvotes: 1

cameck
cameck

Reputation: 2098

You're using Bootstrap, so you should take advantage of the CSS already built in.

Check out this example: http://www.tutorialrepublic.com/examples/bin/output.php

In this example he utilizes these classes: .col-sm-6 .col-md-4 .col-lg-3 to create a fluid layout.

Check out the documentation on the grid system and play with it to get the result you want. http://getbootstrap.com/css/#grid

Upvotes: 0

Related Questions