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

---
label: 'Bootstrap 5 Layouts CSS Loader'
top_level: true
related:
  - bootstrap_five_layouts_css_loader.grid_classes
  - bootstrap_five_layouts_css_loader.utilities_classes
---
<h2>{% trans %}What is the Bootstrap 5 CSS Loader module?{% endtrans %}</h2>
<p>{% trans %}The Bootstrap 5 CSS Loader module provides automated compilation and loading of Bootstrap 5 grid and utilities CSS for the Bootstrap Five Layouts Drupal module. It includes a curated selection of Bootstrap 5 CSS classes optimized for Drupal site building.{% endtrans %}</p>

<h2>{% trans %}What CSS is included?{% endtrans %}</h2>
<p>{% trans %}The module provides two main CSS compilations:{% endtrans %}</p>
<ul>
  <li><strong>{% trans %}Grid System{% endtrans %}</strong> - {% trans %}313 CSS classes for responsive grid layouts, containers, rows, columns, offsets, and gutters{% endtrans %}</li>
  <li><strong>{% trans %}Utilities{% endtrans %}</strong> - {% trans %}1,393 CSS classes for spacing, display, flexbox, colors, borders, typography, and more{% endtrans %}</li>
</ul>

<h2>{% trans %}How to configure the module?{% endtrans %}</h2>
<p>{% trans %}Configure the Bootstrap CSS loader at:{% endtrans %}&nbsp;&nbsp;<a href="{{ url('bootstrap_five_layouts_css_loader.settings') }}"><strong>{% trans %}Administration → Configuration → User Interface → Bootstrap CSS Loader{% endtrans %}</strong></a></p>

<h3>{% trans %}Loading Method Options{% endtrans %}</h3>
<ul>
  <li><strong>{% trans %}Page Attachments (Recommended){% endtrans %}</strong> - {% trans %}Attaches CSS globally using Drupal's library system{% endtrans %}</li>
  <li><strong>{% trans %}Page Preprocess{% endtrans %}</strong> - {% trans %}Loads CSS during page preprocessing{% endtrans %}</li>
  <li><strong>{% trans %}HTML Preprocess{% endtrans %}</strong> - {% trans %}Loads CSS early in HTML head{% endtrans %}</li>
  <li><strong>{% trans %}BS5 Active Layout{% endtrans %}</strong> - {% trans %}Loads only when a Layout is rendered with use of any of instance of <q>BS5 Layouts</q> is rendered or edited.  Keep in mind editor may assume classes are widely active.{% endtrans %}</li>
</ul>

<h2>{% trans %}Manual Library Usage{% endtrans %}</h2>
<p>{% trans %}You can also manually include specific libraries in your Drupal theme or modules:{% endtrans %}</p>
<pre><code># In your .libraries.yml file
dependencies:
  - bootstrap_five_layouts_css_loader/toolkit
</code></pre>

<h2>{% trans %}Additional resources{% endtrans %}</h2>
<ul>
  <li><a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/">{% trans %}Bootstrap 5 Documentation{% endtrans %}</a></li>
</ul>