Home

Awesome

Laravel Bootstrap Components

This package contains a set of useful Bootstrap Laravel Blade components. It promotes DRY principles and allows you to keep your HTML nice and clean. Components include alerts, badges, buttons, form inputs (with automatic error feedback), dropdowns, navs, pagination (responsive), and more. The components come with Laravel Livewire integration built in, so you can use them with or without Livewire.

Documentation

Requirements

Installation

Require the package via composer:

composer require bastinald/laravel-bootstrap-components

Components

Alert

A Bootstrap alert:

<x-bs::alert
    :label="__('It was successful!')"
    color="info"
    dismissible
/>

Available Props & Slots

Badge

A Bootstrap badge:

<x-bs::badge
    :label="__('Pending')"
    color="warning"
/>

Available Props & Slots

Button

A Bootstrap button:

<x-bs::button
    :label="__('Login')"
    color="primary"
    size="lg"
    route="login"
/>

Available Props & Slots

Check

A Bootstrap checkbox input:

<x-bs::check
    :label="__('Agree')"
    :checkLabel="__('I agree to the TOS')"
    :help="__('Please accept the TOS.')"
    switch
    model="agree"
/>

Available Props & Slots

Close

A Bootstrap close button:

<x-bs::close 
    dismiss="modal"
/>

Available Props & Slots

Color

A Bootstrap color picker input:

<x-bs::color
    :label="__('Favorite Color')"
    :prepend="__('I like')"
    :append="_('the most.')"
    :help="__('Please pick a color.')"
    model="favorite_color"
/>

Available Props & Slots

Datalist

A Bootstrap datalist input:

<x-bs::datalist
    :label="__('City Name')"
    :options="['Toronto', 'Montreal', 'Las Vegas']"
    :prepend="__('I live in')"
    :append="_('right now.')"
    :help="__('Please enter your city.')"
    model="city_name"
/>

Available Props & Slots

Desc

A description list:

<x-bs::desc 
    :term="__('ID')"
    :details="$user->id"
/>

Available Props & Slots

Dropdown

A Bootstrap dropdown:

<x-bs::dropdown
    :label="__('Filter')"
    color="danger"
>
    <x-bs::dropdown-item 
        :label="__('By Name')"
        click="$set('filter', 'name')"
    />
    <x-bs::dropdown-item
        :label="__('By Age')"
        click="$set('filter', 'age')"
    />
</x-bs::dropdown>

Available Props & Slots

Dropdown Item

A Bootstrap dropdown menu item:

<x-bs::dropdown-item
    :label="__('Login')"
    route="login"
/>

Available Props & Slots

Form

A Bootstrap form:

<x-bs::form submit="login">
    <x-bs::input :label="__('Email')" type="email" model="email"/>
    <x-bs::input :label="__('Password')" type="password" model="password"/>
    <x-bs::button :label="__('Login')" type="submit"/>
</x-bs::form>

Available Props & Slots

Icon

A Font Awesome icon:

<x-bs::icon
    name="cog"
/>

Available Props & Slots

Image

An image:

<x-bs::image
    asset="images/logo.png"
    height="24"
    rounded
/>

Available Props & Slots

Input

A Bootstrap text input:

<x-bs::input
    :label="__('Email Address')"
    type="email"
    :help="__('Please enter your email.')"
    model="email_address"
>
    <x-slot name="prepend">
        <i class="fa fa-envelope"></i>
    </x-slot>
</x-bs::input>

Available Props & Slots

Link

A hyperlink:

<x-bs::link
    :label="__('Users')"
    route="users"
/>

Available Props & Slots

Nav Dropdown

A Bootstrap nav dropdown:

<x-bs::nav-dropdown
    :label="Auth::user()->name"
>
    <x-bs::dropdown-item 
        :label="__('Update Profile')"
        click="$emit('showModal', 'profile.update')"
    />
    <x-bs::dropdown-item
        :label="__('Logout')"
        click="logout"
    />
</x-bs::nav-dropdown>

Available Props & Slots

Nav Link

A Bootstrap nav link:

<x-bs::nav-link
    :label="__('Users')"
    route="users"
/>

Available Props & Slots

Pagination

Responsive Bootstrap pagination links:

<x-bs::pagination
    :links="App\Models\User::paginate()"
    justify="center"
/>

Available Props & Slots

Progress

A Bootstrap progress bar:

<x-bs::progress
    :label="__('25% Complete')"
    percent="25"
    color="success"
    height="10"
    animated
    striped
/>

Available Props & Slots

Radio

A Bootstrap radio input:

<x-bs::radio
    :label="__('Gender')"
    :options="['Male', 'Female']"
    :help="__('Please select your gender.')"
    switch
    model="gender"
/>

Available Props & Slots

Select

A Bootstrap select input:

<x-bs::select
    :label="__('Your Country')"
    :placeholder="__('Select Country')"
    :options="['Australia', 'Canada', 'USA']"
    :prepend="__('I live in')"
    :append="_('right now.')"
    :help="__('Please select your country.')"
    model="your_country"
/>

Available Props & Slots

Textarea

A Bootstrap textarea input:

<x-bs::textarea
    :label="__('Biography')"
    rows="5"
    :help="__('Please tell us about yourself.')"
    model="biography"
/>

Available Props & Slots

Traits

WithModel

This trait makes form data model manipulation a breeze. No more having to create a Livewire component property for every single form input. All form data will be placed inside the $model property array.

Getting Model Data

Get the model data as a collection:

$collection = $this->model();

Setting Model Data

Set a single value:

$this->setModel('name', 'Kevin');

Set values using Eloquent model data:

$this->setModel(User::first());

Set values using an array:

$this->setModel([
    'name' => 'Kevin',
    'email' => 'kevin@example.com',
]);

Working With Arrays

Add an empty array item:

$this->addModelItem('locations');

Remove an array item by its key:

$this->removeModelItem('locations', 3);

Order an array item by its key & direction:

$this->orderModelItem('locations', 3, 'up');

The direction should be up or down.

Binding Model Data

Package components work with this trait via the model attribute:

<x-bs::input :label="__('Name')" model="name"/>
<x-bs::input :label="__('Email')" type="email" model="email"/>

Validating Model Data

Use the validateModel method to validate model data:

$this->validateModel([
    'name' => ['required'],
    'email' => ['required', 'email'],
]);

This method works just like the Livewire validate method, so you can specify your rules in a separate rules method if you prefer.

Publishing Assets

Custom Views

Use your own component views by publishing the package views:

php artisan vendor:publish --tag=laravel-bootstrap-components:views

Now edit the files inside resources/views/vendor/bs. The package will use these files to render the components.

Custom Icons

Use your own font icons by publishing the package config:

php artisan vendor:publish --tag=laravel-bootstrap-components:config

Now edit the icon_class_prefix value inside config/laravel-bootstrap-components.php. The package will use this class to render the icons.