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.

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
• Buttons
  • Simple button
  • Form button
  • Link button
  • Action Buttons
  • Help info button
• Forms
  • Form
  • Label
  • Error
• Inputs
  • The <input> element
  • Text
  • Textarea
  • Select
  • Password
  • Email
  • Date
  • Time
  • Hidden
• Modals
  • Classic modal
  • Form modal
  • Confirm modal

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