hub.eb?material_id=458&searchInput=bootstrap+mixin&track_id=460
Login
Back

Media Breakpoint Mixins

A Media Breakpoint Mixin can be used to define custom responsive behaviour dependent on the screen size.

The bootstrap media-breakpoint mixins take breakpoint names as parameters (e.g. xs, sm, md, lg, xl).

  • media-breakpoint-up(bp)

The css code is only included when the screen size is greater than the width of the breakpoint.

  • media-breakpoint-down(bp)

The css code is only included when the screen size is less than the width of the breakpoint.

  • media-breakpoint-between(sm, lg)

The css code is only included when the screen size is between the widths of the breakpoints.

@include media-breakpoint-up('lg'){
  margin-bottom: 0;
}

You can also define your own media queries and can learn more at SCSS mixins here. 

Steps

1

Create a new form with a Bootstrap4 Presentation Template

2

Within the style.scss define an SCSS class .responsive-panel

.responsive-panel{
  Height: 300px;
  Background-color: yellow;
  @include media-breakpoint-up(md){
    Background-color: blue;
  }
  @include media-breakpoint-between(lg,xl){
    Background-color:green;
  }
}
3

Create a panel on the form and give it the .responsive-panel

4

Run your form and observe the behaviour of the panel at different screen sizes by changing the size of the browser window.

Previous PageTo Module

Current Module

Responsive Bootstrap Variables
view
Bootstrap Variables File
view
Modifying Bootstrap Breakpoints
view
Bootstrap Container Sizes
view
Media Breakpoint Mixins

Related

HTML element properties
view
On Click Event
view
Hiding & Showing Controls using Client-Server API
view
Transaction Manager
view
Bootstrap Breakpoints
view
Previous PageTo Module