Select
Bootstrap 4 Select with Material Design UI
Select is a form-control that allows user to select a value from a set of available options that open as a dropdown.
Bootstrap 4 Select
Bootstrap 4 provides 2 types of select - basic and custom. For basic select, use class .form-control in the <select> tag. For custom select, use .custom-select in the <select> tag.
Propeller Select
Propeller Select consists of Bootstrap 4 HTML structure with Propeller customized classes based on material design standards.
Add .pmd-textfield and .pmd-textfield-floating-label to the parent div to customize Bootstrap 4 select into Propeller select which contains a line which is focused and a label that floats when the user selects it.
Propeller Outline Select
Use .pmd-textfield-outline next to .pmd-textfield to create an outline select.
Propeller Filled Select
Use .pmd-textfield-filled next to .pmd-textfield to create a select with filled background.
Propeller Select without Floating Label
Remove .pmd-textfield-floating-label class to remove the floating effect in the select .
Select Sizes
Bootstrap 4 provides select in various sizes: small, default and large. Add class .col-form-label-lg in <label> tag and .form-control-lg in <input> tag to create a large select while add class .col-form-label-sm in <label> tag and .form-control-sm in <input> tag to create a small select.
Propeller Custom Select
Wrap Bootstrap 4 custom select with a <div> having classes .form-group, .pmd-textfield and .pmd-textfield-floating-label to create Propeller customized Custom Select.
Propeller Outline Custom Select
Add the class .pmd-textfield-outline to the wrapper <div> tag having classes .form-group, .pmd-textfield and .pmd-textfield-floating-label to create Propeller Outline Custom Select.
Propeller Filled Custom Select
Add the class .pmd-textfield-filled to the wrapper <div> tag having classes .form-group, .pmd-textfield and .pmd-textfield-floating-label to create Propeller Filled Custom Select.
Inverse Select
Use .bg-dark and .text-white to the card structure to create an inverse form.
Select Validation
Configuration Options
The table lists some HTML attributes that are required for positioning and styling of select.
| Propeller Class | Effect | Remark |
|---|---|---|
.pmd-textfield |
Class added for general label and input formatting. | Required |
.pmd-textfield-floating-label |
Adds floating animation to the label of input | Optional |
.pmd-textfield-outline |
Add this class to create Propeller outline input | Optional |
.pmd-textfield-filled |
Add this class to create Propeller filled input | Optional |
jQuery Plugin
Call the jQuery plugin to initialize select while fetching the data dynamically.