composer require apility/laravel-bootstrap
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>
To customize the provided component's views, you must first publish them
php artisan vendor:publish --provider="Bootstrap\Providers\BootstrapServiceProvider" --tag="views"
<x-bs-alert variant="success" dismissible>
Hello!
</x-bs-alert>
Name | Type | Default | Description |
---|---|---|---|
variant | string | primary |
The color variant of the alert. |
dismissible | boolean | false |
Whether the alert is dismissible. |
fade | boolean | true |
Whether the alert should fade out. |
show | boolean | true |
Whether the alert should be visible. |
<x-bs-alert-heading>
Hello!
</x-bs-alert-heading>
<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.
Name | Type | Default | Description |
---|---|---|---|
variant | string | primary |
The color variant of the alert. |
type | string | null |
Sets the button type when used as a regular button, e.g. submit |
href | string | null |
Sets the href attribute, and makes the button into a link |
outline | boolean | false |
Whether the alert should appear outlined |
large | boolean | false |
Whether the alert should be large |
small | boolean | false |
Whether the alert should be small |
disabled | boolean | false |
Whether the alert is disabled |
<x-bs-card-header>
Card title!
</x-bs-card-header>
<x-bs-card-image src="https://via.placeholder.com/150x150" />
Name | Type | Default | Description |
---|---|---|---|
src | string | null |
The image source |
image | array | null |
An associative array, or object containing 'src', 'title' and 'alt' properties |
placement | string | 'top' |
The placement of the image, either 'top' or 'bottom' |
<x-bs-card-title>
Card title!
</x-bs-card-title>
<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>
Name | Type | Default | Description |
---|---|---|---|
header | string | null |
The header of the card |
title | string | null |
The title of the card |
image | string | null |
Either an image source url, or an associate array or object that can be used as an Image |
link | array | null |
An associative array, or object containing 'href' and 'title' properties |
<x-bs-nav :links="[['href' => '/', 'title' => 'Home'], ['href' => '/articles', 'Articles']]" />
Name | Type | Default | Description |
---|---|---|---|
links | array | [] |
An array or collection of links |
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.
Name | Type | Default | Description |
---|---|---|---|
url | string | # |
The link url |
title | string | '' |
The link title |
target | string | '_self' |
The link target |
active | boolean | false |
Whether the link is active |
disabled | boolean | false |
Whether the link is disabled |
children | array | [] |
The link children, same format as above |
<x-bs-navbar light variant="success" :links="[['href' => '/', 'title' => 'Home'], ['href' => '/articles', 'Articles']]" />
Name | Type | Default | Description |
---|---|---|---|
links | array | [] |
Links to render, see Nav |
variant | string | primary |
The background color variant of the navbar |
light | boolean | false |
Whether the navbar content is light |
dark | boolean | false |
Whether the navbar content is dark |
<x-bs-navbar-brand href="/">
Hello!
</x-bs-navbar-brand>
Name | Type | Default | Description |
---|---|---|---|
href | string | # |
The link of the brand |
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>
This component is used internally when rendering Nav components.
<x-bs-nav-link :link="['url' => '/', 'title' => 'Articles']">
Home
</x-bs-nav-link>
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" />
Name | Type | Default | Description |
---|---|---|---|
action | string | ? |
The action of the form |
method | string | GET |
The method of the form |
placeholder | string | Search... |
The placeholder of the search input |
label | string | Search |
The label of the search submit button |