6

I am new to the world of Bootstrap but had a question as follows.

I've learned that it is possible to change column widths depending on screen size as follows:

<div class="col-lg-4 col-md-6 col-sm-8 col-xs-12 bg-warning">
<h1>Hello, world!</h1>
This is some text that I wanted to include here.
</div>

I've included bg-warning in there as my question is - is it possible to change the background colour as the screen width changes - as we are able to with the column widths themselves?

e.g. Large Screen - bg-warning, Medium, bg-success, and so on

andre1990
  • 107
  • 2
  • 9
  • I don't think Bootstrap has that out of the box, but you can surely achieve this with JavaScript. Is JS something that can be used? – Raphael Cunha Aug 21 '17 at 19:53
  • 1
    Use [media queries](https://stackoverflow.com/q/4189868/3233827). You need to write your own queries. This is not an official feature of Bootstrap. But on the bright side: it is very easy ;) – ssc-hrep3 Aug 21 '17 at 20:20

1 Answers1

3

Bootstrap provides no html classes to do what you are asking, you have to use media queries like ssc-hrep3 mentioned.

But since you are using bootstrap 4 you can use Sass mixins to create media queries: Using media breakpoints in Bootstrap 4-alpha

Using the example of the answer from the link above you can make something like this:

.bg-warning {       
   @include media-breakpoint-up(sm) { 
       background:#fff;
   }
   @include media-breakpoint-up(md) { 
       background:#f6f6f6;
   }
   @include media-breakpoint-up(lg) { 
       background:#fafafa;
   }
}
Joris
  • 31
  • 2