Getting Started

Minimal Setup

Installation Add the bundle to your project via Composer (though note the deprecation warning):

composer require becklyn/bootstrap-bundle

return [
    // ...
    Becklyn\BootstrapBundle\BecklynBootstrapBundle::class => ['all' => true],
];

Enable Bootstrap Assets Ensure assets are published (Symfony 4+):

php bin/console assets:install

Include the bundle’s CSS/JS in your base template (templates/base.html.twig):

{{ encore_entry_link_tags('app') }}  {# If using Encore #}
{# OR #}
{{ asset('bundles/becklynbundle/bootstrap/css/bootstrap.min.css') }}
{{ asset('bundles/becklynbundle/bootstrap/js/bootstrap.min.js') }}

First Use Case: Flash Messages Trigger a flash message in a controller:

$this->addFlash('success', 'Operation completed!');

Display it in Twig:

{% for message in app.flashes('success') %}
    <div class="alert alert-success">{{ message }}</div>
{% endfor %}

Implementation Patterns

1. Form Theming

Override Default Form Rendering Extend the bundle’s form theme in config/packages/twig.yaml:

twig:
    form_themes: ['@BecklynBootstrapBundle/Form/fields.html.twig']

Customize fields in templates/forms/fields.html.twig (e.g., add Bootstrap classes):

{% block form_row %}
    <div class="form-group">
        {{ form_label(form) }}
        {{ form_widget(form) }}
        {{ form_errors(form) }}
    </div>
{% endblock %}

Dynamic Class Assignment Use Twig filters to conditionally apply Bootstrap classes:

<input type="text" class="form-control{{ form.is_required ? ' required' : '' }}">

2. Asset Management

Symfony AssetMapper (Symfony 5.3+) Map Bootstrap assets in config/packages/framework.yaml:

framework:
    assets:
        packages:
            bootstrap:
                version: '3.3.6'
                meta:
                    twig:
                        path: '@BecklynBootstrapBundle/Resources/public'

Reference in Twig:

{{ asset('package/bootstrap/css/bootstrap.min.css') }}

Webpack Encore Integration Override bundle assets in webpack.config.js:

Encore
    .addEntry('bootstrap', './vendor/becklyn/bootstrap-bundle/Resources/public/js/bootstrap.min.js')
    .copyFiles({
        from: './vendor/becklyn/bootstrap-bundle/Resources/public/css',
        to: 'css/[name].[ext]',
    });

3. Flash Message Customization

Multi-Type Flashes Extend the bundle’s flash template (templates/BecklynBootstrapBundle/Flashes/flashes.html.twig):

{% for type, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ type }}">{{ message }}</div>
    {% endfor %}
{% endfor %}

Auto-Dismissing Alerts Add JavaScript to flashes template:

<div class="alert alert-{{ type }}" data-dismiss="alert">{{ message }}</div>

Gotchas and Tips

Deprecation Pitfalls

Avoid New Projects The bundle is deprecated; prefer:
- Direct CDN inclusion:
```
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
```
- Frontend bundlers (Vite, Webpack) for tree-shaking.
Migration Path If using this bundle, plan to:
1. Extract Bootstrap assets to public/ or web/ folder.
2. Replace Twig form themes with custom templates.
3. Replace flash rendering logic with a lightweight component.

Debugging

Missing Assets Ensure assets:install is run and public/bundles/ permissions are correct (Symfony 4+ uses public/ by default).
Form Theme Overrides Clear cache after modifying form_themes:
```
php bin/console cache:clear
```

Extension Points

Custom Bootstrap Version Override the bundle’s Resources/public folder in your project to use a different version.
Twig Extensions The bundle provides BecklynBootstrapBundle:Flashes:flashes; extend it via Twig’s {% block %} system.

Performance Tips

Critical CSS Inline Bootstrap’s CSS for above-the-fold content to reduce render-blocking.

Lazy-Load JS Defer Bootstrap JS if not needed immediately:

<script src="{{ asset('bundles/becklynbundle/bootstrap/js/bootstrap.min.js') }}" defer></script>

Bootstrap Bundle Laravel Package