Bootstrap 5 Tutorial

Bootstrap 5 Utilities

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="ceb9bac9-a8a1-4d4d-b4d1-1ca95cf74d60" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Utilities</h3>
<p>Bootstrap 5 comes with a suite of utility classes that allow quick styling and layout adjustments without writing custom CSS. These utilities cover a range of common tasks, such as spacing, text alignment, background colors, borders, display properties, and more. By using these classes, developers can make rapid layout adjustments directly in HTML, keeping code organized and reducing the need for additional CSS.</p>
<hr />
<h3>Key Bootstrap 5 Utility Categories</h3>
<ol>
<li><strong>Spacing</strong>: Adjust margins and padding with a set of <code>m</code> (margin) and <code>p</code> (padding) utilities. For example:
<ul>
<li><code>mt-3</code>: Sets a top margin of 1rem.</li>
<li><code>p-2</code>: Adds padding of 0.5rem on all sides.</li>
</ul>
</li>
<li><strong>Text</strong>: Control text alignment, color, and other text-related properties.
<ul>
<li><code>text-center</code>: Centers text within the element.</li>
<li><code>text-muted</code>: Applies a lighter color to text.</li>
</ul>
</li>
<li><strong>Background Colors</strong>: Easily change background colors with classes like <code>bg-primary</code>, <code>bg-danger</code>, <code>bg-light</code>, etc.</li>
<li><strong>Borders</strong>: Add borders to elements, define border radius, and control border color.
<ul>
<li><code>border</code>: Adds a border around the element.</li>
<li><code>rounded-circle</code>: Makes the element a circle.</li>
</ul>
</li>
<li><strong>Display</strong>: Toggle visibility and display type with <code>d-*</code> classes, such as <code>d-none</code>, <code>d-inline</code>, <code>d-flex</code>, etc.</li>
<li><strong>Flex</strong>: Use flexbox utilities to control layout, including alignment and positioning.
<ul>
<li><code>d-flex</code>: Enables flexbox on the element.</li>
<li><code>justify-content-center</code>: Centers items along the main axis.</li>
</ul>
</li>
<li><strong>Position</strong>: Set positioning to static, relative, absolute, fixed, or sticky.
<ul>
<li><code>position-relative</code>: Positions an element relative to its normal position.</li>
<li><code>top-0</code>, <code>bottom-0</code>: Set the element&rsquo;s position from the top or bottom.</li>
</ul>
</li>
</ol>
<hr />
<h3>Examples of Common Bootstrap 5 Utilities</h3>
<h4>Spacing Utilities</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="mt-4 mb-3 p-3 bg-light"&gt;
    &lt;p class="mb-0"&gt;This div has a top margin of 1.5rem, bottom margin of 1rem, and padding of 1rem on all sides.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Text Utilities</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;p class="text-center text-primary"&gt;This text is centered and colored using the primary color utility.&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Background Color and Border Utilities</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="bg-warning text-white p-3 border border-dark rounded"&gt;
    &lt;p class="mb-0"&gt;This div has a warning background color, dark border, and rounded corners.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Flex Utilities</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="d-flex justify-content-center align-items-center bg-light" style="height: 200px;"&gt;
    &lt;p&gt;Centered content using flex utilities.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Display Utilities</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="d-none d-md-block"&gt;
    &lt;p&gt;This text is hidden on small screens but shown on medium and larger screens.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More