Skip to content
Learn to use Bootstrap select (dropdown): 3 demos
In This Tutorial
Bootstrap Select
The Bootstrap framework includes a number of CSS classes related to building HTML forms with Bootstrap in your web documents. By simply including classes into <form> tag or <input> types you can build beautiful forms using Bootstrap for a website that is responsive to all kind of devices as well.
The dropdown is created by using the <select> tag that uses CSS class provided by Bootstrap to make it look beautiful. You can create a select dropdown where a user can select just one option or multiple options. Examples of creating both types with different classes are shown below.
Example of a basic select with single select option
Following example shows how to create a Bootstrap select dropdown with single selection option. For illustration, we have created another dropdown without Bootstrap class (form-control) to show the difference.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html>
<head>
<title>select example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Bootstrap dropdown example</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</body>
</html>
|
By default, the select in Bootstrap will take the full available width while using Bootstrap CSS class. For smaller size see example below.
Example of select with smaller size in Bootstrap form
Following example shows how to use select, that is smaller in size with other form elements.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<!DOCTYPE html>
<html>
<head>
<title>select example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Bootstrap dropdown example</h1>
<form class=“form-horizontal” role=“form”>
<div class=“form-group”>
<label for=“name1”>Name</label>
<div class=“col-sm-5”>
<input type=“email” id=“name1” placeholder=“Full Name”>
</div>
</div>
<div class=“form-group”>
<label for=“gender1”>Gender</label>
<div class=“col-sm-2”>
<select class=“form-control” id=“gender1”>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class=“form-group”>
<label for=“email1”>Email</label>
<div class=“col-sm-5”>
<input type=“email” class=“form-control” id=“email1” placeholder=“Email”>
</div>
</div>
<div class=“form-group”>
<label for=“password1”>Password</label>
<div class=“col-sm-5”>
<input type=“password” id=“password1” placeholder=“Password”>
</div>
</div>
<div class=“form-group”>
<label for=“address1”>Address</label>
<div class=“col-sm-5”>
<input type=“email” id=“address1” placeholder=“Address”>
</div>
</div>
<div class=“form-group”>
<div class=“col-sm-offset-2 col-sm-10”>
<div class=“checkbox”>
<label>
<input type=“checkbox”> Remember me
</label>
</div>
</div>
</div>
<div class=“form-group”>
<div class=“col-sm-offset-2 col-sm-10”>
<button type=“submit”>Create Account</button>
</div>
</div>
</form>
</div>
</body>
</html>
|
You can see, a “Create account” form with Gender dropdown. The size of the dropdown is set by using “col-sm-2” class. If you want to increase or decrease the size, try it by increasing or decreasing number from 2 to other. A bigger number means larger size.
Bootstrap Select with multiple option selection
You can create twitter bootstrap select with multiple selection options by adding “multiple” attribute just like in other HTML forms. See example below:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<title>select example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>select example</h1>
<select multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</body>
</html>
|
Just like other forms, press the Ctrl key for selecting multiple options.
Useful links: Twitter Bootstrap Tutorial | Bootstrap table| Bootstrap Form
Leave A Comment?