diff options
| author | Mark Otto <markd.otto@gmail.com> | 2022-05-06 07:32:02 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-05-06 07:32:02 +0300 |
| commit | bca99232b8bef6a53719e4827de40729098d4ec8 (patch) | |
| tree | b8c3e0280377262d8602e345c8a0be7d9602f13d /site/content/docs | |
| parent | 5d9500bdfdd02b3b1d91df2be86b1723f517fc52 (diff) | |
Iterate on border utilities (#36239)
* Remove `--bs-border-opacity: 1` from `.border-*` utilities
We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this.
* Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues
* Add some demos of border utils to the docs
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.1/utilities/borders.md | 23 |
1 files changed, 19 insertions, 4 deletions
diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md index bba34358eb..1df69f3725 100644 --- a/site/content/docs/5.1/utilities/borders.md +++ b/site/content/docs/5.1/utilities/borders.md @@ -12,6 +12,8 @@ Use border utilities to add or remove an element's borders. Choose from all bord ### Additive +Add borders to custom elements: + {{< example class="bd-example-border-utils" >}} <span class="border"></span> <span class="border-top"></span> @@ -22,6 +24,8 @@ Use border utilities to add or remove an element's borders. Choose from all bord ### Subtractive +Or remove borders: + {{< example class="bd-example-border-utils bd-example-border-utils-0" >}} <span class="border-0"></span> <span class="border-top-0"></span> @@ -43,11 +47,22 @@ Change the border color using utilities built on our theme colors. <span class="border border-white"></span> {{< /example >}} -{{< callout >}} -Unlike text and background color utilities, border color utilities redeclare the `border-color` property **without** an additional `--bs-border-opacity`, as opposed to resetting only `--bs-border-color`. This ensures the backward compatibility of border color utilities applying to other components while providing additional functionality through CSS variables. +Or modify the default `border-color` of a component: -This will be revisited in a future major release. -{{< /callout >}} +{{< example >}} +<div class="mb-4"> + <label for="exampleFormControlInput1" class="form-label">Email address</label> + <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com"> +</div> + +<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger"> + Dangerous heading +</div> + +<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end"> + Changing border color and width +</div> +{{< /example >}} ## Opacity |