There are lots of Laravel packages pretending to wrap the widely popular Bootstrap CSS design system. Most of them are limited just to forms formatting (while Bootstrap provides so many different tools), and all of them have an elaborated syntax, so the code required to format your component is no so less verbose (nor more readable) then the actual resulting HTML.

Larastrap provides a conspicuous amount of (configurable) defaults and many out-of-the-box common behaviours. And, leveraging the Laravel's native Blade Components system, provides a few handy automatisms and the ability to define your own reusable Custom Elements.

To reduce to the bare minimum the code you have to actually write (and read, and maintain...) to obtain your desidered layout.

Get Rid of Boilerplate

We all love Bootstrap (booo, Tailwind, booo!), but we all know it also requires a lot of boilerplate code.

Repeated again and again across all the templates.

Here comes Larastrap, which already contains all the boilerplate parts and gives to you just the fun!

@php
$obj = App\Models\User::inRandomOrder()->first();
@endphp

<x-larastrap::form :obj="$obj" disabled>
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::text name="surname" label="Surname" value="Bar" />
    <x-larastrap::email name="email" label="EMail" help="Must be a valid email address" />
</x-larastrap::form>

<form id="form-c74d97b01eae257e44aa9d5bade97baf" class="" method="post" disabled="1" name="form-c74d97b01eae257e44aa9d5bade97baf">
  <input type="hidden" name="_token" value="FITjhUyNi9j1HfYqFTGD5iQtLjZTflyJN5hi3H4U">
  <div class="row mb-3" disabled="1">
    <label for="input-4e892842f6ad35ae6b34f2a49fc9abcb" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-4e892842f6ad35ae6b34f2a49fc9abcb" type="text" class="form-control" name="name" value="Amaya Beer" disabled="1">
    </div>
  </div>
  <div class="row mb-3" disabled="1">
    <label for="input-7230d36f22b7a1eab2358d91e16792f8" class="col-4 col-form-label">Surname</label>
    <div class="col-8">
      <input id="input-7230d36f22b7a1eab2358d91e16792f8" type="text" class="form-control" name="surname" value="Bar" disabled="1">
    </div>
  </div>
  <div class="row mb-3" disabled="1">
    <label for="input-05cb1df46043d24adbea518fa12b49fa" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-05cb1df46043d24adbea518fa12b49fa" type="email" class="form-control" name="email" value="vwisozk@example.com" disabled="1">
      <div class="form-text">
        Must be a valid email address
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-868dfde626c989dba02ba4bdf4c06f90" class="btn btn-primary" disabled="1" type="submit">Save</button>
  </div>
</form>

Global Configuration

Each component has many parameters that can be set in the global configuration file. Change once any value to an immediate impact on layout, behavior, colors and strings across your application!

[
    // Default settings...
]

[
    'form' => [
        'formview' => 'vertical',
        'buttons_align' => 'start',
    ]
]

[
    'form' => [
        'formview' => 'vertical',
        'buttons_align' => 'start',
        'buttons' => [
            [
                'color' => 'danger',
                'label' => 'Save',
                'attributes' => ['type' => 'submit']
            ]
        ]
    ],

    'field' => [
        'label_class' => 'text-danger',
    ]
]

[
    'form' => [
        'formview' => 'vertical',
        'buttons_align' => 'start',
        'buttons' => [
            [
                'color' => 'danger',
                'label' => 'Submit',
                'classes' => ['mt-5', 'btn-lg'],
                'attributes' => ['type' => 'submit']
            ]
        ]
    ],

    'field' => [
        'label_class' => 'text-danger display-5',
    ],

    'text' => [
        'classes' => ['form-control-lg'],
    ],

    'email' => [
        'classes' => ['form-control-lg'],
    ]
]

Implement Once

Did you noticed the "copy to clipboard" element on top of this page? It is a Custom Element!

With a few lines of code in the global configuration you can define custom, reusable components to be used in your templates with just a single Blade tag, and to be maintained in a single place with no effort.

[
    'customs' => [
        'command' => [
            'extends' => 'text',
            'params' => [
                'classes' => ['command'],
                'attributes' => ['readonly' => 'readonly'],
                'textappend' => '<i class="bi bi-clipboard"></i>',
                'squeeze' => true
            ]
        ]
    ]
]

<x-larastrap::command value="Copy this to the clipboard" />

<div class="input-group">
  <input id="input-9fcc60b47e79eef4f79ac676a6c695aa" type="text" class="command form-control" name="Dkwv3HkCeX" value="Copy this to the clipboard" readonly="readonly">
</div>

Larastrap

Opinionated Bootstrap 5 components for Laravel

Larastrap