Bootstrap-4-Advanced-Components

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #llm #go #golang #machine-learning #rust #deep-learning #linux #cli #awesome-list #security #open-source

Bootstrap-4-Advanced-Components

(★ 19)

The ultimate tricks and plugins to enhance Bootstrap 4 with Daemonite material UI

Bootstrap-4-Advanced-Components 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://djibe.github.io/material/).

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](https://stackoverflow.com/questions/50734727/5-columns-per-row-in-bootstrap-4/50747942#50747942);

![Bootstrap 4 5 column grid](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/bootstrap-5columns.png)

## DROPPED Alerts and notifications

BS 4.3+ have built-in toasts components. See [material design Toast/snackbar demo](https://djibe.github.io/material/docs/4.5/material/snackbars/).

### Archived

Bootstrap Notify plugin by mouse0270 to add snackbar and toasts notifications to Bootstrap < 4.3.
[See the Bootstrap 4 demo](https://jsfiddle.net/djibe89/5hw6ktkk/).
  
![Toasts and snackbars](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/snackbar.gif)

## Badges

All you need is [available in Material UI 2](https://djibe.github.io/material/docs/4.5/material/badges/).

## Collapse

All you need is [available in Material UI 2](https://djibe.github.io/material/docs/4.5/components/collapse/).

## Forms

These components try to bring material components to Bootstrap 4 : [Google material design sepcs for Text fields](https://material.io/guidelines/components/text-fields.html).

### Text fields and inputs - input spinners

Bootstrap Touchspin adds useful input spinners to your form fields. [Bootstrap 4 demo here](https://jsfiddle.net/djibe89/q25m35ot/).

![Input spinners](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/bootstrap-touchspin.png)

### 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](https://jsfiddle.net/djibe89/tyh21Lxe/).

![Icons for inputs](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/input-icons.png)

### Text fields - Clear button

The Clear button for input fields in <a href="https://jsfiddle.net/djibe89/f8ac3vyt/" target="_blank">Bootstrap 4 demo is available here</a>.

![Clear button for inputs](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/clear-button.gif)

### Text fields - Multi-line fields, Textarea autosize

Multi-line fields is brought to you in Bootstrap 4 through the use of <a href="https://github.com/javierjulio/textarea-autosize" target="_blank">textarea autosize plugin</a>, see the <a href="https://djibe.github.io/material/docs/4.5/plugins/textarea-autosize/" target="_blank">Bootstrap 4 demo here</a>.

![Textarea autosize screen](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/textarea-autosize.gif)

### Text fields - Character or word counter

Character counter is brought to you in Bootstrap 4 through the use of <a href="https://github.com/mimo84/bootstrap-maxlength/" target="_blank">maxlength plugin</a>, see the <a href="https://djibe.github.io/material/docs/4.5/plugins/character-counter/" target="_blank">Bootstrap 4 demo here</a>.

![Character counter screen](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/maxlength.gif)

### Text fields - label color on focus and line ripple effect

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

See the <a href="https://djibe.github.io/material/docs/4.5/material/text-fields/" target="_blank">Bootstrap 4 demo here</a>.
  
![Material line ripple on inputs](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/line-ripple.gif)

### 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 <a href="https://jsfiddle.net/djibe89/kx31ne90/" target="_blank">here</a>

![Material reveal password](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/bsreveal.gif)

### Text fields - text field error, form validation

I chose <a href="https://github.com/guillaumepotier/Parsley.js/" target="_blank">Parsley jQuery plugin</a> to introduce form validation in Bootstrap 4, see the <a href="https://jsfiddle.net/djibe89/tu0ap111/" target="_blank">Bootstrap 4 demo here</a>.

![Parsley screen](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/form-validation.gif)

### 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 <a href="https://jsfiddle.net/djibe89/q25m35ot/" target="_blank">Bootstrap 4 demo here</a>.

### Text fields - Formatted inputs

I chose inputMask plugin to enhance inputs masking, see the Bootstrap 4 demo <a href="https://jsfiddle.net/djibe89/9zx7v5uz/" target="_blank">here</a>

![Input mask screen](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/formatted-inputs.gif)

### Switches

Bootstrap 4 has the [switches you need](https://djibe.github.io/material/docs/4.5/components/forms/#switches).

For extra switches:

I chose <a href="http://bootstrapswitch.site/" target="_blank">Bootstrap switch</a> plugin to transform BS checkboxes and radio buttons into switches, see the <a href="https://jsfiddle.net/djibe89/vL87w0j8/" target="_blank">demo of switches for Bootstrap 4</a>.

![Switches for checkboxes and radios](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/switch.gif)

### 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 ](https://jsfiddle.net/djibe89/g5nz7kmo/64/).

![djibe cards as radio buttons](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/card-as-radio-material.gif)

### Inline editing with contenteditable

I styled the HTML5 contenteditable aspect for a material look of this HTML5 standard component. See the <a href="http://jsfiddle.net/djibe89/b9pa83Ld/" target="_blank">demo for Bootstrap 4 inline editing</a>.

![Inline editing](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/contenteditable.gif)

### Summernote text editor

I styled Summernote plugin to give it a material look. See the <a href="https://jsfiddle.net/djibe89/by9n8azm/" target="_blank">demo and tutorial for Bootstrap 4 Summernote text editor</a>.

![Summernote material design](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/summernote.png)

### Other to be delivered

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

***

## Pickers

### Time picker

<a href="https://github.com/djibe/clockpicker" target="_blank">I forked Clockpicker plugin</a> by <a href="https://github.com/weareoutman/clockpicker" target="_blank">Weareoutman</a> for effective time picking in Bootstrap 4 with updated styles, <a href="https://jsfiddle.net/djibe89/9wj67d5u/" target="_blank">see the Clockpicker for Bootstrap 4 demo</a>.

![Clockpicker screen](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/clockpicker.gif)

### Date picker

Use the built-in datepicker from Daemonite material UI for effective date picking, see the Daemonite documentation <a href="http://daemonite.github.io/material/docs/4.1/material/pickers/" target="_blank">here</a>

![Datepicker screen](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/datepicker.gif)

### DateTime picker

I updated bootstrap Material Datetimepicker by t00rk plugin for effective date and time picking, see the fork <a href="https://github.com/djibe/bootstrap-material-datetimepicker" target="_blank">here</a>
  
See the Bootstrap 4 demo <a href="http://jsfiddle.net/djibe89/qfkjg3qh/" target="_blank">here</a>
  
See the Bootstrap 4 demo with material UI here : <a href="http://jsfiddle.net/djibe89/t5sqqw8L/" target="_blank">here</a>

![Datetimepicker screen](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/datetimepicker.gif)

### Drag and drop files for upload

I chose <a href="http://www.dropzonejs.com/" target="_blank">DropzoneJS</a> plugin to enhence file upload, then I gave it a mterial look. See the <a href="http://jsfiddle.net/djibe89/2w716qgy/" target="_blank">Bootstrap 4 tutorial and demo here</a>.

![DropzoneJS in material UI](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/dropzone.png)

***

## Scrollbar - smooth and design

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

See the <a href="http://jsfiddle.net/djibe89/oeftjL20/" target="_blank">Bootstrap 4 demo here</a>.
  
![Custom scrollbar screen](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/custom-scrollbar.gif)

## 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](https://jsfiddle.net/djibe89/g5nz7kmo).

![Material design HTML5 range sliders](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/range-sliders-material.gif)

### Material design theme for ionRangeSlider plugin

My material design theme for [ionRangeSlider plugin](https://github.com/IonDen/ion.rangeSlider). jQuery dependency.
Play with [material theme demo for ionRangeSlider](https://djibe.github.io/material/docs/4.5/plugins/sliders-ionrangeslider/).

## Right click menu

Want a context menu for your site ?

<a href="https://jsfiddle.net/djibe89/qej2ppcq/" target="_blank">See the tutorial and demo for a context menu - right click menu using Bootstrap 4</a>
  
![Bootstrap 4 Right click menu](https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/master/images/right-click.gif)

## Other utilities for Bootstrap 4

WIP, to be delivered :

- Sticky content

Bootstrap-4-Advanced-Components

Bootstrap-4-Advanced-Components 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Bootstrap-4-Advanced-Components

Bootstrap-4-Advanced-Components 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README