Bootstrap classes for specific breakpoints

user_11940866 0
Viewed 18974

I would like to know if there is a way to make a Boostrap class specific for a breakpoint.

I know there are some like col-sm-2 col-md-4 etc. But what I'm really looking for now would be for the width of an element.

Current code for width 100% : className="w-100"

I supposed there was some way to use something like w-sm-100 w-md-75 w-lg-50 or sm-w-100 md-w-75 lg-w-50 but I didn't find anything like this in Bootstrap documentation or anywhere else.

So, is there a simple way to do this or are we obliged to do it through media queries in css ?

Thank you !

bootstrap-4 twitter-bootstrap class css
4 Answers

If you want to do somthink like this :

<img class="w-100 w-md-50" src="..." alt="...">

You can do this by using a div and class "col" and "mx-auto" like this :

<div class="col col-md-6 mx-auto">
  <img class="w-100" src="..." alt="...">
</div>
user_165409450

For Bootstrap 5. Add this to you variable-file and it'll do what you are describing.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge( 
$utilities, ( "width": map-merge( 
map-get( $utilities, "width"), ( responsive: true ),),)
);

More info here: [https://getbootstrap.com/docs/5.0/utilities/api/#enable-responsive][1]

user_18917580

There was a time when I was also searching for the same issue and do not find the solution other than using media query.

So I decided to create a CSS project with the help of media query for different width sizes at different resolution based on Bootstrap.

So whenever I want to use something like this w-sm-100 w-md-50 w-lg-25, I can simply include my own created stylesheet CDN Link just after my bootstrap CDN link then I can use such classes like this.

Here is the link of stylesheet:

<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1yTLwNiCZhIdCWolQldwq4spHQkgZDqkG">

Live Example:

<!-- Bootstrap CDN link -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<!-- My own Stylesheet CDN Link -->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1yTLwNiCZhIdCWolQldwq4spHQkgZDqkG">

<!-- HTML -->
<h1 class="w-xl-75 w-lg-100 w-md-50 w-sm-75 w-100 bg-primary">Hello World</h1>

The only disadvantage is that if you want to specify the property w-md-50, it will work only on md not on xl or lg.

So in order to make it work for devices greater than md.

You have to do like this: w-xl-50 w-lg-50 w-md-50.

user_132022520

Actually, at Bootstrap 4, they specified and shown the breakpoints they've used.

Using the same queries they've used, you can create a responsive class just by using the same format to easily understand it. Fareed's answer is great, but it can be improved upon.

Here's some of the snippet at the stylesheet I'm currently using:

/* CUSTOM WIDTHS */
.w-10, .w-xs-10 { width: 10%!important; }
.w-15, .w-xs-15 { width: 15%!important; }
.w-20, .w-xs-20 { width: 20%!important; }

/* BREAKPOINTS */

/* SM breakpoint */
@media (min-width: 576px) {
    /* CUSTOM WIDTHS */
    .w-sm-10 { width: 10%!important; }
    .w-sm-15 { width: 15%!important; }
    .w-sm-20 { width: 20%!important; }
}

/* MD breakpoint*/
@media (min-width: 768px) {
    /* CUSTOM WIDTHS */
    .w-md-10 { width: 10%!important; }
    .w-md-15 { width: 15%!important; }
    .w-md-20 { width: 20%!important; }
}

/* LG breakpoint */
@media (min-width: 992px) {
    /* CUSTOM WIDTHS */
    .w-lg-10 { width: 10%!important; }
    .w-lg-15 { width: 15%!important; }
    .w-lg-20 { width: 20%!important; }
}

When used, it acts similar to bootstrap's responsiveness. For example:

/* CUSTOM WIDTHS */
.w-10, .w-xs-10 { width: 10%!important; }
.w-15, .w-xs-15 { width: 15%!important; }
.w-20, .w-xs-20 { width: 20%!important; }

/* BREAKPOINTS */

/* SM breakpoint */
@media (min-width: 576px) {
    /* CUSTOM WIDTHS */
    .w-sm-10 { width: 10%!important; }
    .w-sm-15 { width: 15%!important; }
    .w-sm-20 { width: 20%!important; }
}

/* MD breakpoint*/
@media (min-width: 768px) {
    /* CUSTOM WIDTHS */
    .w-md-10 { width: 10%!important; }
    .w-md-15 { width: 15%!important; }
    .w-md-20 { width: 20%!important; }
}

/* LG breakpoint */
@media (min-width: 992px) {
    /* CUSTOM WIDTHS */
    .w-lg-10 { width: 10%!important; }
    .w-lg-15 { width: 15%!important; }
    .w-lg-20 { width: 20%!important; }
}
<div class="w-md-20" style="background-color: black; color: white">20% at MD or above, but 100% less than that</div>

user_76198260
Related