Using Bootstrap in a Joomla 6 Template Without Loading All of It

What is registered

Alongside bootstrap.css, each JavaScript component is its own asset: bootstrap.alert, bootstrap.button, bootstrap.carousel, bootstrap.collapse, bootstrap.dropdown, bootstrap.modal, bootstrap.offcanvas, bootstrap.popover, bootstrap.scrollspy, bootstrap.tab, bootstrap.toast. There is also bootstrap.css.grid for the grid on its own.

So a template that needs a collapsible mobile menu and nothing else asks for exactly that:

$wa = $this->getWebAssetManager();
$wa->useStyle('bootstrap.css')
   ->useScript('bootstrap.collapse');

Or use none of it

Nothing obliges a template to load Bootstrap. Write your own CSS, and let extensions request what they need — the asset manager resolves each request independently.

The catch is that a third-party module may ask for a Bootstrap component and then look wrong without the stylesheet. Two options: load bootstrap.css and accept the weight, or override that module's layout so it stops asking. Our piece on unwanted assets covers finding out who is asking in the first place.

Do not load your own copy

The mistake worth naming: adding Bootstrap from a CDN or a local file while Joomla's copy is also on the page. Two copies of the CSS produce specificity fights, and two copies of the JavaScript mean two sets of event handlers on the same elements — dropdowns that open and immediately close, modals that need two clicks to dismiss.

If you need a newer Bootstrap than the one Joomla bundles, replace the registration rather than adding to it, so only one copy is ever on the page.

Markup expectations

Bootstrap's JavaScript components are driven by data attributes:

<button class="navbar-toggler" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#main-nav"
        aria-controls="main-nav"
        aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="main-nav">
    <jdoc:include type="modules" name="menu" style="none" />
</div>

Note the bs in the attribute names. Markup copied from Bootstrap 4 examples uses data-toggle and data-target, which silently do nothing here — the component never initialises and the button appears dead.

Where Bootstrap is no longer the answer

Several things Bootstrap was chosen for are now plain CSS. Layout is Grid and Flexbox. Spacing scales are custom properties. A modal is the <dialog> element, with focus trapping and Esc handled by the browser. Tooltips can be a popover attribute.

That does not make the framework useless — a consistent component set across a team of contributors is worth real money. But loading a whole framework for a grid and two utility classes has not been a good trade for a while.

Check what actually shipped

After wiring it up, load a page and look at the network panel rather than the source of your template. Extensions add their own requests, and the total is frequently larger than what you asked for.