It’s been over a year now that Symfony offers a new way of asset handling, the AssetMapper Component. This is a short guide on how to enable Bootstrap (styling, js and icons) when using it.
Installation & Setup
-
Require the AssetMapper component with composer:
composer require symfony/asset-mapper symfony/asset symfony/twig-pack
-
Use the command provided by the AssetMapper to require Bootstrap’s assets:
php bin/console importmap:require bootstrap
php bin/console importmap:require bootstrap/dist/js/bootstrap.min.js
php bin/console importmap:require bootstrap-icons/font/bootstrap-icons.min.css
- Import the assets in your app.js:
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap-icons/font/bootstrap-icons.min.css'
Usage
Use Bootstrap as you are used to do, for example with a collapsable card:
<p class="mt-2 d-inline-flex gap-1">
<button
class="btn btn-outline-primary"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample">
Toggle Target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<div class="mb-2">
<i class="bi bi-info-circle-fill text-warning"></i>
<span class="bg-warning-subtle">Example warning</span>
</div>
Placeholder Content
</div>
</div>