Skip to content
GitLab
Explore
Projects
Groups
Snippets
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Bootstrap
bootstrap
Commits
44c09cc0
Commit
44c09cc0
authored
8 years ago
by
Chris Rebert
Browse files
Options
Download
Plain Diff
Merge pull request #19234 from twbs/v4-w100
Add `.w-100` as width: 100% utility class
parents
18c25056
3165835a
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
docs/components/utilities.md
+8
-0
docs/components/utilities.md
scss/utilities/_spacing.scss
+4
-0
scss/utilities/_spacing.scss
with
12 additions
and
0 deletions
+12
-0
docs/components/utilities.md
+
8
-
0
View file @
44c09cc0
...
...
@@ -165,6 +165,14 @@ Sometimes contextual classes cannot be applied due to the specificity of another
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
## Widths
Easily make an element as wide as its parent using the
`.w-100`
utility class, which sets
`width: 100%`
.
{% example html %}
<img
class=
"w-100"
data-src=
"holder.js/200px100?outline=yes&text=Width%20%3D%20100%25"
alt=
"Width = 100%"
>
{% endexample %}
## Close icon
Use a generic close icon for dismissing content like modals and alerts.
**Be sure to include text for screen readers**
, as we've done with
`aria-label`
.
...
...
This diff is collapsed.
Click to expand it.
scss/utilities/_spacing.scss
+
4
-
0
View file @
44c09cc0
// Width
.w-100
{
width
:
100%
!
important
;
}
// Margin and Padding
.m-x-auto
{
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Explore
Projects
Groups
Snippets