Dropdowns

Simple Dropdowns

Button Dropdown
Link Dropdown
1
<div class="dropdown d-inline-block">
2
3
<!-- Dropdown Button -->
4
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Dropdown button
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
</div>
15
<!-- /dropdown menu -->
16
17
</div>
Copied!
1
<div class="dropdown d-inline-block">
2
3
<!-- Dropdown Link -->
4
<a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
5
link</a>
6
<!-- /dropdown link -->
7
8
<!-- Dropdown Menu -->
9
<div class="dropdown-menu">
10
<a class="dropdown-item" href="javascript:void(0)">Action</a>
11
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
13
</div>
14
<!-- /dropdown menu -->
15
16
</div>
Copied!

Various Color Dropdowns

Primary
Secondary
Success
Warning
Danger
Light
Dark
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Primary
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Secondary
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Success
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Warning
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Danger
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Light
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Dark
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!

Sizes

Default
Large
Small
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Primary
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Primary
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Primary
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
<div class="dropdown-divider"></div>
15
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
16
</div>
17
<!-- /dropdown menu -->
18
19
</div>
Copied!

Directions

Up
Down
Right
Left
1
<div class="btn-group dropup">
2
3
<!-- Dropdown Button -->
4
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Dropup button
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
</div>
15
<!-- /dropdown menu -->
16
17
</div>
Copied!
1
<div class="btn-group dropdown">
2
3
<!-- Dropdown Button -->
4
<button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
5
Offset
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
</div>
15
<!-- /dropdown menu -->
16
17
</div>
Copied!
1
<div class="btn-group dropright">
2
3
<!-- Dropdown Button -->
4
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Dropup button
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
</div>
15
<!-- /dropdown menu -->
16
17
</div>
Copied!
1
<div class="btn-group dropleft">
2
3
<!-- Dropdown Button -->
4
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5
Dropleft button
6
</button>
7
<!-- /dropdown button -->
8
9
<!-- Dropdown Menu -->
10
<div class="dropdown-menu">
11
<a class="dropdown-item" href="javascript:void(0)">Action</a>
12
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
14
</div>
15
<!-- /dropdown menu -->
16
17
</div>
Copied!
Last modified 1yr ago