Download the PHP package bastinald/laravel-bootstrap-components without Composer
On this page you can find all versions of the php package bastinald/laravel-bootstrap-components. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download bastinald/laravel-bootstrap-components
More information about bastinald/laravel-bootstrap-components
Files in bastinald/laravel-bootstrap-components
Package laravel-bootstrap-components
Short Description Laravel Bootstrap Blade components.
License MIT
Homepage https://github.com/bastinald/laravel-bootstrap-components
Informations about the package laravel-bootstrap-components
Laravel Bootstrap Components
This package contains a set of useful Bootstrap Laravel Blade components. It promotes DRY principles and allows you to keep your HTML nice and clean. Components include alerts, badges, buttons, form inputs (with automatic error feedback), dropdowns, navs, pagination (responsive), and more. The components come with Laravel Livewire integration built in, so you can use them with or without Livewire.
Documentation
- Requirements
- Installation
- Components
- Alert
- Badge
- Button
- Check
- Close
- Color
- Datalist
- Dropdown
- Dropdown Item
- Icon
- Image
- Input
- Link
- Nav Dropdown
- Nav Link
- Pagination
- Progress
- Radio
- Select
- Textarea
- Traits
- WithModel
- Publishing Assets
- Custom Views
- Custom Icons
Requirements
- Bootstrap 5 must be installed via webpack first
- Font Awesome must be installed to use icons
Installation
Require the package via composer:
Components
Alert
A Bootstrap alert:
Available Props & Slots
icon
: Font Awesome icon to show before label e.g.cog
,envelope
label
: label to display, can also be placed in theslot
color
: Bootstrap color e.g.primary
,danger
,success
dismissible
: set the alert to be dismissible
Badge
A Bootstrap badge:
Available Props & Slots
icon
: Font Awesome icon to show before label e.g.cog
,envelope
label
: label to display, can also be placed in theslot
color
: Bootstrap color e.g.primary
,danger
,success
Button
A Bootstrap button:
Available Props & Slots
icon
: Font Awesome icon to show before label e.g.cog
,envelope
label
: label to display, can also be placed in theslot
color
: Bootstrap color e.g.primary
,danger
,success
size
: Bootstrap button size e.g.sm
,lg
type
: button type e.g.button
,submit
route
: sets thehref
to a routeurl
: sets thehref
to a urlhref
: sets thehref
dismiss
: adata-bs-dismiss
value e.g.alert
,modal
toggle
: adata-bs-toggle
value e.g.collapse
,dropdown
click
: Livewire action on clickconfirm
: prompts the user for confirmation on click
Check
A Bootstrap checkbox input:
Available Props & Slots
label
: label to display above the inputcheckLabel
: label to display beside the inputhelp
: helper label to display under the inputswitch
: style the input as a switchmodel
: Livewire model property keylazy
: bind Livewire data on change
Close
A Bootstrap close button:
Available Props & Slots
color
: Bootstrap close color e.g.white
dismiss
: adata-bs-dismiss
value e.g.alert
,modal
Color
A Bootstrap color picker input:
Available Props & Slots
label
: label to display above the inputicon
: Font Awesome icon to show before input e.g.cog
,envelope
prepend
: addon to display before input, can be used via named slotappend
: addon to display after input, can be used via named slotsize
: Bootstrap input size e.g.sm
,lg
help
: helper label to display under the inputmodel
: Livewire model property keylazy
: bind Livewire data on change
Datalist
A Bootstrap datalist input:
Available Props & Slots
label
: label to display above the inputoptions
: array of input options e.g.['Red', 'Blue']
icon
: Font Awesome icon to show before input e.g.cog
,envelope
prepend
: addon to display before input, can be used via named slotappend
: addon to display after input, can be used via named slotsize
: Bootstrap input size e.g.sm
,lg
help
: helper label to display under the inputmodel
: Livewire model property keydebounce
: time in ms to bind Livewire data on keyup e.g.500
lazy
: bind Livewire data on change
Desc
A description list:
Available Props & Slots
tern
: the description list termdetails
: the description list details, can also be placed in theslot
date
: date to use instead of details (for use with Laravel Timezone)
Dropdown
A Bootstrap dropdown:
Available Props & Slots
icon
: Font Awesome icon to show before label e.g.cog
,envelope
label
: dropdown label to display, can be used via named slotitems
: dropdown items, can also be placed in theslot
color
: Bootstrap color e.g.primary
,danger
,success
size
: Bootstrap button size e.g.sm
,lg
Dropdown Item
A Bootstrap dropdown menu item:
Available Props & Slots
icon
: Font Awesome icon to show before label e.g.cog
,envelope
label
: label to display, can also be placed in theslot
route
: sets thehref
to a routeurl
: sets thehref
to a urlhref
: sets thehref
Form
A Bootstrap form:
Available Props & Slots
submit
: Livewire action on submit
Icon
A Font Awesome icon:
Available Props & Slots
name
: Font Awesome icon name e.g.cog
,rocket
style
: Font Awesome icon style e.g.solid
,regular
,brands
size
: Font Awesome icon size e.g.sm
,lg
,3x
,5x
color
: Bootstrap color e.g.primary
,danger
,success
spin
: sets the icon to use a spin animationpulse
: sets the icon to use a pulse animation
Image
An image:
Available Props & Slots
asset
: sets thesrc
to an assetsrc
: sets thesrc
fluid
: sets the image to be fluid widththumbnail
: sets the image to use thumbnail stylingrounded
: sets the image to have rounded corners
Input
A Bootstrap text input:
Available Props & Slots
label
: label to display above the inputtype
: input type e.g.text
,email
icon
: Font Awesome icon to show before input e.g.cog
,envelope
prepend
: addon to display before input, can be used via named slotappend
: addon to display after input, can be used via named slotsize
: Bootstrap input size e.g.sm
,lg
help
: helper label to display under the inputmodel
: Livewire model property keydebounce
: time in ms to bind Livewire data on keyup e.g.500
lazy
: bind Livewire data on change
Link
A hyperlink:
Available Props & Slots
icon
: Font Awesome icon to show before label e.g.cog
,envelope
label
: label to display, can also be placed in theslot
route
: sets thehref
to a routeurl
: sets thehref
to a urlhref
: sets thehref
Nav Dropdown
A Bootstrap nav dropdown:
Available Props & Slots
icon
: Font Awesome icon to show before label e.g.cog
,envelope
label
: dropdown label to display, can be used via named slotitems
: dropdown items, can also be placed in theslot
Nav Link
A Bootstrap nav link:
Available Props & Slots
icon
: Font Awesome icon to show before label e.g.cog
,envelope
label
: label to display, can also be placed in theslot
route
: sets thehref
to a routeurl
: sets thehref
to a urlhref
: sets thehref
Pagination
Responsive Bootstrap pagination links:
Available Props & Slots
links
: paginated Laravel modelsjustify
: Bootstrap justification e.g.start
,end
Progress
A Bootstrap progress bar:
Available Props & Slots
label
: label to display inside the progress barpercent
: percentage of the progress barcolor
: Bootstrap color e.g.primary
,danger
,success
height
: height of the progress bar in pixelsanimated
: animate the progress barstriped
: use striped styling for the progress bar
Radio
A Bootstrap radio input:
Available Props & Slots
label
: label to display above the inputoptions
: array of input options e.g.['Red', 'Blue']
help
: helper label to display under the inputswitch
: sets the input to use a switch stylemodel
: Livewire model property keylazy
: bind Livewire data on change
Select
A Bootstrap select input:
Available Props & Slots
label
: label to display above the inputplaceholder
: placeholder to use for the empty first optionoptions
: array of input options e.g.['Red', 'Blue']
icon
: Font Awesome icon to show before input e.g.cog
,envelope
prepend
: addon to display before input, can be used via named slotappend
: addon to display after input, can be used via named slotsize
: Bootstrap input size e.g.sm
,lg
help
: helper label to display under the inputmodel
: Livewire model property keylazy
: bind Livewire data on change
Textarea
A Bootstrap textarea input:
Available Props & Slots
label
: label to display above the inputicon
: Font Awesome icon to show before input e.g.cog
,envelope
prepend
: addon to display before input, can be used via named slotappend
: addon to display after input, can be used via named slotsize
: Bootstrap input size e.g.sm
,lg
help
: helper label to display under the inputmodel
: Livewire model property keydebounce
: time in ms to bind Livewire data on keyup e.g.500
lazy
: bind Livewire data on change
Traits
WithModel
This trait makes form data model manipulation a breeze. No more having to create a Livewire component property for every single form input. All form data will be placed inside the $model
property array.
Getting Model Data
Get the model data as a collection:
Setting Model Data
Set a single value:
Set values using Eloquent model data:
Set values using an array:
Working With Arrays
Add an empty array item:
Remove an array item by its key:
Order an array item by its key & direction:
The direction should be up
or down
.
Binding Model Data
Package components work with this trait via the model
attribute:
Validating Model Data
Use the validateModel
method to validate model data:
This method works just like the Livewire validate
method, so you can specify your rules in a separate rules
method if you prefer.
Publishing Assets
Custom Views
Use your own component views by publishing the package views:
Now edit the files inside resources/views/vendor/bs
. The package will use these files to render the components.
Custom Icons
Use your own font icons by publishing the package config:
Now edit the icon_class_prefix
value inside config/laravel-bootstrap-components.php
. The package will use this class to render the icons.