Get started with feastSelect, Let`s give <select> tags a nice Looking.


feastSelect work with bootstrap 3.x and 4.x, So it's compatible with any browser work with bootstrap.

feastSelect has been tested in following browsers/devices:

  • Chrome
  • Firefox
  • IE10/11
  • Edge
  • iOS Safari
  • Android 7.0 Tablet


You can install feastSelect by linking .css and .js files to your html file. Make sure you also load the jQuery library. Below is a basic HTML template to use as an example:

<!DOCTYPE html>
  <meta charset="utf-8">
  <title>My page</title>
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="feastSelect.css">

  <!-- Your HTML content goes here -->

  <!-- JS -->
  <script src="//"></script>
  <script src=""></script>
  <script src="feastSelect.js"></script>

Download feastSelect

Download the latest version of feastSelect on GitHub.
Or You can download it from the plugin website directly- Direct Download.

Package Managers


  • Make sure you add the jQuery and Bootstrap libraries before the feastSelect JS file
  • If you already have jQuery and Bootstrap on your page, you shouldn't include it second time
  • We recommended to using name attribute to skip any bugs

How to Use

Initialize with data attributes

The most basic way to use feastSelect is by adding the data-feast-select attribute to your element. This will automatically replace the current select with dropdown menu. Use data-btn-text attribute to Change the button text. Example:

<select class="form-control" name="example" data-feast-select data-btn-text="Select an option">
  <option>Select option<option>
  <option value="1">Option 1<option>
  <option value="2">Option 2<option>
  <option value="3">Option 3<option>


  • Any option tag without or with empty value attribute will be removed automatically

Initialize with JavaScript

Select your elements with a jQuery selector (you can use any valid selector) and call the feastSelect method:

	// Options will go here
  btnText: 'Select an option',
  btnClass: 'my-custom-class' // you don't need to add btn class here


If you call the plugin from JavaScript and data attribute, the data attribute will skiped

Live Example

Calling The plugin from data attribute with default options

The plugin accepted icons with options to set icon class add it like this data-icon="fa fa-home" to the option tag, you can change icon place (right, left) see options

<select class="form-control" data-feast-select>
  <option>Select option</option>
  <option value="1" data-icon="fa fa-home">Option 1</option>
  <option value="2" data-icon="fa fa-user">Option 2</option>
  <option value="3" data-icon="fa fa-cog">Option 3</option>

Calling The plugin from data attribute with custom options

<select class="form-control" data-feast-select data-btn-text="Select category" data-btn-class="btn-lg btn-danger">
  <option>Select option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>

Calling The plugin from JavaScript with fade effect

<script type="text/javascript">
    showEffect: 'fadeIn',
    hideEffect: 'fadeOut'

Calling The plugin from JavaScript with custom class and show original select tag

Try to change both dropdown menu and select tag

<script type="text/javascript">
    btnText: 'List the options',
    hideOriginal: false


To change the dropdown menu css for specific select you can use the example code below:

// For change a specific select style 
.yourCustomClass {
    /* Button styles here */

.yourCustomClass + .dropdown-menu {   

    /* Dropdown styles here */


// For change all dropdown button style
button[class*="feastSelect_"] {   

    /* Dropdown styles here */

// For change all dropdown style
ul[class*="feastSelect_"] {   

    /* Dropdown styles here */


Multiple select tags

<script type="text/javascript">
  $('.example3 select').FeastSelect({
    btnText: 'List the options',


Quick reference for the default options as defined in the source:

// Default options
var defaults = {
    btnClass      : 'btn-info',
    btnText       : 'Select your option',
    showEffect    : 'slideDown', // fade, hide, slideDown
    hideEffect    : 'slideUp', // fade, hide, slideDown
    iconPlace     : 'left', // left or right
    hideOriginal  : true

Accepted data attributes for options:

  1. data-btn-class
  2. data-btn-text
  3. data-show-effect
  4. data-hide-effect
  5. data-icon-place
  6. data-icon (for option tags only)


option hideOriginal accepted in JavaScript only not from data attribute

Set instance options by passing a valid object to feastSelect() method:

	hideOriginal : false


FeastChecker is using this awesome libraries

Back to Top