I want to add new responsive breakpoints css in bootstrap 4.1

Question

In bootstrap 4.1 have breakpoints are :

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

I want to add new

@media (min-width: 1600px) { ... }

But when I put css in 1600px its not working and css getting from 1200px. Anyone help me about this problem?

Answer 1

I propose you to create your own custombootstratheme.sass and include something like this:

//overriding sass _varibles  :

$grid-breakpoints: (
  xs: 0,
  my: 300px, // !!!!!!!!!!!!!
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
@import "./../node_modules/bootstrap/scss/functions";
@import "./../node_modules/bootstrap/scss/variables";
@import "./../node_modules/bootstrap/scss/mixins";

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L187-L193

then after sass compilation you should get all family of your own col-my-6 mt-my-1 etc. bootstrap tools

Answer 2

Can you try to put also min-width and max-width like this:

@media  only screen and (min-width:1200px) and (max-width:1600px) {
   div#zarada p {width:39% }
   }

You can set maybe smaller size between also check order of setting sizes.

Here are more information and extended sample: media screen and max width