How to set the number of columns according to the size of the screen?

Question

I'm currently using

<div class="col-sm-6 col-xs-12">

to have 2 columns on all screens larger than xs.

However, I want to set the breakpoint where I start to have 2 columns when the screen-width is somewhere between xs and sm.

Should I use @media query? If so, how do I do that?

It's for a portfolio page where the user can click the images to view different projects.

This is what I've written so far:

<section class="container-fluid" id="portfolio">
    <h1>PORTFOLIO</h1>
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            <img src="#" alt="#" width="100%">
            <p>Me</p>
        </div>

        <div class="col-sm-6 col-xs-12">
            <img src="#" alt="#" width="100%">
            <p>Me</p>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 col-xs-12">
            <img src="#" alt="#" width="100%">
            <p>Me</p>
        </div>

        <div class="col-sm-6 col-xs-12">
            <img src="#" alt="#" width="100%">
            <p>Me</p>
        </div>
    </div>    

    <div class="row">
        <div class="col-sm-6 col-xs-12">
            <img src="#" alt="#" width="100%">
            <p>Me</p>
        </div>

        <div class="col-sm-6 col-xs-12">
            <img src="#" alt="#" width="100%">
            <p>Me</p>
        </div>
    </div>
</section>

Help much appreciated!

You should use media queries if you want a break point not provided by Bootstrap's grid system — Carl Binalla, Mar 10 '17 at 09:36
@CarlJan Thanks. I can't work out how to input that into CSS. — sim, Mar 10 '17 at 09:47

score 0 · Answer 1 · answered Mar 10 '17 at 09:54

Try something like this:

@media all and (max-width: 500px) and (min-width: 300px){
    .col-md-6 {
        width: 75% !important;
    }
    .col-xs-12 {
        width: 75% !important;
    }
}

Or create another class, like .custom-breakpoint, then add it:

@media all and (max-width: 500px) and (min-width: 300px){
    .custom-breakpoint {
        width: 75% !important;
    }
}

I'm not sure if those will work, but using media query looks something like those . The !important is there so that it will be prioritized over Bootstrap's own col-md-6 and col-xs-12

Setting the column width to 75% is making everything three-quarter sized but keeping the same number of columns (50% = half-sized...etc). — sim, Mar 15 '17 at 02:29

score 0 · Answer 2 · answered Mar 10 '17 at 09:55

To add a media query to your CSS you could use the following:

@media only screen and (min-width: 800px) {

    // Your CSS

}

If you want to use the CSS between two breakpoints you could use:

@media only screen and (min-width: 800px) and (max-width: 1000px) {

    // Your CSS

}

These target all devices so you might want to get a little more specific than that. There's a good amount of info on this CSS Tricks article to help you do that.

Hopefully that helps!

score 0 · Answer 3 · answered Mar 10 '17 at 10:45

It's hard to override the entire xs breakpoint w/o adding a lot of CSS rules. The preferred method is to create a custom version:

http://getbootstrap.com/customize/#media-queries-breakpoints

of use LESS to change the breakpoint..

@import "bootstrap.less";

/* change lowest tier to 700 instead of 768 */
@screen-sm-min: 700px;

How to set the number of columns according to the size of the screen?

3 Answers3