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

  1. Require the AssetMapper component with composer: composer require symfony/asset-mapper symfony/asset symfony/twig-pack

  2. 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
  1. 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>