mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 22:41:20 +02:00
Code Issues Releases Wiki Activity

Iterate on border utilities (#36239)

Browse Source 
* 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
This commit is contained in:
Mark Otto
2022-05-05 21:32:02 -07:00
committed by GitHub
parent 5d9500bdfd
commit bca99232b8
3 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
site/content/docs/5.1/utilities/borders.md
View File

@@ -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