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

---
label: 'Bootstrap 5 Layouts » Grid CSS Classes Reference'
related:
  - bootstrap_five_layouts_css_loader.utilities_classes
  - bootstrap_five_layouts_css_loader.overview
---
<h2>{% trans %}What are Bootstrap 5 Grid CSS Classes?{% endtrans %}</h2>
<p>{% trans %}Bootstrap 5 Grid CSS classes provide a comprehensive responsive grid system for creating layouts. This module includes 313 unique grid classes covering containers, rows, columns, offsets, gutters, and responsive breakpoints.{% endtrans %}</p>

<h2>{% trans %}Container Classes{% endtrans %}</h2>
<p>{% trans %}Container classes define the outer wrapper for your content:{% endtrans %}</p>
<ul>
  <li><code>container</code> - {% trans %}Responsive fixed-width container{% endtrans %}</li>
  <li><code>container-fluid</code> - {% trans %}Full-width container spanning the entire viewport{% endtrans %}</li>
  <li><code>container-sm, container-md, container-lg, container-xl, container-xxl</code> - {% trans %}Containers with specific breakpoint max-widths{% endtrans %}</li>
</ul>

<h2>{% trans %}Row and Column Classes{% endtrans %}</h2>
<p>{% trans %}The grid system uses rows and columns to create layouts:{% endtrans %}</p>
<ul>
  <li><code>row</code> - {% trans %}Creates a flex row for columns{% endtrans %}</li>
  <li><code>col</code> - {% trans %}Auto-sizing column{% endtrans %}</li>
  <li><code>col-auto</code> - {% trans %}Auto-width column{% endtrans %}</li>
  <li><code>col-1</code> through <code>col-12</code> - {% trans %}Fixed width columns (1-12 grid system){% endtrans %}</li>
</ul>

<h2>{% trans %}Responsive Breakpoints{% endtrans %}</h2>
<p>{% trans %}All column classes support responsive breakpoints:{% endtrans %}</p>
<ul>
  <li><strong>sm (≥576px)</strong> - {% trans %}Small screens and up{% endtrans %}</li>
  <li><strong>md (≥768px)</strong> - {% trans %}Medium screens and up{% endtrans %}</li>
  <li><strong>lg (≥992px)</strong> - {% trans %}Large screens and up{% endtrans %}</li>
  <li><strong>xl (≥1200px)</strong> - {% trans %}Extra large screens and up{% endtrans %}</li>
  <li><strong>xxl (≥1400px)</strong> - {% trans %}Extra extra large screens and up{% endtrans %}</li>
</ul>
<p>{% trans %}Example: <code>col-md-6</code> creates a 6-column width on medium screens and up.{% endtrans %}</p>

<h2>{% trans %}Row Columns Classes{% endtrans %}</h2>
<p>{% trans %}Control how many columns appear per row:{% endtrans %}</p>
<ul>
  <li><code>row-cols-1</code> through <code>row-cols-6</code> - {% trans %}Number of columns per row{% endtrans %}</li>
  <li><code>row-cols-auto</code> - {% trans %}Auto-sizing columns in row{% endtrans %}</li>
</ul>

<h2>{% trans %}Offset Classes{% endtrans %}</h2>
<p>{% trans %}Push columns to the right using offset classes:{% endtrans %}</p>
<ul>
  <li><code>offset-1</code> through <code>offset-11</code> - {% trans %}Push columns to the right{% endtrans %}</li>
  <li><code>offset-{breakpoint}-{number}</code> - {% trans %}Responsive offsets for all breakpoints{% endtrans %}</li>
</ul>

<h2>{% trans %}Gutter Classes{% endtrans %}</h2>
<p>{% trans %}Control spacing between grid columns:{% endtrans %}</p>
<ul>
  <li><code>g-0</code> through <code>g-5</code> - {% trans %}Gap/gutter spacing for both x and y axes{% endtrans %}</li>
  <li><code>gx-0</code> through <code>gx-5</code> - {% trans %}Horizontal gap/gutter spacing{% endtrans %}</li>
  <li><code>gy-0</code> through <code>gy-5</code> - {% trans %}Vertical gap/gutter spacing{% endtrans %}</li>
</ul>

<h2>{% trans %}Additional Online Resources{% endtrans %}</h2>
<ul>
  <li><a href="https://getbootstrap.com/docs/5.3/layout/grid/">{% trans %}Bootstrap 5 Grid System Documentation{% endtrans %}</a></li>
  <li><a href="https://getbootstrap.com/docs/5.3/layout/breakpoints/">{% trans %}Bootstrap 5 Breakpoints Documentation{% endtrans %}</a></li>
</ul>