Skip to content

Latest commit

 

History

History
70 lines (54 loc) · 2.63 KB

File metadata and controls

70 lines (54 loc) · 2.63 KB
layout docs
title Responsive helpers
group utilities

Responsive embeds

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to <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.

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

{% example html %}

<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
{% endexample %}

Aspect ratios can be customized with modifier classes.

{% highlight html %}

<iframe class="embed-responsive-item" src="..."></iframe>
<iframe class="embed-responsive-item" src="..."></iframe>
<iframe class="embed-responsive-item" src="..."></iframe>
<iframe class="embed-responsive-item" src="..."></iframe>
{% endhighlight %}

Responsive floats

These utility classes 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.

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

{% example html %}

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

Float left on viewports sized XL (extra-large) or wider

{% endexample %}

{% highlight scss %} // Related simple non-responsive mixins .element { @include float-left; } .another-element { @include float-right; } {% endhighlight %}