Blade UI kit Bootstrap

This package provides several Blade components prepared for use with Bootstrap (4 and/or 5).

Well yes: not everyone uses Tailwind CSS 😊 ; and old projects continue to live and evolve with Bootstrap.

Features

• Many pre-built components ready to use with Bootstrap 4 and 5
• Fully documented components - PHPDoc descriptions and allowed-value type hints (@var/@param) on every component property, for PHP-level IDE IntelliSense and readable source
• Automatic validation error handling with Bootstrap's is-invalid class
• Old value persistence for form inputs after validation
• Dual Bootstrap support - Switch between Bootstrap 4 and 5 with a single configuration
• Extensible - Easy to create custom components extending the defaults
• Interactive test pages - Browse all components with live examples and code snippets
• Translation support - Works seamlessly with Laravel's localization
• Action buttons - Pre-configured buttons for common CRUD operations
• IDE autocompletion - Generate VS Code snippets / Custom Data and PhpStorm metadata for completion inside <x-...> tags (php artisan blade-ui-kit-bs:ide)

Example

For example a simple form with Bootstrap 5:

<x-form action="http://example.com">
    <div class="mb-3">
        <x-label for="title" />
        <x-input name="title" />
        <x-error field="title" />
    </div>
    <x-btn-save />
</x-form>

Will render the following HTML:

<form method="POST" action="http://example.com" novalidate>
    <input type="hidden" name="_token" value="...">
    <input type="hidden" name="_method" value="POST">
    <div class="mb-3">
        <label for="title" class="form-label">
            Title
        </label>
        <input name="title" type="text" id="title" class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary">
        Save
    </button>
</form>

And if there are validation errors:

<!-- ... -->
    <label for="title" class="form-label">
        Title
    </label>
    <input name="title" type="text" id="title" class="form-control is-invalid"
        aria-describedby="validation-title-feedback" />
    <div id="validation-title-feedback" class="invalid-feedback">
        The title field is mandatory.
    </div>
<!-- ... -->

Index

• Installation
• Configuration
• Bootstrap version
• Forms
  • Form
  • Label
  • Error
• Inputs
  • The <input> element
  • Text
  • Textarea
  • Select
  • Checkbox
  • Radio
  • Password
  • Email
  • Date
  • Time
  • Hidden
• Buttons
  • Simple button
  • Form button
  • Link button
  • Action Buttons
  • Help info button
• Alerts
• Badges
• Modals
  • Classic modal
  • Form modal
  • Confirm modal
• Extending Components
• Testing Pages
• IDE Autocompletion

Why and thanks

This package was initially an extension of Blade UI Kit to provide pre-styled components for Bootstrap. But by making it evolve we decided to decouple it from its parent. This simplifies the code as well as its use in our case.

This package is therefore largely inspired by Blade UI Kit. A large part of the documentation comes from it. And we sincerely thank its contributors for the idea and what they have developed.

Alternatives

• Laravel bootstrap components