CODEWITHSUNDEEP
csstwitter-bootstrapclassbootstrap-4
Miklw
Miklw

Reputation: 333

Bootstrap classes for specific breakpoints

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 !

Upvotes: 22

Views: 52122

Answers (4)

user1891758
user1891758

Reputation: 419

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

Upvotes: 13

Fareed Khan
Fareed Khan

Reputation: 2923

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.

Upvotes: 14

Virus5600
Virus5600

Reputation: 199

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>

Upvotes: 6

Martineau Robin
Martineau Robin

Reputation: 189

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>

Upvotes: 18

Related Questions