bootstrap_five_layouts-1.0.x-dev/modules/bootstrap_five_layouts_css_loader/help_topics/bootstrap_five_layouts_css_loader.utilities_classes.html.twig

---
label: 'Bootstrap 5 Layouts » Utilities CSS Classes Reference'
related:
  - bootstrap_five_layouts_css_loader.grid_classes
  - bootstrap_five_layouts_css_loader.overview
---
<h2>{% trans %}What are Bootstrap 5 Utilities CSS Classes?{% endtrans %}</h2>
<p>{% trans %}Bootstrap 5 Utilities CSS classes provide 1,393 utility classes for rapid layout, spacing, colors, typography, and component styling. These classes follow a consistent naming convention and support responsive variants.{% endtrans %}</p>

<h2>{% trans %}Major Utility Categories{% endtrans %}</h2>

<h3>{% trans %}Spacing Utilities{% endtrans %}</h3>
<p>{% trans %}Control margins and padding:{% endtrans %}</p>
<ul>
  <li><strong>Margin:</strong> <code>m-{size}</code>, <code>mx-{size}</code>, <code>my-{size}</code>, <code>mt-{size}</code>, <code>me-{size}</code>, <code>mb-{size}</code>, <code>ms-{size}</code></li>
  <li><strong>Padding:</strong> <code>p-{size}</code>, <code>px-{size}</code>, <code>py-{size}</code>, <code>pt-{size}</code>, <code>pe-{size}</code>, <code>pb-{size}</code>, <code>ps-{size}</code></li>
  <li><strong>Sizes:</strong> 0, 1, 2, 3, 4, 5 (representing rem values)</li>
</ul>

<h3>{% trans %}Display Utilities{% endtrans %}</h3>
<p>{% trans %}Control element display properties:{% endtrans %}</p>
<ul>
  <li><code>d-none</code>, <code>d-inline</code>, <code>d-inline-block</code>, <code>d-block</code></li>
  <li><code>d-grid</code>, <code>d-table</code>, <code>d-table-row</code>, <code>d-table-cell</code></li>
  <li><code>d-flex</code>, <code>d-inline-flex</code></li>
</ul>

<h3>{% trans %}Flexbox Utilities{% endtrans %}</h3>
<p>{% trans %}Control flexbox layout:{% endtrans %}</p>
<ul>
  <li><strong>Direction:</strong> <code>flex-row</code>, <code>flex-row-reverse</code>, <code>flex-column</code>, <code>flex-column-reverse</code></li>
  <li><strong>Wrap:</strong> <code>flex-wrap</code>, <code>flex-nowrap</code>, <code>flex-wrap-reverse</code></li>
  <li><strong>Alignment:</strong> <code>align-items-start</code>, <code>align-items-center</code>, <code>align-items-end</code></li>
  <li><strong>Justify:</strong> <code>justify-content-start</code>, <code>justify-content-center</code>, <code>justify-content-between</code></li>
</ul>

<h3>{% trans %}Color Utilities{% endtrans %}</h3>
<p>{% trans %}Apply theme colors:{% endtrans %}</p>
<ul>
  <li><strong>Text:</strong> <code>text-primary</code>, <code>text-secondary</code>, <code>text-success</code>, <code>text-danger</code>, <code>text-warning</code>, <code>text-info</code></li>
  <li><strong>Background:</strong> <code>bg-primary</code>, <code>bg-secondary</code>, <code>bg-light</code>, <code>bg-dark</code>, <code>bg-white</code></li>
  <li><strong>Border:</strong> <code>border-primary</code>, <code>border-secondary</code>, etc.</li>
</ul>

<h3>{% trans %}Border Utilities{% endtrans %}</h3>
<p>{% trans %}Control borders and border radius:{% endtrans %}</p>
<ul>
  <li><strong>Border:</strong> <code>border</code>, <code>border-0</code>, <code>border-top</code>, <code>border-end</code>, <code>border-bottom</code>, <code>border-start</code></li>
  <li><strong>Border Radius:</strong> <code>rounded</code>, <code>rounded-0</code>, <code>rounded-circle</code>, <code>rounded-pill</code></li>
  <li><strong>Border Width:</strong> <code>border-1</code>, <code>border-2</code>, <code>border-3</code>, <code>border-4</code>, <code>border-5</code></li>
</ul>


<h3>{% trans %}Size Utilities{% endtrans %}</h3>
<p>{% trans %}Control width and height:{% endtrans %}</p>
<ul>
  <li><strong>Width:</strong> <code>w-25</code>, <code>w-50</code>, <code>w-75</code>, <code>w-100</code>, <code>w-auto</code></li>
  <li><strong>Height:</strong> <code>h-25</code>, <code>h-50</code>, <code>h-75</code>, <code>h-100</code>, <code>h-auto</code></li>
  <li><strong>Max Width:</strong> <code>mw-100</code></li>
  <li><strong>Max Height:</strong> <code>mh-100</code></li>
</ul>

<h2>{% trans %}Responsive Variants{% endtrans %}</h2>
<p>{% trans %}Most utilities support responsive breakpoints using the format: <code>{utility}-{breakpoint}-{value}</code>{% endtrans %}</p>
<ul>
  <li><strong>Breakpoints:</strong> xs, sm, md, lg, xl, xxl</li>
  <li><strong>Example:</strong> <code>d-md-flex</code> - {% trans %}Display as flex on medium screens and up{% endtrans %}</li>
  <li><strong>Example:</strong> <code>mb-lg-4</code> - {% trans %}Margin bottom 4 on large screens and up{% endtrans %}</li>
</ul>

<h2>{% trans %}Additional Online Resources{% endtrans %}</h2>
<ul>
  <li><a href="https://getbootstrap.com/docs/5.3/utilities/spacing/">{% trans %}Bootstrap 5 Spacing Utilities{% endtrans %}</a></li>
  <li><a href="https://getbootstrap.com/docs/5.3/utilities/display/">{% trans %}Bootstrap 5 Display Utilities{% endtrans %}</a></li>
  <li><a href="https://getbootstrap.com/docs/5.3/utilities/flex/">{% trans %}Bootstrap 5 Flex Utilities{% endtrans %}</a></li>
</ul>