Responsive Helpers

Responsive helper utility is used to allow browsers to determine video or slideshow dimensions according to the width of their containing block in a way that it will properly scale on any device.

You have to apply rules directly on <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Note: You don’t need to include frameborder=”0″ in your <iframe>s as we override that for you.

Syntax:

<div class="embed-responsive embed-responsive-16by9">  

  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>  

</div>  

You can customize aspect ratios with modifier classes:  

<!-- 21:9 aspect ratio -->  

<div class="embed-responsive embed-responsive-21by9">  

  <iframe class="embed-responsive-item" src="..."></iframe>  

</div>  

<!-- 16:9 aspect ratio -->  

<div class="embed-responsive embed-responsive-16by9">  

  <iframe class="embed-responsive-item" src="..."></iframe>  

</div>  

<!-- 4:3 aspect ratio -->  

<div class="embed-responsive embed-responsive-4by3">  

  <iframe class="embed-responsive-item" src="..."></iframe>  

</div>  

<!-- 1:1 aspect ratio -->  

<div class="embed-responsive embed-responsive-1by1">  

  <iframe class="embed-responsive-item" src="..."></iframe>  

</div> 

Responsive Floats

These utility classes are used to float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues.

These use the same viewport width breakpoints as the grid system.

There are two similar non-responsive Sass mixins (float-left and float-right) are also available.

Syntax:

<div class="float-left">Float left on all viewport sizes</div><br>  

<div class="float-right">Float right on all viewport sizes</div><br>  

<div class="float-none">Don't float on all viewport sizes</div><br>  

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>  

<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>  

<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>  

<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br> 

How to use it:

// Related simple non-responsive mixins  

.element {  

  @include float-left;  

}  

.another-element {  

  @include float-right;  

}