Quick Start
This guide will get you up and running with a basic bootstrap-select implementation in just a few steps.
1. HTML Setup
First, create a basic HTML file. You need to include jQuery, Bootstrap's CSS and JS, and the bootstrap-select CSS and JS files. The easiest way to do this is via a CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Select Quick Start</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Bootstrap-select CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
</head>
<body>
<div class="container py-5">
<h1>My Awesome Form</h1>
<form>
<div class="form-group">
<label for="my-select">Choose your condiment:</label>
<select id="my-select" class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>
</div>
</form>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Popper.js (Required for Bootstrap 4) -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap-select JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
<script>
// Initialize bootstrap-select
$(function () {
$('.selectpicker').selectpicker();
});
</script>
</body>
</html>2. Initialization
There are two ways to initialize the plugin:
Via data- attributes
The simplest way to initialize bootstrap-select is by adding the .selectpicker class to a <select> element. The plugin will automatically find and initialize all elements with this class.
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>Via JavaScript
You can also initialize the plugin manually on any select element.
// To style a specific select element
$('#my-select').selectpicker();
// Or to style all select elements on the page
$('select').selectpicker();If you initialize via JavaScript, make sure your script is placed at the end of the <body> tag or wrapped in a $(document).ready() block to ensure the DOM is fully loaded before the script runs.
$(function () {
$('select').selectpicker();
});