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 !
Written by Florent SCHILDKNECHT
Related protips
2 Responses
Thank you!!
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 !