Bootstrap classes for specific breakpoints

Question

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 !

Answer 1

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>

Answer 2

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

Answer 3

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.