apility / laravel-bootstrap
Bootstrap components for Laravel Blade
Requires
- php: ^7.0|^8.0
- illuminate/support: ^7.0|^8.0|^9.0
- illuminate/view: ^7.0|^8.0|^9.0
README
Table of Contents
Installation
composer require apility/laravel-bootstrap
Configuration
To override the default configuration, you must first publish it
php artisan vendor:publish --provider="Bootstrap\Providers\BootstrapServiceProvider" --tag="config"
This will add a bootstrap.php
file to your config
directory.
The only supported option you can configure currently, is the 'prefix' property. This changes the names of the components.
The default prefix is bs
, if you change it to e.g. bootstrap
you will have to use the provided components like this:
<x-bootstrap-alert>...</x-bootstrap-alert>
Customization
To customize the provided component's views, you must first publish them
php artisan vendor:publish --provider="Bootstrap\Providers\BootstrapServiceProvider" --tag="views"
Components
Alert
<x-bs-alert variant="success" dismissible> Hello! </x-bs-alert>
Attributes
AlertHeading
<x-bs-alert-heading> Hello! </x-bs-alert-heading>
Button
<x-bs-button variant="primary" large href="#test"> Hello! </x-bs-button>
If the href
attribute is set, the button will be rendered as an <a>
element.
Attributes
Card Header
<x-bs-card-header> Card title! </x-bs-card-header>
Card Image
<x-bs-card-image src="https://via.placeholder.com/150x150" />
Attributes
Card title
<x-bs-card-title> Card title! </x-bs-card-title>
Card
<x-bs-card header="Header" title="Title" image="https://via.placeholder.com/150" :link="['href' => 'https://example.com', 'title' => 'Read more']" > Card body text </x-bs-card>
Attributes
Nav
<x-bs-nav :links="[['href' => '/', 'title' => 'Home'], ['href' => '/articles', 'Articles']]" />
Attributes
The links can be passed either as a collection or a regular array.
The items can be either Bootstrap\Models\Link
instances, associative arrays, or standard objects. They will internally be transformed to Bootstrap\Models\Link
instances.
Navbar
<x-bs-navbar light variant="success" :links="[['href' => '/', 'title' => 'Home'], ['href' => '/articles', 'Articles']]" />
Attributes
NavbarBrand
<x-bs-navbar-brand href="/"> Hello! </x-bs-navbar-brand>
Attributes
NavDropdown
This component is used internally when rendering Nav components, it extends the NavLink component.
<x-bs-nav-dropdown :link="['url' => '/', 'title' => 'Articles', 'children' => [['url' => '/a', 'title' => 'A']]]"> Home </x-bs-nav-dropdown>
NavLink
This component is used internally when rendering Nav components.
<x-bs-nav-link :link="['url' => '/', 'title' => 'Articles']"> Home </x-bs-nav-link>
Search
Renders a search form for use in the Navbar. It will submit the query string as query
to the given url using the given method.
<x-bs-search action="/submit" method="POST" placeholder="Search..." label="Search" />