Bootstrap Utilities

Utilities are small classes which do one thing, like d-none (hide), w-50 (width 50%) or shadow. They let you change the look of an element directly in the HTML, without a new CSS rule.

Display and visibility

<div class="d-none d-md-block bg-success-subtle p-2 mb-2">Visible from md (768px) and up</div>
<div class="d-block d-md-none bg-warning-subtle p-2 mb-2">Visible only below md</div>
<span class="d-inline-block bg-info-subtle p-2 me-2">d-inline-block</span>
<span class="visible">visible</span>
<span class="invisible">invisible (keeps the space)</span>

d-none removes the element from the layout. .invisible only hides it but keeps its space. .visually-hidden hides it from the screen but keeps it for screen readers.

Sizing

<div class="w-25 bg-primary-subtle p-1 mb-1">w-25</div>
<div class="w-50 bg-primary-subtle p-1 mb-1">w-50</div>
<div class="w-75 bg-primary-subtle p-1 mb-1">w-75</div>
<div class="w-100 bg-primary-subtle p-1 mb-1">w-100</div>
<div class="w-auto bg-primary-subtle p-1">w-auto</div>

The same values exist for height (h-25 … h-100), and also mw-100, mh-100, vw-100 and vh-100.

Borders, rounded corners and shadows

<div class="d-flex gap-3 flex-wrap">
  <div class="p-3 border">border</div>
  <div class="p-3 border border-primary border-3">border-primary border-3</div>
  <div class="p-3 border-top border-danger">border-top</div>
  <div class="p-3 border rounded-3">rounded-3</div>
  <div class="p-3 border rounded-pill">rounded-pill</div>
  <div class="p-3 shadow-sm">shadow-sm</div>
  <div class="p-3 shadow">shadow</div>
  <div class="p-3 shadow-lg">shadow-lg</div>
</div>

Position

<div class="position-relative bg-body-secondary" style="height: 100px">
  <div class="position-absolute top-0 start-0 p-2 bg-primary text-white">top-0 start-0</div>
  <div class="position-absolute bottom-0 end-0 p-2 bg-success text-white">bottom-0 end-0</div>
  <div class="position-absolute top-50 start-50 translate-middle p-2 bg-warning">center</div>
</div>

• .position-relative on the parent, and .position-absolute on the child, with top-0, start-0 and so on.
• .translate-middle with top-50 start-50 centers an element.
• .fixed-top, .fixed-bottom and .sticky-top fix elements to the screen.

Overflow and other helpers

Class	Effect
.overflow-auto, .overflow-hidden	Scroll or clip the content
.opacity-50	Opacity 50%
.z-1, .z-3	z-index
.user-select-none	Text cannot be selected
.pe-none	No mouse events
.object-fit-cover	Image fits the box and is cropped (5.3)
.text-nowrap, .text-break	Control the line breaks
.clearfix	Clears floats
.vr	A vertical line

Vertical rule and the helper classes

<div class="d-flex align-items-center gap-3">
  <span>One</span><div class="vr"></div><span>Two</span><div class="vr"></div><span>Three</span>
</div>

Stretched link and the focus ring

Add .stretched-link to a link to make its parent box clickable. Use .focus-ring to give a nice focus style to custom elements.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.