README

Table of Contents

• Installation
• Configuration
• Customization
• Components
  • Alert
  • AlertHeading
  • Button
  • Card
  • CardHeader
  • CardImage
  • CardTitle
  • Nav
  • Navbar
  • NavbarBrand
  • NavDropdown
  • NavLink
  • Search

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"  />

Attributes