Components

Alert

@component('bootstrap::alert', ['type' => 'danger'])
    This is the alert message
@endcomponent

Arguments:

• type => primary / success / info / warning / danger (required)
• class
• dismissible => true / false
• animate => true / false

Slots:

• Message (default slot)

Badge

@component('bootstrap::badge', ['type' => 'danger', 'pill' => true])
    This is the badge text
@endcomponent

Breadcrumb

@component('bootstrap::breadcrumb')
    // Breadcrumbs
@endcomponent

Button group

@component('bootstrap::button-group')
  <button type="button" class="btn btn-secondary">First button</button>
  <button type="button" class="btn btn-secondary">Second button</button>
@endcomponent

Arguments:

• class

Slots:

• content (default slot)

Cards

@component('bootstrap::card')
    @slot('header', 'Heading text')
    @slot('footer', 'Footer text')
    
    <img class="card-img-top" src="/image.jpg" alt="Image">
    <div class="card-block">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">This is the card text</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
@endcomponent

Carousel

@component('bootstrap::carousel')
   // Carousel
@endcomponent

Forms

@component('bootstrap::form', ['fields' => 
     [
         'name' => ['type' => 'text', 'name' => 'name', 'label' => 'Name', 'placeholder' => 'your name'],
         'email' => [
               'type' => 'email', 
               'name' => 'email', 
               'label' => 'Email', 
               'placeholder' => 'your email', 
               'small' => 'We will never share your email with anyone else.'],
     ]])
@endcomponent

Input group

@component('bootstrap::input-group', ['size' => 'md', 'side' => 'right'])
    @slot('addon')
        @
    @endslot

    @slot('placeholder')
        username
    @endslot
@endcomponent

Arguments:

• size => sm / md / lg (required)
• side => left / right (required)
• class

Slots:

• addon
• placeholder

Jumbotron

@component('bootstrap::jumbotron')
    @slot('heading')
        Jumbotron
    @endslot

    Hello world!
@endcomponent

Arguments:

• class
• fullwidth => true / false

Slots:

• heading
• content (default slot)

List group

@component('bootstrap::list-group', ['items' => ['foo', 'bar', 'baz']])
    <li class="list-group-item">Some more <strong>complex</strong> html items</li>
@endcomponent

Arguments:

• class
• items

Slots:

• extra items (default slot)

Pagination

@component('bootstrap::pagination', ['pagination' => ['1' => '?page=1', '2' => '?page=2']]) 
    // Slot
@endcomponent

Arguments:

• class
• pagination

Progressbar

@component('bootstrap::progress', ['value' => 75]) 
    // Extra bars
@endcomponent

Arguments:

• class
• value
• min (default: 0)
• max (default: 100)

Slots:

• extra bars (default slot)

Modal

@component('bootstrap::modal')
    @slot('title')
        This is the title
    @endslot

    This is the content of the modal

    @slot('footer')
        This is the footer
    @endslot
@endcomponent

Arguments:

• animation (default: fade)
• class
• id

Slots:

• title
• footer

Figure

@component('bootstrap::figure')
    <img src="/image.png">

    @slot('caption')
        This is the caption.
    @endslot
@endcomponent

Arguments:

• class

Slots:

• caption

Table

@component('bootstrap::table')
    <tbody>
        <tr>
            <td>Content<td>
        </tr>
    <tbody>
@endcomponent

Arguments:

• class

Slots:

• table (default slot)