Last Updated: February 25, 2016
·
2.68K
· flo-schield-bobby

Boostrap Responsive "missing" media-query

When you try to use the responsive grid of Twitter Bootstrap with the less framework

responsive.less, including: {
    variables.less,
    mixins.less,
    responsive-utilities.less,
    responsive-1200px-min.less,
    responsive-768px-979px.less,
    responsive-767px-max.less,
    responsive-navbar.less
}

The responsive part between 980px and 1199px is not defined. Your grid will take a "wide" appearance for this screen size.

I usually add a new less file to complete this part:

// responsive-980px-1199px.less
//
// Responsive: Small desktops
// --------------------------------------------------


@media (min-width: 980px) and (max-width: 1199px) {

    // Fixed grid
    #grid > .core(@gridColumnWidth980, @gridGutterWidth980);

    // Fluid grid
    #grid > .fluid(@fluidGridColumnWidth980, @fluidGridGutterWidth980);

    // Input grid
    #grid > .input(@gridColumnWidth980, @gridGutterWidth980);

}

Just be sure to add the related variables to your variables.less (or juste define them at the top of this new file)

// Default 940px grid
// -------------------------
[...]
// 980px-1199px
@gridColumnWidth980:      56px;
@gridGutterWidth980:      24px;
@gridRowWidth980:         (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));

// Fluid grid
// -------------------------
[...]
// 980px-1199px
@fluidGridColumnWidth980:      percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980:      percentage(@gridGutterWidth980/@gridRowWidth980);

Then you can easily include your freshly created file into the responsive.less main file :

// MEDIA QUERIES
// ------------------
[...]
// Small desktops
@import "responsive-980px-1199px";
[...]

At the moment I do not feel concerned by the thumnails part of the responsive, so I did not add something in order to fix it.
But if someone had to face this part, I would be interested to know if there is something to add !

2 Responses
Add your response

Thank you!!

over 1 year ago ·

You're welcome !
But please just keep in mind that this was a dedicated fix to bootstrap-2 and that it has been fixed in the last versions of bootstrap-3 !

over 1 year ago ·