Bootstrap Almanach Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation Add the package via Composer:

   composer require appventus/bootstrap-almanach-bundle
   

   Register the bundle in config/bundles.php (Symfony 4+):

   AppVentus\BootstrapAlmanachBundle\BootstrapAlmanachBundle::class => ['all' => true],
   

2. First Use Case Locate the Twig templates in vendor/appventus/bootstrap-almanach-bundle/resources/views/. Extend a base template (e.g., base.html.twig) to include Bootstrap components:

   {% extends 'bootstrap-almanach::base.html.twig' %}
   

   Use a component (e.g., a button) in your template:

   {% include 'bootstrap-almanach::button.html.twig' with {'label': 'Click Me'} %}
   

3. Key Directories

   • resources/views/ – Pre-built Twig components.
   • Resources/public/ – Static assets (CSS/JS, if included).

Implementation Patterns

Workflow Integration

1. Component Reusability

   • Extend base.html.twig to inherit Bootstrap’s global styles (e.g., grid, utilities).
   • Override or extend individual components (e.g., alert.html.twig) in your project’s templates/bootstrap-almanach/ directory.

2. Dynamic Component Usage Pass variables to components for flexibility:

   {% include 'bootstrap-almanach::card.html.twig' with {
       'title': 'User Profile',
       'body': 'Content here',
       'classes': 'mb-4'
   } %}
   

3. Asset Management

   • Load Bootstrap’s CSS/JS via Twig’s asset() or url() functions if the bundle doesn’t auto-register them.
   • Override default assets by copying files from vendor/ to public/.

4. Symfony Form Integration Use the bundle’s form themes (if provided) to style Symfony forms with Bootstrap classes:

   {% form_theme form 'bootstrap-almanach::form_theme.html.twig' %}
   

5. Layout Patterns

   • Use bootstrap-almanach::container.html.twig for responsive layouts.
   • Nest components (e.g., place a row.html.twig inside a container.html.twig).

Gotchas and Tips

Pitfalls

1. Archived Status

   • The package is archived (no active maintenance). Verify compatibility with your Bootstrap/Twig version (e.g., Bootstrap 4/5).
   • Check for forks or alternatives (e.g., Symfony Webpack Encore + custom Twig components).

2. Missing Documentation

   • No official docs exist. Reverse-engineer usage from resources/views/ or tests/ directories.
   • Example: Look for {{ block('...') }} in templates to identify extendable blocks.

3. Asset Conflicts

   • The bundle may not auto-enqueue Bootstrap’s JS/CSS. Manually include them in base.html.twig:

     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     

4. Twig Namespace Quirks

   • Use the full namespace (bootstrap-almanach::) to avoid conflicts with custom templates named similarly.

Debugging Tips

1. Template Overrides

   • Place custom templates in templates/bootstrap-almanach/ to override defaults. Twig will prioritize these.

2. Variable Dumping Debug component inputs with:

   {% dump component_vars %}
   

3. Bootstrap Version Mismatch

   • If styles break, ensure the bundle’s Bootstrap version matches your project’s (check composer.json of the bundle).

Extension Points

1. Custom Components

   • Create new Twig templates in templates/bootstrap-almanach/ and include them like built-in components.

2. Configuration

   • No config file exists. Use Twig’s {% set %} or Symfony’s twig.config to customize globally:

     {% set bootstrap_version = '5.3.0' %}
     

3. JavaScript Integration

   • Extend functionality by including custom JS in base.html.twig or via Webpack Encore.