PHPackages                             nh/bs-component - 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. [Utility & Helpers](/categories/utility)
4. /
5. nh/bs-component

ActiveLibrary[Utility & Helpers](/categories/utility)

nh/bs-component
===============

Bootstrap components

4.0.4(2y ago)491211MITJavaScript

Since May 13Pushed 2y ago1 watchersCompare

[ Source](https://github.com/NatachaH/laravel-bootstrap-component)[ Packagist](https://packagist.org/packages/nh/bs-component)[ RSS](/packages/nh-bs-component/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (10)DependenciesVersions (88)Used By (1)

Installation
============

[](#installation)

Install the package via composer:

```
composer require nh/bs-component

```

Add this to your packages.json

```
"axios": "^1.1.2",
"@popperjs/core": "^2.6.0",
"bootstrap" : "^5.2.0",
"flatpickr" : "^4.6.7",
"@tiptap/core": "*",
"@tiptap/starter-kit": "*",
"@tiptap/extension-text-style": "*",
"@tiptap/extension-underline": "*",
"@tiptap/extension-link": "*",
"@tiptap/extension-table": "*",
"@tiptap/extension-table-cell": "*",
"@tiptap/extension-table-header": "*",
"@tiptap/extension-table-row": "*",

```

Publish the config

```
php artisan vendor:publish --tag=bs-component

```

Javascript to include

```
import '../../vendor/nh/bs-component/resources/js/bs-component';

```

SASS to include

```
@import '../../vendor/nh/bs-component/resources/scss/bs-component';

```

Available components:

- Alert
- Blockquote
- Breadcrumb
- Card
- Figure
- Loading (Spinner)
- Modal
- Modal Confirm
- Progress
- Toast
- Check (checkbox, radio or switch)
- Checklist (list of checkbox or radio)
- Datepicker
- Dynamic input
- Editor
- Input
- Input file
- Select
- Datalist
- Textarea
- Color
- Calendar

Available JS:

- Datepicker (Flatpickr)
- Editor (TipTap)
- Checkbox all
- Toggle switch
- Toggle select
- Autocomplete
- Table link

Components
==========

[](#components)

Alert
-----

[](#alert)

AttributeTypeDefaultcolorstringprimaryclosablebooleanfalse```

  Hey this is an alert !

```

Blockquote
----------

[](#blockquote)

AttributeTypeDefaultsourcestringnullalignstringstart```

  Hey this a blockquote !

```

Breadcrumb
----------

[](#breadcrumb)

AttributeTypeDefaultitemsarraynull*The keys in array are used to display the link text and the values are used for the href. The values can be an url or a route name.*

```

```

Card
----

[](#card)

AttributeTypeDefaulttitlestringnullfooterstringnull*The title and the footer can also be set as slot.*

```

    Before the card body.

  Hey this a card !

    After the card body.

```

Figure
------

[](#figure)

AttributeTypeDefaultcaptionstringnullalignstringstart*The align is for the caption.*

```

```

Loading
-------

[](#loading)

AttributeTypeDefaulttypestringbordercolorstringprimarytitlestringLoading...sizestringmd*The default title is the 'bs-component::button.loading' translation.*

```

```

Modal
-----

[](#modal)

AttributeTypeDefaulttitlestringnullfooterstringnullsizestringmdclosablebooleanfalsecenteredbooleanfalsescrollablebooleanfalseis-staticbooleanfalsefullscreenbooleanfalsefullscreen-sizestringnull```

  Hey this a modal !

  Launch modal

```

You can load by axios the content of the modal:

**Require**

- JS: ` import ModalLoad from '../../vendor/nh/bs-component/resources/js/_modal-load';`

```

  Launch modal

```

Modal Confirm
-------------

[](#modal-confirm)

AttributeTypeDefaultcolorstringprimaryiconstringnulltitlestringnullactionstring\#methodstringPOSTfooterstringnullsizestringmdcenteredbooleanfalsescrollablebooleanfalsefullscreenbooleanfalsefullscreen-sizestringnullwith-filebooleanfalsebtn-cancelarray\[\]btn-confirmarray\[\]**Require**

- JS: `import ModalConfirm from '../../vendor/nh/bs-component/resources/js/_modal-confirm';`
- SASS: `@import '../../vendor/nh/bs-component/resources/scss/modal-confirm';`

*The action can be overide by the data-action attribute in the link*

```

  Hey this a modal for confirmation !

  Launch modal confirm

```

Customization
-------------

[](#customization)

You can globaly customize the buttons in the 'bs-component' config file. Or you can set an array with the custom values (class,label,value) for each button.

```

  Hey this a modal for confirmation !

```

Progress
--------

[](#progress)

AttributeTypeDefaultcolorstringprimaryvalueint0minint0maxint0captionstringnullstrippedbooleanfalseanimatedbooleanfalse```

```

Toast
-----

[](#toast)

AttributeTypeDefaulttitlestringnulltimestringnullimgstringnullclosablebooleanfalseautohidebooleanfalsedelayint10000```

  Hey this is a toast !

  Hey this is a toast !

```

Calendar
--------

[](#calendar)

Display a calendar with events that are loaded per month

AttributeTypeDefaultcolorstringnullevents-load-urlstringnull**Require**

- JS: `import Calendar from '../../vendor/nh/bs-component/resources/js/_calendar';`
- SASS: `@import '../../vendor/nh/bs-component/resources/scss/calendar';`

```

```

In the controller you must return a JSON with the events:

```
/**
 * Get the events for the calendar
 *
 * @param  \Illuminate\Http\Request  $request
 * @return Illuminate\Database\Eloquent\Collection
 */
public function loadEventPerMonth(Request $request)
{
  // Define the events for the month
  $events[] = [
    'title'   => 'My event',
    'content' => 'The description',
    'color'   => 'primary',
    'days'    => [14,15,16]
  ];

  $events[] = [
    'title'   => 'Another event',
    'content' => 'The description',
    'color'   => 'danger',
    'days'    => [28]
  ];

  // Retune the JSON
  return $events;
}

```

This is an exemple for add JS interaction on days and events:

```
new Calendar(document.querySelector('.calendar-automatic),{
  onDayCreated: function(object,date){
    object.addEventListener('click', function(e){
         // Do something when day is created (For exemple add a modal interaction on click on the day)
         // Check if there is any event : this.classList.contains('day-with-events')
    });
  },
  onEventCreated: function(object,event){
    // Do something when event is created (For exemple add a popover interaction on the event)
    new Bootstrap.Popover(object,{
      trigger: 'hover',
      content: object.getAttribute('data-content'),
      html: true
    })
  },
});

```

Form Components
===============

[](#form-components)

All the component manage the request old() value and the validation.

Here the default attributes:

AttributeTypeDefaultlabelstringnullnamestringnullvaluestringnullhelpstringnullrequiredbooleanfalsedisabledbooleanfalsereadonlybooleanfalsebeforestringnullafterstringnullerrorRelatedstringnullerrorBagstringnullautocompletebooleanfalse*You can enable the browser autocomplete only for the datalist, input and datepicker*

Check
-----

[](#check)

AttributeTypeDefaulttypestringcheckboxvaluestring1checkedbooleanfalsebooleanbooleanfalse*If the boolean option is set to true, a hidden input with the value opposite value is created.*

```

```

CheckList
---------

[](#checklist)

AttributeTypeDefaultOptiondisabledmixedfalseboolean/arraytypestringcheckboxcheckbox/radiooptionsarray\[\]checkedmixed\[\]string/arrayinlinebooleanfalse```

```

Input
-----

[](#input)

AttributeTypeDefaultOptiontypestringtexttext/number/phone/email/passwordplaceholderstringnullsizestringnullstepfloat1minfloatnullmaxfloatnull*The step, min and max are only for input of type number.*

```

```

Input File
----------

[](#input-file)

AttributeTypeDefaultsizestringnullmultiplebooleanfalse```

```

Select
------

[](#select)

AttributeTypeDefaultOptiondisabledmixedfalseboolean/arrayreadonlybooleanfalseoptionsarray\[\]sizestringnullselectedmixed\[\]string/arraymultiplebooleanfalse*You can pass a multi-level array for make optgroup: 'Label' => \[1 => 'Name'\]**If the select is readonly, the value(s) will be set in hidden field(s)*

```

```

Datalist
--------

[](#datalist)

AttributeTypeDefaultplaceholderstringnulloptionsarray\[\]sizestringnullwith-hiddenbooleanfalsehidden-namestringidhidden-fieldstringnull*You can add an hidden input with custom name and value. To activate the functionality you have to add the class .datalist.**You can transform a datalist to an autocomplete: Check the JS section for more information*

**Require**

- JS: `import Datalist from '../../vendor/nh/bs-component/resources/js/_datalist';`

```

```

Textarea
--------

[](#textarea)

AttributeTypeDefaultplaceholderstringnull```

```

Color
-----

[](#color)

AttributeTypeDefaultoptionsarray\[\]```

```

JS Component
============

[](#js-component)

Datepicker
----------

[](#datepicker)

To use the datepicker you need to install the JS plugin **Flatpickr** !

AttributeTypeDefaultOptionplaceholderstringnullsizestringnullmodestringsinglesingle/multiple/rangeformatstringdatetimedatetime/datetime-short/date/time/time-short/db-datetime/db-date/db-timeminstringnullcan be a date or the name of an inputmaxstringnullcan be a date or the name of an inputinlinebooleanfalsestaticbooleanfalseinput-fromstringnullinput-tostringnulldisabled-datesarray\[\]eventsarray\[\]*You can set a min/max date or define by another input name.**For range you can add 2 hidden input to set the from/to values**You can set the disabled dates with an array, exemple \['2021-01-05','2021-05-11'\]**You can set some events dates with an array, exemple \['2021-01-05' => \['color' => 'danger'\] ,'2021-05-11' => \['color' => 'warning'\]\]**Set static to true if the datepicker is in a parent with relative position*

**Require**

- JS: `import Datepicker from '../../vendor/nh/bs-component/resources/js/_datepicker';`
- SASS: `@import '../../vendor/nh/bs-component/resources/scss/datepicker';`

```

```

Dynamic
-------

[](#dynamic)

With this component you can add/remove input to add multiple field in your form !

AttributeTypeDefaultlegendstringlistingstringnulltemplatestringnullminintnullmaxintnullnamestringdynamictypestringdynamicsortablebooleanfalseitemsarray\[\]defaultsarray\[\]itemsDisabledarray\[\]helpstringnullbtnConfigstringbs-component.dynamic.buttonsbeforestringnullafterstringnull*The legend is required.**The listing and template are path to some includes views.**The Drag&Drop is NOT initialize, you have to add the JS for that functionnality*

**Require**

- JS: `import Dynamic from '../../vendor/nh/bs-component/resources/js/_dynamic';`
- SASS: `@import '../../vendor/nh/bs-component/resources/scss/dynamic';`

```

```

In the template view you have access to the **$default**; In the listing view you have acces to the **$item**

\###Customization:

You can globaly customize the buttons in the 'bs-component' config file or you can specify a custom config file/array to use.

```

```

Editor
------

[](#editor)

To use the editor you need to install the JS plugin **TipTap** !

AttributeTypeDefaultAvailablelabelstringnullnamestringnullvaluestringnullhelpstringnullrequiredbooleanfalsetoolbarstringfont|div|format|list|link|color|font|format|list|link|color|table|emojiheadingsstring1|2|31|2|3|4|5|6paragraphsstringleadfree to add any classdivsstringblockquotefree to add any classformatsstringbold|italic|underline|strikecolorsstringprimary|success|warning|dangerfree to add any classemojisstringbi-emoji-smile|bi-emoji-neutral|bi-emoji-frown|bi-emoji-heart-eyes|bi-emoji-wink|bi-hand-thumbs-up|bi-hand-thumbs-downfree to add any classerrorstringnullerrorBagstringnull*The name is required.**The colors classes will start by .text-**The emojis will have a .emoji class*

*For global customization of the options, you can update the config file in config.bs-component.editor*

*If you want to remove the headings for one editor type :headings="false"*

**Require**

- JS: `import Editor from '../../vendor/nh/bs-component/resources/js/_editor';`
- SASS: `@import '../../vendor/nh/bs-component/resources/scss/editor';`

```

```

If you add some paragraphs and divs you can create a language file **editor.php** to display the name of your items.

For the emojis you can use the Bootstrap icon:

```
npm i bootstrap-icons

```

Checkbox all
------------

[](#checkbox-all)

If you need a checkbox to check all his children:

```

```

*The parent checkbox need the class checkbox-all and the value xxx**The children checkbox need the class checkbox-xxx*

**Require**

- JS: `import ToggleSwitch from '../../vendor/nh/bs-component/resources/js/_toggle-switch';`

Toggle switch
-------------

[](#toggle-switch)

If you need a checkbox to show/hide some classes:

```

    Display this div if toggle IS NOT checked

    Display this div if toggle IS checked

```

*The toggle switch and div to hide/show should be wrap in a parent div*

**Require**

- JS: `import ToggleSelect from '../../vendor/nh/bs-component/resources/js/_toggle-select';`

Toggle select
-------------

[](#toggle-select)

If you need a select to toggle some elements:

```

      Display this div if select option is Aaa

      Display this div if select option is Bbb

```

*The toggle switch and div to hide/show should be wrap in a parent div*

You can also toggle elements via the group label:

```

    Display this div if select option group is first

    Display this div if select option group is second

```

```
var myCustomSelect = new ToggleSelect(document.querySelector('#customToggleSelect'),{
  field: 'group', // Otherwise set to 'option'
  resetFormWhenHidden: true, // Make form fields as null when hidden
  disabledFormWhenHidden : true, // Make form fields disabled in case you need to not send the fields to not send the fields when they are hidden
  onChanged    : function(e){}
});

```

**Require**

- JS: `import ToggleSelect from '../../vendor/nh/bs-component/resources/js/_toggle-select';`

```
var selectField = document.getElementById('mySelect');
var myToggleSelect = new ToggleSelect(selectField, {
    field        : 'option',
    parent       : selectField.parentNode.parentNode,
    changeOnInit : true, // Make a change() on the init
    withDisabled : false, // Make fields (select, inputs and co) disabled in case you need to not send the fields when they are hidden
    onChanged    : function(e){},
  });

```

*field could be option or group, depend if you want to trigger by simple option or by option group**parent determine where to look for div to hide/show*

Autocomplete
------------

[](#autocomplete)

If you need an autocomplete datalist:

**Require**

- JS: `import Autocomplete from '../../vendor/nh/bs-component/resources/js/_autocomplete';`

HTML:

```

```

JS:

OptionTypeDefaultInformationsurlstringel.getAttribute('data-url')Url for the axio request (POST)fieldstringel.getAttribute('data-field')Field to use for the options value and inputdatalistHTMLel.querySelector('datalist')The datalist objecthidden.inputHTMLel.querySelector('.input-hidden')Input hidden to fill when option is selectedhidden.fieldstringel.getAttribute('data-hidden-field')Field to use for the hidden input valueonChangedfunctionfunction(e){}Callback function*The url must return a JSON list**You can set the data-url data-field and data-hidden-field over the js option*

```
var autocompletes = document.querySelectorAll('.mycustomautocomplete');
Array.prototype.forEach.call(autocompletes, function(el, i) {
    var autocomplete = new Autocomplete(el,{
      url: 'myurlstring',
      field: 'name',
      datalist: document.querySelector('#myCustomDatalist'),
      hidden: {
        input: el.parentNode.querySelector('input[name="hiddenField"]'),
        field: 'id'
      },
      onChanged: function(option){
        el.parentNode.querySelector('input[name="otherField"]').value = option ? option.price : '';
      }
    });
});

```

In this exemple the **\#myCustomDatalist** datalist options will be contruct via the url request. Exemple of datas items: { id: 1, name: 'My item', 'price': 10.00}

When the user will select an option, the **Hidden field** will be set with the **id** and the **Other field** will be set with the **price** of the JSON item.

Table link
----------

[](#table-link)

If you need to make a row of a table as a link:

**Require**

- JS: `import TableLink from '../../vendor/nh/bs-component/resources/js/_table-link';`

HTML:

```

      Title
      Disabled

        My title
        Disabled

```

By default the class .table-link make a new TableLink. But you can customize it in JS:

```
var table = document.getElementById('#myTableLink');
var myTable = new TableLink(table);

```

*The tablelink will be automatic on table with class .table-link*

Table tree
----------

[](#table-tree)

If you need to make a row with children and contract/expand them:

**Require**

- JS: `import TableTree from '../../vendor/nh/bs-component/resources/js/_table-tree';`

HTML:

```

      Title

       My title

       My children title

       My other children title

```

By default the class .table-link make a new TableLink. But you can customize it in JS:

```
var table = document.getElementById('#myTableLink');
var myTable = new TableLink(table);

```

*The tablelink will be automatic on table with class .table-link*

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity71

Established project with proven stability

 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 ~12 days

Recently: every ~31 days

Total

87

Last Release

1088d ago

Major Versions

1.0.12 → 2.0.02020-06-17

1.2.2 → 2.1.32020-08-28

2.1.5 → 3.0.02020-11-12

3.7.14 → 4.0.02023-01-19

### Community

Maintainers

![](https://www.gravatar.com/avatar/47361520c40f781d7d5b39e26b3194800a35e89c4819c220ea3eaaaa907c34ec?d=identicon)[NatachaH](/maintainers/NatachaH)

---

Top Contributors

[![NatachaH](https://avatars.githubusercontent.com/u/24412486?v=4)](https://github.com/NatachaH "NatachaH (306 commits)")

### Embed Badge

![Health badge](/badges/nh-bs-component/health.svg)

```
[![Health](https://phpackages.com/badges/nh-bs-component/health.svg)](https://phpackages.com/packages/nh-bs-component)
```

###  Alternatives

[bilfeldt/laravel-flash-message

Flash multiple messages using Laravels default session message flashing system

1230.6k](/packages/bilfeldt-laravel-flash-message)[cebe/luya-module-sitemap

sitemap.xml module for luya CMS

115.9k](/packages/cebe-luya-module-sitemap)

PHPackages © 2026

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