Reboot
Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
Horizontal rules
The hr
element has been simplified. Similar to browser defaults, hr
are styled via border-top
, have a default opacity: .25
, and automatically inherit their border-color
via color
, including when color
is set via the parent. They can be modified with text, border, and opacity utilities.
<hr><div class="text-success"> <hr></div><hr class="text-danger border-2 opacity-50"><hr class="border-primary border-3 opacity-75">
Display property
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
- d-inline
- d-inline
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
Shadows
You can also quickly add or remove shadows to elements with box-shadow utilities.
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div><div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div><div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div><div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
Opacity
Set the opacity of an element using .opacity-{value}
utilities.
<div class="opacity-100 p-3 m-2 bg-primary text-white fw-bold rounded">100%</div><div class="opacity-75 p-3 m-2 bg-primary text-white fw-bold rounded">75%</div><div class="opacity-50 p-3 m-2 bg-primary text-white fw-bold rounded">50%</div><div class="opacity-25 p-3 m-2 bg-primary text-white fw-bold rounded">25%</div>