Bootstrap-4-Advanced-Components

The ultimate plugins to enhance Bootstrap 4.

Here is the beginning of a collection of plugins and tweaks to enhance Bootstrap 4 standard components.

At first I will focus on bringing the material design components to Bootstrap 4, enhancing the wonderfull Daemonite material design 2 for Bootstrap 4.

Later, I will provide both standard Bootstrap 4 and material Bootstrap 4 versions.
NB. WIP means work in progress ;-)

Bootstrap tricks

Bootstrap 4 - How to set 5 columns per row

Learn how to add the capacity of a 5 column grid to Bootstrap 4. See my fiddle on StackOverflow for 5 columns with Bootstrap 4;

DROPPED Alerts and notifications

BS 4.3+ have built-in toasts components. See material design Toast/snackbar demo.

Archived

Bootstrap Notify plugin by mouse0270 to add snackbar and toasts notifications to Bootstrap < 4.3. See the Bootstrap 4 demo.

Badges

All you need is available in Material UI 2.

Collapse

All you need is available in Material UI 2.

Forms

These components try to bring material components to Bootstrap 4 : Google material design sepcs for Text fields.

Text fields and inputs - input spinners

Bootstrap Touchspin adds useful input spinners to your form fields. Bootstrap 4 demo here.

Text fields - add icons to input or placeholder

7 ways to add an incon to an input in material design, before it as an input-group or within it, using CSS or hacking the placeholder. Enjoy my Bootstrap 4 demo here.

Text fields - Clear button

The Clear button for input fields in Bootstrap 4 demo is available here.

Text fields - Multi-line fields, Textarea autosize

Multi-line fields is brought to you in Bootstrap 4 through the use of textarea autosize plugin, see the Bootstrap 4 demo here.

Text fields - Character or word counter

Character counter is brought to you in Bootstrap 4 through the use of maxlength plugin, see the Bootstrap 4 demo here.

Text fields - label color on focus and line ripple effect

Daemonite material UI 2 has all you need for your forms.

See the Bootstrap 4 demo here.

Text fields - Password redaction

Here is my plugin to show/reveal the password with a toggle icon on a password input field, see the Bootstrap 4 demo here

Text fields - text field error, form validation

I chose Parsley jQuery plugin to introduce form validation in Bootstrap 4, see the Bootstrap 4 demo here.

Text fields - touch spin, input spinner

I chose bootstrapTouchSpin plugin to use spinners in Bootstrap 4, here is the concept but the plugin is not yet Bootstrap 4 compatible, see the Bootstrap 4 demo here.

Text fields - Formatted inputs

I chose inputMask plugin to enhance inputs masking, see the Bootstrap 4 demo here

Switches

Bootstrap 4 has the switches you need.

For extra switches:

I chose Bootstrap switch plugin to transform BS checkboxes and radio buttons into switches, see the demo of switches for Bootstrap 4.

Radio buttons alternative : use cards as radio buttons

I coded a demo to apply a card styling to radio buttons. Play with my djibe material cards as radio buttons demo .

Inline editing with contenteditable

I styled the HTML5 contenteditable aspect for a material look of this HTML5 standard component. See the demo for Bootstrap 4 inline editing.

Summernote text editor

I styled Summernote plugin to give it a material look. See the demo and tutorial for Bootstrap 4 Summernote text editor.

Other to be delivered

• Search panel
• Edit-inline (X-editable)

---

Pickers

Time picker

I forked Clockpicker plugin by Weareoutman for effective time picking in Bootstrap 4 with updated styles, see the Clockpicker for Bootstrap 4 demo.

Date picker

Use the built-in datepicker from Daemonite material UI for effective date picking, see the Daemonite documentation here

DateTime picker

I updated bootstrap Material Datetimepicker by t00rk plugin for effective date and time picking, see the fork here

See the Bootstrap 4 demo here

See the Bootstrap 4 demo with material UI here : here

Drag and drop files for upload

I chose DropzoneJS plugin to enhence file upload, then I gave it a mterial look. See the Bootstrap 4 tutorial and demo here.

---

Scrollbar - smooth and design

I chose m-custom-scrollbar by malihu plugin for a cross-browser custom scrollbar with smooth scroll.

See the Bootstrap 4 demo here.

Sliders - input type="range" and alternatives

HTML5 input range cross-browser styling

Material design look for HTML5 range sliders. Pure CSS code. Works with Chrome, Safari, Firefox and Edge. Compatible with Bootstrap 4. Play with pure CSS range sliders demo by djibe.

Material design theme for ionRangeSlider plugin

My material design theme for ionRangeSlider plugin. jQuery dependency. Play with material theme demo for ionRangeSlider.

Right click menu

Want a context menu for your site ?

See the tutorial and demo for a context menu - right click menu using Bootstrap 4

Other utilities for Bootstrap 4

WIP, to be delivered :

• Sticky content