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.





HTML
<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
d-blockd-block
HTML
<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.

No shadow
Small shadow
Regular shadow
Larger shadow
HTML
<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.

100%
75%
50%
25%
HTML
<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>
Recent Notification