src/scss/bootstrap-4.0.0-alpha.6/docs/utilities/responsive-helpers.md

   1 ---
   2 layout: docs
   3 title: Responsive helpers
   4 group: utilities
   5 ---
   6
   7 ## Responsive embeds
   8
   9 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.
  10
  11 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.
  12
  13 **Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
  14
  15 {% example html %}
  16 <div class="embed-responsive embed-responsive-16by9">
  17   <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
  18 </div>
  19 {% endexample %}
  20
  21 Aspect ratios can be customized with modifier classes.
  22
  23 {% highlight html %}
  24 <!-- 21:9 aspect ratio -->
  25 <div class="embed-responsive embed-responsive-21by9">
  26   <iframe class="embed-responsive-item" src="..."></iframe>
  27 </div>
  28
  29 <!-- 16:9 aspect ratio -->
  30 <div class="embed-responsive embed-responsive-16by9">
  31   <iframe class="embed-responsive-item" src="..."></iframe>
  32 </div>
  33
  34 <!-- 4:3 aspect ratio -->
  35 <div class="embed-responsive embed-responsive-4by3">
  36   <iframe class="embed-responsive-item" src="..."></iframe>
  37 </div>
  38
  39 <!-- 1:1 aspect ratio -->
  40 <div class="embed-responsive embed-responsive-1by1">
  41   <iframe class="embed-responsive-item" src="..."></iframe>
  42 </div>
  43 {% endhighlight %}
  44
  45 ## Responsive floats
  46
  47 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](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
  48
  49 Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available.
  50
  51 {% example html %}
  52 <div class="float-left">Float left on all viewport sizes</div><br>
  53 <div class="float-right">Float right on all viewport sizes</div><br>
  54 <div class="float-none">Don't float on all viewport sizes</div><br>
  55
  56 <div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
  57 <div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
  58 <div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
  59 <div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
  60 {% endexample %}
  61
  62 {% highlight scss %}
  63 // Related simple non-responsive mixins
  64 .element {
  65   @include float-left;
  66 }
  67 .another-element {
  68   @include float-right;
  69 }
  70 {% endhighlight %}