Bootstrap3 Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require c33s-toolkit/bootstrap3-bundle
   

   Add to config/bundles.php:

   return [
       // ...
       C33s\Bootstrap3Bundle\C33sBootstrap3Bundle::class => ['all' => true],
   ];
   

2. Basic Usage Include the bundle’s assets in your base template (templates/base.html.twig):

   {% block stylesheets %}
       {{ parent() }}
       {{ c33s_bootstrap3_stylesheets() }}
   {% endblock %}
   
   {% block javascripts %}
       {{ parent() }}
       {{ c33s_bootstrap3_javascripts() }}
   {% endblock %}
   

3. First Layout Component Use the provided Twig extensions for common Bootstrap 3 components:

   <div class="container">
       {{ c33s_bootstrap3_alert('success', 'Operation completed!') }}
       {{ c33s_bootstrap3_navbar() }}
   </div>
   

Implementation Patterns

Common Workflows

1. Responsive Layouts Use the c33s_bootstrap3_grid() helper to define responsive rows/columns:

   {{ c33s_bootstrap3_grid(12, [
       { 'cols': 4, 'content': 'Sidebar' },
       { 'cols': 8, 'content': 'Main Content' }
   ]) }}
   

2. Dynamic Components Pass variables to customize components:

   {{ c33s_bootstrap3_modal('confirm', {
       'title': 'Delete Item',
       'body': 'Are you sure?',
       'footer': c33s_bootstrap3_modal_footer([
           { 'label': 'Cancel', 'type': 'button' },
           { 'label': 'Delete', 'type': 'submit', 'class': 'btn-danger' }
       ])
   }) }}
   

3. Integration with Symfony Forms Extend form themes to use Bootstrap 3 classes:

   {% form_theme form 'C33sBootstrap3Bundle:Form:fields.html.twig' %}
   

4. Asset Management Override default assets by copying files from:

   vendor/c33s-toolkit/bootstrap3-bundle/Resources/public/
   

   to your project’s web/ directory.

Integration Tips

• Symfony 3 Compatibility: Works seamlessly with Symfony’s asset pipeline (%kernel.debug% mode).
• Twig Extensions: All helpers are available globally via c33s_bootstrap3_*.
• Customization: Override Twig templates in templates/C33sBootstrap3Bundle/ to modify default markup.
• JavaScript Dependencies: Ensure jQuery is loaded before Bootstrap JS (handled automatically by the bundle).

Gotchas and Tips

Pitfalls

1. Asset Loading Order

   • Issue: Bootstrap JS may fail if jQuery is not loaded first.
   • Fix: Ensure {{ c33s_bootstrap3_javascripts() }} is placed after jQuery in javascripts block.

2. Twig Cache

   • Issue: Twig extensions may not update if cache is not cleared.
   • Fix: Run php bin/console cache:clear after modifying templates or extensions.

3. CSS Conflicts

   • Issue: Custom CSS may override Bootstrap styles.
   • Fix: Use !important sparingly; target specific classes instead (e.g., .my-class.btn).

4. Symfony 4+ Upgrade

   • Issue: Bundle is designed for Symfony 3 and may require adjustments for newer versions.
   • Tip: Check for forks or alternatives like symfony/webpack-encore for modern setups.

Debugging

• Inspect Generated HTML: Use browser dev tools to verify classes/structure.
• Check Twig Errors: Enable debug mode (APP_DEBUG=true) for detailed Twig errors.
• Log Asset Paths: Add {{ dump(c33s_bootstrap3_asset('css/bootstrap.min.css')) }} to verify asset paths.

Extension Points

1. Custom Components Extend the bundle by creating new Twig extensions in your project:

   // src/Twig/Extension/CustomBootstrapExtension.php
   class CustomBootstrapExtension extends \Twig_Extension
   {
       public function getFunctions()
       {
           return [
               new \Twig_SimpleFunction('c33s_custom_component', [$this, 'renderCustomComponent']),
           ];
       }
   }
   

2. Override Templates Copy and modify:

   vendor/c33s-toolkit/bootstrap3-bundle/Resources/views/
   

   to templates/C33sBootstrap3Bundle/.

3. Configuration Override default settings via config/packages/c33s_bootstrap3.yaml:

   c33s_bootstrap3:
       theme: 'flatly'  # Override default theme
       responsive: true
   

Performance Tips

• Asset Versioning: Enable Symfony’s asset versioning for cache busting:

  # config/packages/framework.yaml
  assets:
      version: '%kernel.environment%'
  

• Minification: Use Webpack Encore or Symfony’s asset mapper for production builds.