Skip to content

Commit 2b42ef0

Browse files
taufekmdo
authored andcommitted
Add CSS Utility for auto width and height Properties (#24249)
Currently bootstrap only provides 4 variations of `width` and `height` css utilities, which are: 1. 25% 2. 50% 3. 75% 4. 100%. Here, I'm adding `auto` to the list. This is useful when we need to reset the width/height value back to the browser default value at some point.
1 parent 8374f54 commit 2b42ef0

File tree

2 files changed

+5
-2
lines changed

2 files changed

+5
-2
lines changed

docs/4.0/utilities/sizing.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ group: utilities
66
toc: true
77
---
88

9-
Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Modify those values as you need to generate different utilities here.
9+
Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
1010

1111
{% example html %}
1212
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
1313
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
1414
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
1515
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
16+
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
1617
{% endexample %}
1718

1819
{% example html %}
@@ -21,6 +22,7 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
2122
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
2223
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
2324
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
25+
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
2426
</div>
2527
{% endexample %}
2628

scss/_variables.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,8 @@ $sizes: map-merge((
132132
25: 25%,
133133
50: 50%,
134134
75: 75%,
135-
100: 100%
135+
100: 100%,
136+
auto: auto
136137
), $sizes);
137138
// stylelint-enable
138139

0 commit comments

Comments
 (0)