]>
Commit | Line | Data |
---|---|---|
b2051dd7 S |
1 | --- |
2 | layout: docs | |
3 | title: Sizing | |
4 | group: utilities | |
5 | --- | |
6 | ||
7 | Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. | |
8 | ||
9 | Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. | |
10 | ||
11 | {% example html %} | |
12 | <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> | |
13 | <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div> | |
14 | <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div> | |
15 | <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div> | |
16 | {% endexample %} | |
17 | ||
18 | {% example html %} | |
19 | <div style="height: 100px; background-color: rgba(255,0,0,0.1);"> | |
20 | <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div> | |
21 | <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div> | |
22 | <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div> | |
23 | <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div> | |
24 | </div> | |
25 | {% endexample %} | |
26 | ||
27 | You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. | |
28 | ||
29 | {% example html %} | |
30 | <img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%"> | |
31 | {% endexample %} | |
32 | ||
33 | {% example html %} | |
34 | <div style="height: 100px; background-color: rgba(255,0,0,0.1);"> | |
35 | <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div> | |
36 | </div> | |
37 | {% endexample %} |