'Bootstrap use css class at breakpoint (xs,md...)
Is there a way to use the bootstrap breakpoints xs,md etc. as a condition for assigning classes?
Example:
<span class="text-large-md text-small-xs">My Text</span>
I just want to be flexible assigning classes, depending on which screensize (breakpoint) I am.
Update: Bootstrap has helper classes like hidden-xs. So if you want to hide a text on a button on small screens you can use this class. But if the button for instance uses a fix width (assigned by a class), the button size won't change. So my question is, how to change class styles depending on the screen size, via bootstrap.
Solution 1:[1]
You could write something like this with LESS (if you're compiling with Bootstrap's LESS):
// Responsive text
/**
* Bootstrap's LESS variables:
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@font-size-base: 14px;
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
*/
.text-xs-small { font-size: @font-size-small; }
.text-xs-large { font-size: @font-size-large; }
@media (min-width: @screen-sm-min) {
.text-sm-small { font-size: floor((@font-size-small * 1.1)); }
.text-sm-large { font-size: floor((@font-size-large * 1.1)); }
}
@media (min-width: @screen-md-min) {
.text-md-small { font-size: floor((@font-size-small * 1.3)); }
.text-md-large { font-size: floor((@font-size-large * 1.3)); }
}
@media (min-width: @screen-lg-min) {
.text-lg-small { font-size: floor((@font-size-small * 1.5)); }
.text-lg-large { font-size: floor((@font-size-large * 1.5)); }
}
Or just CSS:
.text-xs-small {
font-size: 12px;
}
.text-xs-large {
font-size: 18px;
}
@media (min-width: 768px) {
.text-sm-small {
font-size: 13px;
}
.text-sm-large {
font-size: 19px;
}
}
@media (min-width: 992px) {
.text-md-small {
font-size: 15px;
}
.text-md-large {
font-size: 23px;
}
}
@media (min-width: 1200px) {
.text-lg-small {
font-size: 18px;
}
.text-lg-large {
font-size: 27px;
}
}
Solution 2:[2]
Since Bootstrap writes their source CSS in Sass, all their media queries are available via Sass mixins.
To answer your question, Bootstrap suggests you do it this way:
html {
font-size: 14px;
}
@include media-breakpoint-up(sm) {
html {
font-size: 16px;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 20px;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 28px;
}
}
Another example from Bootstrap's site:
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example usage:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
Solution 3:[3]
The recommended approach looks good from @livelytania - in the past for a pure HTML/bootstrap solution I've done
<div class="...">
<div class="d-none d-xl-block css-class-for-xl">Display me when xl</div>
<div class="d-block d-xl-none css-class-for-lt-xl">Display me when less than xl</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Khalid T. |
Solution 2 | livelytania |
Solution 3 | TerrorBight |