Bootstrap is a very familiar front-end framework. A number of developers use it to instantly create interfaces for their Laravel App. While it does a lot of tasks easier, it more needs a set of HTML code to allow the default components which can create your template files seem messy.

Laravel 5.4 adds support for elements and slots, the right solution to use together with Bootstrap parts. thus we went at it and committed most of the parts during a Laravel package.

Introducing Laravel Bootstrap Components

Laravel 5.4+ makes it easy to use and reuse Bootstrap’s elements in your blade files.

Bootstrap 4 modal looks like in HTML, To give an example,

<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Same modal with the included component:

@component('bootstrap::modal')
    @slot('title')
        Modal title
    @endslot
    <p>Modal body text goes here.</p>
    @slot('footer')
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    @endslot

@endcomponent

Installation

Head over to the repository on Github and follow the installation instructions.

Customization

You can modify the fundamental attributes of the parts, like categories, id and custom choices. For additional customization, you'll be able to publish the parts to your own views folder and modify the HTML of every element to your want.