Using media breakpoints in Bootstrap 4-alpha

Question

In Bootstrap 3 I use this    something       padding  5px       media screen and  min-width   screen-sm-min             padding  20px             media screen and  min-width   screen-md-min             padding  40px            How can I do the same thing in Boostrap 4-alpha  I can t find an example in their docs   This is in  variables scss   grid-breakpoints      xs  0    sm  576px    md  768px    lg  992px    xl  1200px    default   include  assert-ascending  grid-breakpoints    grid-breakpoints     include  assert-starts-at-zero  grid-breakpoints

User · Answer

Bootstrap has a way of using media queries to define the different task for different sites. It uses four breakpoints.

we have extra small screen sizes which are less than 576 pixels that small in which I mean it's size from 576 to 768 pixels.

medium screen sizes take up screen size from 768 pixels up to 992 pixels large screen size from 992 pixels up to 1200 pixels.

E.g Small Text

This means that at the small screen between 576px and 768px, center the text For medium screen, change "sm" to "md" and same goes to large "lg"

User · Answer

Use breakpoint mixins like this    something       padding  5px       include media-breakpoint-up sm             padding  20px             include media-breakpoint-up md             padding  40px            v4 breakpoints reference  v4 alpha6 breakpoints reference    Below full options and values   Breakpoint  amp  up  toggle on value and above     include media-breakpoint-up xs           include media-breakpoint-up sm           include media-breakpoint-up md           include media-breakpoint-up lg           include media-breakpoint-up xl            breakpoint  amp  up values      Extra small devices  portrait phones  less than 576px     No media query since this is the default in Bootstrap     Small devices  landscape phones  576px and up   media  min-width  576px              Medium devices  tablets  768px and up   media  min-width  768px              Large devices  desktops  992px and up   media  min-width  992px              Extra large devices  large desktops  1200px and up   media  min-width  1200px            breakpoint  amp  down  toggle on value and down     include media-breakpoint-down xs           include media-breakpoint-down sm           include media-breakpoint-down md           include media-breakpoint-down lg            breakpoint  amp  down values      Extra small devices  portrait phones  less than 576px   media  max-width  575px              Small devices  landscape phones  less than 768px   media  max-width  767px              Medium devices  tablets  less than 992px   media  max-width  991px              Large devices  desktops  less than 1200px   media  max-width  1199px              Extra large devices  large desktops     No media query since the extra-large breakpoint has no upper bound on its width   breakpoint only    include media-breakpoint-only xs           include media-breakpoint-only sm           include media-breakpoint-only md           include media-breakpoint-only lg           include media-breakpoint-only xl            breakpoint only values  toggle in between values only       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

User · Answer

I answered a similar question here  As  Syden said  the mixins will work  Another option is using SASS map-get like this     media  min-width  map-get  grid-breakpoints  sm       something       padding  10px           media  min-width  map-get  grid-breakpoints  md       something       padding  20px           http   www codeply com go 0TU586QNlV    Bootstrap 4 Breakpoints demo

[twitter-bootstrap] Using media breakpoints in Bootstrap 4-alpha

Examples related to twitter-bootstrap