Getting Started

Minimal Setup

Installation: Add the package and its dependencies via Composer:
```
composer require alazjj/jquery alazjj/jquery/form alazjj/bootstrap/twitter alazjj/bootstrap/datepicker alazjj/bootstrap/colorpicker alazjj/simple-bootstrap-bundle
```
Ensure post-install-cmd and post-update-cmd scripts are added to your composer.json as shown in the README.

Register Bundle: Add the bundle to app/AppKernel.php:

new Alazjj\SimpleBootstrapBundle\AlazjjSimpleBootstrapBundle(),

Configure Assetic: Import the bundle's Assetic configuration in app/config/config.yml:

imports:
    - { resource: @AlazjjSimpleBootstrapBundle/Resources/config/assetic.yml }

Twig Configuration: Extend the bundle's Twig form resources in app/config/config.yml:

twig:
    form:
        resources:
            - 'AlazjjSimpleBootstrapBundle:Form:fields.html.twig'

First Use Case: Extend the base template in app/Resources/views/layout.html.twig:

{% extends "AlazjjSimpleBootstrapBundle::base.html.twig" %}
{% block body %}{% endblock %}

Implementation Patterns

Asset Management

Automatic Asset Installation: The bundle handles asset installation via Composer scripts. No manual asset copying is required after installation.
- Assets (Bootstrap CSS/JS, jQuery, plugins) are downloaded and placed in web/bundles/alazjj/simplebootstrap/.
Customizing Assets: Override default assets by copying files from vendor/alazjj/simple-bootstrap-bundle/Resources/public to web/bundles/alazjj/simplebootstrap/. Changes in web/ take precedence.

Form Integration

Bootstrap Forms: The bundle provides Twig templates for Bootstrap-styled forms. Use standard Symfony form types, and the bundle renders them with Bootstrap classes (e.g., form-control, btn).
```
{{ form_start(form) }}
    {{ form_widget(form.field) }}
    {{ form_errors(form.field) }}
{{ form_end(form) }}
```

Field-Specific Customization: Override individual field templates in app/Resources/AlazjjSimpleBootstrapBundle/Form/ (e.g., text_type.html.twig). Extend the base template:

{% extends 'AlazjjSimpleBootstrapBundle:Form:fields.html.twig' %}
{% block widget %}
    <input type="text" {{ block('widget_attributes') }} class="form-control custom-class">
{% endblock %}

Layout and Base Template

Extending base.html.twig: The bundle provides a base template (base.html.twig) with Bootstrap’s HTML structure (navbar, container, etc.). Extend it in your layout:

{% extends "AlazjjSimpleBootstrapBundle::base.html.twig" %}
{% block title %}My App{% endblock %}
{% block stylesheets %}{{ parent() }} <link rel="stylesheet" href="/custom.css">{% endblock %}

Dynamic Content Blocks: Use Twig blocks to inject content:

{% block body %}
    <div class="container">
        {% block content %}{% endblock %}
    </div>
{% endblock %}

JavaScript Integration

Initializing Plugins: The bundle includes Bootstrap plugins (datepicker, colorpicker). Initialize them via JavaScript:
```
$(document).ready(function() {
    $('.datepicker').datepicker();
    $('.colorpicker').colorpicker();
});
```
Ensure jQuery and plugins are loaded (handled automatically by Assetic).

Custom JS: Add custom scripts in app/Resources/views/layout.html.twig:

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('bundles/alazjj/simplebootstrap/js/custom.js') }}"></script>
{% endblock %}

Gotchas and Tips

Pitfalls

Outdated Dependencies: The bundle uses old versions of Bootstrap (2.3.1) and jQuery (1.9.1). Ensure compatibility with your project’s other dependencies. Consider overriding assets if conflicts arise.

Assetic Configuration: If Assetic is misconfigured, assets may fail to load. Verify assetic.yml includes:

assets:
    javascripts:
        - "%kernel.root_dir%/../vendor/alazjj/simple-bootstrap-bundle/Resources/public/js/*.js"

Twig Form Overrides: Overriding form templates requires the correct namespace (AlazjjSimpleBootstrapBundle:Form:). Double-check paths in config.yml.

Composer Script Failures: If post-install-cmd fails, manually run:

php bin/console assetic:dump --env=prod

Or trigger the Composer script directly:

php -r "require 'vendor/alazjj/simple-bootstrap-bundle/Composer/ScriptHandler.php'; Alazjj\SimpleBootstrapBundle\Composer\ScriptHandler::installAssets();"

Debugging

Missing Assets: Check if files exist in web/bundles/alazjj/simplebootstrap/. If not, reinstall dependencies or manually download assets from the URLs in composer.json.

CSS/JS Not Loading: Clear cache and dump assets:

php bin/console cache:clear
php bin/console assetic:dump --env=prod

Form Rendering Issues: Verify Twig form resources are correctly imported in config.yml. Test with a minimal form to isolate issues.

Tips

Version Locking: Pin versions in composer.json to avoid unexpected updates:
```
"alazjj/simple-bootstrap-bundle": "0.1.1"
```
Custom Themes: Use Bootstrap’s LESS/Sass (if available) to create custom themes. Override the bootstrap.css file in web/bundles/alazjj/simplebootstrap/css/.
Plugin Extensions: Extend Bootstrap plugins by including custom JS/CSS. For example, add a custom datepicker format:
```
$('.datepicker').datepicker({ format: 'mm/dd/yyyy' });
```

Performance: Disable unused plugins (e.g., colorpicker) in Assetic to reduce payload:

# app/config/config.yml
assetic:
    filters:
        js_rev:
            javascripts:
                - '!**/colorpicker.js'  # Exclude if unused

Fallback for Modern Bootstrap: If using Bootstrap 3/4/5, replace the bundle’s assets with your own CDN links or local copies, and override Twig templates to match the newer Bootstrap classes (e.g., form-control → form-control remains the same, but btn classes change).

Simple Bootstrap Bundle Laravel Package