forxer / blade-ui-kit-bootstrap

Blade UI Kit components with Bootstrap styles.

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

blade-ui-kit-bootstrap's Issues

Continue on the same path or change it with Blade UI Kit

I'm worried, I may have been wrong about the future of the basic package: Blade UI Kit.

I was sure this was the way to go because "powered" by a member of the Laravel team. But while digging I realize that there is a form of uncertainty about the future of this basic package.

The original author launched a call for co-contributors in November 2021. The decision was made to add two trustworthy and proven people. And the request has been closed.

What worries me is that it doesn't seem to have changed things, the project is stagnating on the same date. I'm not criticizing anyone, it's open source, I see.

But suddenly I wonder if this package should not emancipate from its parent.

There are a few components that I don't find relevant in the Blade UI Kit or that will never cover the majority of use cases.

There are other packages that already exist but which, in my view, go too far in abstraction.

For me a component should be a way to write less code to do more.

My growing idea as I write these words is that this package will separate from its illustrious parent.

By getting rid of Blade UI Kit, this would simplify things on several issues that are currently being circumvented. I am thinking, for example, of the management of "online errors".

Checkbox : how to ?

I am embarrassed for this form field because to apply Bootstrap styles there are 3 elements with dedicated classes:

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
         Default checkbox
    </label>
</div>

So I can't just extend the Blade UI Kit Checkbox component.

I think I'm going to have to create components specific to this package. But we are going to lose granularity.

Alerts

This component should be fairly simple to implement.

Implement Blade directives

As on Blade UI Kit this package will need its own blade directives for styles and scripts.

Modal component

Develop a "Modal" component.

Something stylish:

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-example">
    Open modal
  </button>

  <x-modal id="modal-example" title="Modal title">
    {{ $slot }}
    <x-slot name="footer">
      <button type="button" class="btn btn-primary">Save</button>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Dismiss</button>
    </x-slot>
  </x-modal>

Remove :errors="$errors" attribute

We need to find a way not to have to add the :errors="$errors" attribute but to manage it internally in the component classes.

Decouple from Blade UI Kit

Following #8 the decision is made that this package "break away" from Blade UI Kit in order to follow our own path.

Besides the changes in the code which are not huge. On the other hand, this implies reviewing ALL the documentation... :/

Error when using x-hidden: Laravel returns "View [bootstrap-4.components.forms.inputs.hidden] not found"

Description:
I encountered an error while using the x-hidden input.
Laravel is returning the following error message: "View [bootstrap-4.components.forms.inputs.hidden] not found".
It seems that Laravel is unable to locate the specified view.

Steps to reproduce:

Add the x-hidden element.
Observe the error message displayed.

Error message :
View [bootstrap-4.components.forms.inputs.hidden] not found.

Additional information:

Laravel version: 10.13.5
Relevant code snippets or configurations:

Please let me know if there is any further information needed.