Selectize Theme for Bootstrap 4
Selectize Theme (SCSS) based on the Bootstrap 4 components.
Table of Contents
- Download the latest release
- Clone the repo:
git clone firstname.lastname@example.org:const-se/selectize-bootstrap4-theme.git
- Install with npm:
npm install selectize-bootstrap4-theme
- Install with yarn:
yarn add selectize-bootstrap4-theme
- Install with composer:
composer require const-se/selectize-bootstrap4-theme
Import the theme into your SCSS:
form-control to your
<select> and apply Selectize.
<select id="selectized" class="form-control"> <option value="1">Some value</option> <!-- Other options --> </select> <script> $('#selectized').selectize(); </script>
Selectize Theme styles will be added to
Theming is accomplished by Sass variables and custom CSS. The Bootstrap theme based on built-in Bootstrap variables is used by default.
Every Selectize variable includes the
allowing you to override the variable's default value in your SCSS
without modifying source code of the theme.
Copy and paste variables as needed, modify their values, and remove
If a variable has already been assigned, then it won't be re-assigned by the default values.
You will find the complete list of Selectize variables in
Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Selectize Theme's Sass files.
Here's an example that changes the
background-color for the Selectize input:
// Your variable overrides $selectize-input-bg: #111; // Selectize Theme and its default variables @import "node_modules/selectize-bootstrap4-theme/scss/selectize.bootstrap4";
Clone the repo and open
dist/examples.html to see examples of Bootstrap 4 Selectize inputs.