PHPackages                             portavice/bladestrap - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. portavice/bladestrap

ActiveLibrary[Templating & Views](/categories/templating)

portavice/bladestrap
====================

Blade components for Bootstrap 5

v1.5.0(1y ago)33.9k↑133.3%[1 PRs](https://github.com/portavice/bladestrap/pulls)MITPHPPHP ^8.1CI passing

Since Nov 22Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/portavice/bladestrap)[ Packagist](https://packagist.org/packages/portavice/bladestrap)[ RSS](/packages/portavice-bladestrap/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (7)DependenciesVersions (9)Used By (0)

Bladestrap = Blade + Bootstrap
==============================

[](#bladestrap--blade--bootstrap)

[![MIT Licensed](https://camo.githubusercontent.com/1a2e0606685ce00663bf829868f794fd3fc9c86f8d80cae324734129e0723a58/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d627269676874677265656e2e737667)](LICENSE.md)[![PHP](https://camo.githubusercontent.com/98e2daaaefdb03a668729c72960df9be033684c573367ab16fa38fdba50f96c3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f64796e616d69632f6a736f6e3f75726c3d68747470732533412532462532467261772e67697468756275736572636f6e74656e742e636f6d253246706f72746176696365253246626c61646573747261702532466d61696e253246636f6d706f7365722e6a736f6e2671756572793d726571756972652e706870266c6162656c3d504850)](https://camo.githubusercontent.com/98e2daaaefdb03a668729c72960df9be033684c573367ab16fa38fdba50f96c3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f64796e616d69632f6a736f6e3f75726c3d68747470732533412532462532467261772e67697468756275736572636f6e74656e742e636f6d253246706f72746176696365253246626c61646573747261702532466d61696e253246636f6d706f7365722e6a736f6e2671756572793d726571756972652e706870266c6162656c3d504850)[![Tests](https://github.com/portavice/bladestrap/actions/workflows/tests.yml/badge.svg)](https://github.com/portavice/bladestrap/actions/workflows/tests.yml)[![Code style check](https://github.com/portavice/bladestrap/actions/workflows/code-style.yml/badge.svg)](https://github.com/portavice/bladestrap/actions/workflows/code-style.yml)[![Latest version](https://camo.githubusercontent.com/39acb578c6f62af032a86ad45046342be9107f3d21fd949ddd6569dfc8d7aec9/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f706f727461766963652f626c61646573747261702e737667)](https://packagist.org/packages/portavice/bladestrap)[![Total downloads](https://camo.githubusercontent.com/aa0de81168b76bb91895fe3415f6dd35fdc4c6c061910714b6371bc3debb0ff8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f706f727461766963652f626c61646573747261702e737667)](https://packagist.org/packages/portavice/bladestrap)

Bladestrap provides [Laravel Blade components](https://laravel.com/docs/12.x/blade#components)for the [Bootstrap 5](https://getbootstrap.com/docs/) frontend framework.

Contents
--------

[](#contents)

- [Installation](#installation)
    - [Install Bootstrap](#install-bootstrap)
    - [Configure Bladestrap](#configure-bladestrap)
    - [Customize views](#customize-views)
- [Usage](#usage)
    - [Alerts](#alerts)
    - [Badges](#badges)
    - [Breadcrumb](#breadcrumb)
    - [Buttons](#buttons)
        - [Button groups](#button-groups)
        - [Button toolbars](#button-toolbars)
    - [Dropdowns](#dropdowns)
    - [Forms](#forms)
        - [Types of form fields](#types-of-form-fields)
        - [Options](#options)
        - [Disabled, readonly, required](#disabled-readonly-required)
        - [Input groups](#input-groups)
        - [Hints](#hints)
        - [Prefill values from query parameters](#prefill-values-from-query-parameters)
        - [Error messages](#error-messages)
    - [Links](#links)
    - [List groups](#list-groups)
    - [Modals](#modals)
    - [Navigation](#navigation)
- [Usage without Laravel](#usage-without-laravel)

Installation
------------

[](#installation)

First, install the package via [Composer](https://getcomposer.org/):

```
composer require portavice/bladestrap
```

Within a Laravel application, the package will automatically register itself.

Note

If you only use parts of the Laravel framework (such as `illuminate/view`), make sure to follow the instructions in the section on [usage without Laravel](#usage-without-laravel).

### Install Bootstrap

[](#install-bootstrap)

Note that you need to [include the Bootstrap files](https://github.com/twbs/bootstrap#quick-start) on your own.

1. If you haven't added Bootstrap as one of your dependencies, you can do so via [npm](https://www.npmjs.com/): ```
    npm install bootstrap
    ```
2. Add the following to your `webpack.mix.js` to copy the required Bootstrap files to your `public` directory: ```
    let bootstrapFiles = [
        'node_modules/bootstrap/dist/css/bootstrap.min.css',
        'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
    ];
    mix.copy(bootstrapFiles, 'public/lib');
    ```
3. Include CSS and JavaScript in `resources/views/layouts/app.blade.php`: ```

    ```

You may need to adjust the steps above to your custom project configuration. If you have a [custom Bootstrap build](https://getbootstrap.com/docs/5.3/customize/sass/) you are responsible to include the necessary parts of Bootstrap yourself.

### Configure Bladestrap

[](#configure-bladestrap)

Usually this should not be necessary, but if you need to overwrite the default configuration, create and edit `config/bladestrap.php`:

```
php artisan vendor:publish --tag="bladestrap-config"
```

### Customize views

[](#customize-views)

If you want to customize the views, publish them to `resources\views\vendor\bladestrap\components`and edit them to meet your requirements:

```
php artisan vendor:publish --tag="bladestrap-views"
```

You may want to delete the views you haven't changed to benefit from package updates automatically.

Usage
-----

[](#usage)

The components are placed in the `bs` namespace, such that they can be used via:

```

```

Components can be enhanced with additional classes from Bootstrap or your own CSS.

Specifically handled attributes are documented with type annotations in the `@props`in the respective Blade template under `resources/views/components`.

### Alerts

[](#alerts)

[Alerts](https://getbootstrap.com/docs/5.3/components/alerts/) are of variant `alert-info` by default and can be dismissible (with a close button).

```
My info alert
My primary alert
My dismissible secondary alert
```

### Badges

[](#badges)

[Badges](https://getbootstrap.com/docs/5.3/components/badge/) are of variant `badge-primary` default:

```
My primary badge
My secondary badge
```

### Breadcrumb

[](#breadcrumb)

The [breadcrumb](https://getbootstrap.com/docs/5.3/components/breadcrumb/) container is a `` (typically placed within your `layouts/app.blade.php`):

```
@hasSection('breadcrumbs')

        {{ __('Dashboard') }}
        @yield('breadcrumbs')

@endif
```

Items can be added via `Title`.

### Buttons

[](#buttons)

To create [buttons](https://getbootstrap.com/docs/5.3/components/buttons/)or button-like links with Bootstrap's `btn-*` classes you can use

- `` (becomes a ``)
- and `` (becomes an ``). Per default `btn-primary` is used, you can change that with the variant.

```
{{ __('Delete') }}
{{ __('My title') }}
```

To disable a button or link, just add `disabled="true"` which automatically adds the corresponding class and `aria-disabled="true"` as recommended by the Bootstrap documentation.

#### Button groups

[](#button-groups)

Buttons can be [grouped](https://getbootstrap.com/docs/5.3/components/button-group/):

```

    Button 1
    Button 2

```

#### Button toolbars

[](#button-toolbars)

Button groups can be grouped into a [toolbar](https://getbootstrap.com/docs/5.3/components/button-group/#button-toolbar):

```

        Button 1
        Button 2

        Button 3
        Button 4

```

### Dropdowns

[](#dropdowns)

[Dropdown buttons](https://getbootstrap.com/docs/5.3/components/dropdowns/#single-button) can be added as follows:

```

    My button

        Item 1
        Item 2

```

The `direction` attribute can be used to set the direction of the dropdown overlay. It defaults to `down`. `variant` (default `primary`) is inherited from the [button component](#buttons).

Within the `` you may place [headers](https://getbootstrap.com/docs/5.3/components/dropdowns/#headers)and [items](https://getbootstrap.com/docs/5.3/components/dropdowns/#menu-items):

```
My header
Item
```

Note that Bootstrap's [dropdowns require Popper](https://getbootstrap.com/docs/5.3/components/dropdowns/#overview), which needs to be included separately if you don't use Bootstrap's `bootstrap.bundle.min.js`.

Dropdown buttons within a button group require a [nested button group](https://getbootstrap.com/docs/5.3/components/button-group/#nesting) and `:nested-in-group="true"` on the dropdown button:

```

            Primary dropdown in group

                Item 1.1
                Item 1.2

            Secondary dropdown in group

                Item 2.1
                Item 2.2

    Normal button in group

```

### Forms

[](#forms)

Use `` to create [forms](https://getbootstrap.com/docs/5.3/forms/overview/) (method defaults to `POST`), any additional attributes passed to the form component will be outputted as well:

```

```

Bladestrap will inject an [CSRF token field](https://laravel.com/docs/12.x/blade#csrf-field) for all methods except `GET` automatically. Bladestrap will also configure [method spoofing](https://laravel.com/docs/12.x/blade#method-field) for `PUT`, `PATCH` and `DELETE` forms.

### Types of form fields

[](#types-of-form-fields)

Bladestrap has wide support for Bootstrap's [form fields](https://getbootstrap.com/docs/5.3/forms/form-control/).

```
{{ __('My label') }}
```

Note that the content of the form field becomes the label. This allows to include icons etc. If you don't want to add a label, don't pass any content:

```

```

All attributes will be passed to the ``, ``, `` - except

- the attributes which start with `container-` (those will be applied to the container for the label and input)
- and the attributes which start with `label-` (those will be applied to the label).

The following [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) are supported as values for the `type` attribute:

- `checkbox` - creates a [normal checkbox](https://getbootstrap.com/docs/5.3/forms/checks-radios/#checks), requires `:options`
- `color`
- `date`
- `datetime-local`\*
- `email`
- `file`
- `hidden` - ignores slots for label, hint and input group
- `month`\*
- `number`
- `password`
- `radio` - creates a [radio](https://getbootstrap.com/docs/5.3/forms/checks-radios/#radios), requires `:options`
- `range`
- `select` - creates a [dropdown](https://getbootstrap.com/docs/5.3/forms/select/) (`` with ``s), requires `:options`
- `switch` - creates a [toggle switch](https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches), requires `:options`
- `tel`
- `text`
- `textarea` - creates a ``
- `time`\*
- `url`
- `week`\*

The types (marked with \*) listed above don't have [full browser support](https://caniuse.com/?search=input%20type).

#### Options

[](#options)

Radio buttons, checkboxes and selects need a `:options` attribute providing an iterable of value/label pairs, e.g.

- an `array`, as in `:options="[1 => 'Label 1', 2 => 'Label 2']"`
- an `Illuminate\Support\Collection`, such as
    - `:options="User::query()->pluck('name', 'id')"`
    - or `:options="User::query()->pluck('name', 'id')->prepend(__('all'), '')"`
- a `Portavice\Bladestrap\Support\Options` which allows to set custom attributes for each option. For checkboxes, radios and switches, custom attributes prefixed with `check-container-` or `check-label-` are applied to the `.form-check` or `.form-check-label` respectively. If labels contain HTML, set `:allow-html="true"`.

An `Portavice\Bladestrap\Support\Options` can be used to easily create an iterable based on

- an `array````
    use Portavice\Bladestrap\Support\Options;

    // Array with custom attributes
    Options::fromArray(
          [
              1 => 'One',
              2 => 'Two',
          ],
          static fn ($optionValue, $label) => [
              'data-value' => $optionValue + 2,
          ]
      );
    ```
- an `enum` implementing the [BackedEnum interface](https://www.php.net/manual/de/class.backedenum.php)```
    use Portavice\Bladestrap\Support\Options;

    // All enum cases with labels based on the value
    Options::fromEnum(MyEnum::class);

    // ... with labels based on the name
    Options::fromEnum(MyEnum::class, 'name');

    // ... with labels based on the result of the myMethod function
    Options::fromEnum(MyEnum::class, 'myMethod');

    // Only a subset of enum cases
    Options::fromEnum([MyEnum::Case1, MyEnum::Case2]);
    ```
- an `array` or `Illuminate\Database\Eloquent\Collection` of Eloquent models (the primary key becomes the value, label must be defined) ```
    use Portavice\Bladestrap\Support\Options;

    // Array of models with labels based on a column or accessor
    Options::fromModels([$user1, $user2, ...$moreUsers], 'name');

    // Collection of models with labels based on a column or accessor
    Options::fromModels(User::query()->get(), 'name');

    // ... with labels based on a Closure
    Options::fromModels(
        User::query()->get(),
        static fn (User $user) => sprintf('%s (%s)', $user->name, $user->id)
    );

    // ... with custom attributes for s using a \Closure defining an ComponentAttributeBag
    Options::fromModels(User::query()->get(), 'name', static function (User $user) {
        return (new ComponentAttributeBag([]))->class([
            'user-option',
            'inactive' => $user->isInactive(),
        ]);
    });

    // ... with custom attributes for s using a \Closure defining an array of attributes
    Options::fromModels(User::query()->get(), 'name', fn (User $user) => [
        'data-title' => $user->title,
    ]);
    ```

Additional options can be prepended/appended to an `Options`:

```
use Portavice\Bladestrap\Support\Options;

$options = Options::fromModels(User::query()->get(), 'name')
    ->sortAlphabetically() // call sort for current options
    ->prepend('all', '') // adds an option with an empty value before first option
    ->append('label for last option', 'value') // adds an option after the last option
    ->prependMany([ // adds options before the first option (value => label)
        'value-1' => 'first prepended option',
        'value-2' => 'second prepended option',
    ]);
```

**Radio** buttons (allows to select one of multiple values):

```
{{ __('My label') }}
```

**Multiple** checkboxes (allows to select multiple values):

```
{{ __('My label') }}
```

**Single** checkbox (just one option):

```
{{ __('My label') }}
{{ __('My label') }}
```

**Select** (allows to select one of multiple values):

```
{{ __('My label') }}
```

**Multi-Select** (allows to select multiple values):

```
{{ __('My label') }}
```

#### Disabled, readonly, required

[](#disabled-readonly-required)

The attributes `:disabled`, `:readonly`, and `:required` accept a boolean value, e.g. `:disabled="true"` or `:required="isset($var)"`.

Per default fields with `:required="true"` are marked with a `*` after the label. This behavior can be disabled via configuration (for all fields) or with `:mark-as-required="false"` (for a single field).

#### Input groups

[](#input-groups)

To add text at the left or the right of a form field (except checkboxes and radio buttons), you can use the slots `` and ``which makes an [input group](https://getbootstrap.com/docs/5.3/forms/input-group/):

```

    {{ __('My label') }}
    ≥
    €

```

By default, the appended/prepended text is wrapped within a ` class="input-group-text"` associated with the field. To avoid this, set `:container="false"` attribute on the slot which allows to define to add buttons for example:

```

    File

        Download current file

'
```

Alternatively, an `appendText` slot can include a ``:

```

    from
    Price

            until
            €

```

#### Hints

[](#hints)

`` can be used to add a [text](https://getbootstrap.com/docs/5.3/forms/form-control/#form-text) with custom hints (`.form-text`) below the field, which will be automatically referenced via `aria-describedby` by the input:

```

    {{ __('My label') }}
    Hint

```

#### Prefill values from query parameters

[](#prefill-values-from-query-parameters)

Setting `:from-query="true"` will extract values from the query parameters of the current route.

```
{{ __('Name') }}
```

A form with the example field above on a page `/my-page?filter[name]=Test` will set "Test" as the prefilled value of the field, while `/my-page` will have an empty value.

To pass default filters applied if no query parameters are set, use `ValueHelper::setDefaults`:

```
use Portavice\Bladestrap\Support\ValueHelper;

ValueHelper::setDefaults([
    'filter.name' => 'default',
])
```

#### Error messages

[](#error-messages)

All form fields show corresponding error messages automatically if present ([server-side validation](https://getbootstrap.com/docs/5.3/forms/validation/#server-side)). If you want to show them independent of a form field, you can use the component directly:

```

```

Both `` and `` support to use another than the default error bag via the `:errors` attribute.

### Links

[](#links)

[Colored links](https://getbootstrap.com/docs/5.3/helpers/colored-links/#link-colors) can be placed via ``, the attributes `opacity` and `opacityHover` define [opacity](https://getbootstrap.com/docs/5.3/utilities/link/#link-opacity).

```
Link text
Link text
Link text
```

### List groups

[](#list-groups)

`` is a [list group](https://getbootstrap.com/docs/5.3/components/list-group/), a container for multiple ``. `:flush="true"` enables [flush behavior](https://getbootstrap.com/docs/5.3/components/list-group/#flush), `:horizontal="true` changes the layout from vertical to [horizontal](https://getbootstrap.com/docs/5.3/components/list-group/#horizontal).

Items can be added via ``:

```

    Item 1
    Item 2

```

`:active="true"` highlights the [active item](https://getbootstrap.com/docs/5.3/components/list-group/#active-items), `:disabled="true"` makes it appear [disabled](https://getbootstrap.com/docs/5.3/components/list-group/#disabled-items).

### Modals

[](#modals)

[Modals](https://getbootstrap.com/docs/5.3/components/modal/) can be created via `` with optional slots for title and footer. Both slots accept additional classes and other attributes. If you don't want a `` container for the title, change it via `container="h2"` etc.

```
Open modal

    My modal title

        Test

```

`` supports the following optional attributes:

- `centered` to center the modal vertically (defaults to `false`)
- `fade` for the fade effect when opening the modal (defaults to `true`)
- `fullScreen` to force fullscreen (defaults to `false`, pass `true` to always enforce full screen or `sm` to enforce for sizes below the sm breakpoint etc.),
- `scrollable` to enable a vertical scrollbar for long dialog content (defaults to `false`)
- `staticBackdrop`' to enforce that clicking outside of it does not close the modal (defaults to `false`)
- `closeButton` sets the variant of the close button in the modal footer (defaults to `secondary`, `false` to disable the close button),
- `closeButtonTitle` for the title of the close button (defaults to "Close")

A `` opens the modal with the ID `my-modal`. You may pass any additional attributes as known from [``](#buttons).

### Navigation

[](#navigation)

`` creates a [nav](https://getbootstrap.com/docs/5.3/components/navs-tabs/) container, use `container="ol"` to change the container element from the default `` to ``.

Navigation items can be added via `Current Page`.

A navigation item may open a [dropdown](#dropdowns) if you enabled this by adding a dropdown slot:

```

    Dropdown link text

```

Usage without Laravel
---------------------

[](#usage-without-laravel)

Bladestrap uses `config()` and `request()` helpers. If you want to use Bladestrap without Laravel, you need to define the two helpers in your application, for example (may need to be adapted to the framework you use):

```
use Illuminate\Http\Request;
use Illuminate\Support\Arr;

$configFile = [
    'bladestrap' => require __DIR__ . '/../vendor/portavice/bladestrap/config/bladestrap.php',
];
function config(array|string|null $key, mixed $default = null): mixed
{
    global $configFile;
    return Arr::get($configFile, $key, $default);
}

$request = Request::capture();
function request(array|string|null $key = null, mixed $default = null): mixed
{
    global $request;
    return $key === null ? $request : $request->input($key, $default);
}
```

In addition, you have to do the registrations of the `BladestrapServiceProvider` yourself:

```
use Illuminate\View\Factory;
use Portavice\Bladestrap\Macros\ComponentAttributeBagExtension;

// Register macros as BladestrapServiceProvider would do.
ComponentAttributeBagExtension::registerMacros();

/* @var Factory $viewFactory */
// Add components in bs namespace to your views.
$viewFactory->addNamespace('bs', __DIR__ . '/../vendor/portavice/bladestrap/resources/views');
```

###  Health Score

42

—

FairBetter than 90% of packages

Maintenance68

Regular maintenance activity

Popularity24

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~79 days

Recently: every ~108 days

Total

7

Last Release

433d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/114071541?v=4)[portavice GmbH](/maintainers/portavice)[@portavice](https://github.com/portavice)

---

Top Contributors

[![patrickrobrecht](https://avatars.githubusercontent.com/u/12370952?v=4)](https://github.com/patrickrobrecht "patrickrobrecht (42 commits)")

---

Tags

bootstrapbootstrap-5composer-packagelaravel-extension

### Embed Badge

![Health badge](/badges/portavice-bladestrap/health.svg)

```
[![Health](https://phpackages.com/badges/portavice-bladestrap/health.svg)](https://phpackages.com/packages/portavice-bladestrap)
```

###  Alternatives

[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)[symfony/ux-icons

Renders local and remote SVG icons in your Twig templates.

555.8M69](/packages/symfony-ux-icons)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)