드롭다운 샘플 <div class ="dropdown" >
<button class ="btn btn-secondary dropdown-toggle" type ="button" id ="dropdownMenuButton" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Dropdown button
</button >
<div class ="dropdown-menu" aria-labelledby ="dropdownMenuButton" >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<a class ="dropdown-item" href ="#" > Something else here</a >
</div >
</div >
<div class ="dropdown" >
<a class ="btn btn-secondary dropdown-toggle" href ="#" role ="button" id ="dropdownMenuLink" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Dropdown link
</a >
<div class ="dropdown-menu" aria-labelledby ="dropdownMenuLink" >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<a class ="dropdown-item" href ="#" > Something else here</a >
</div >
</div >
<div class ="btn-group" >
<button type ="button" class ="btn btn-danger dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Action
</button >
<div class ="dropdown-menu" >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<a class ="dropdown-item" href ="#" > Something else here</a >
<div class ="dropdown-divider" > </div >
<a class ="dropdown-item" href ="#" > Separated link</a >
</div >
</div >
버튼 분리형 <div class ="btn-group" >
<button type ="button" class ="btn btn-danger" > Action</button >
<button type ="button" class ="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle Dropdown</span >
</button >
<div class ="dropdown-menu" >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<a class ="dropdown-item" href ="#" > Something else here</a >
<div class ="dropdown-divider" > </div >
<a class ="dropdown-item" href ="#" > Separated link</a >
</div >
</div >
사이즈 Large button
Large split button Toggle Dropdown
Small button
Small split button Toggle Dropdown
<!-- Large button groups (default and split) -->
<div class ="btn-group" >
<button class ="btn btn-secondary btn-lg dropdown-toggle" type ="button" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Large button
</button >
<div class ="dropdown-menu" >
...
</div >
</div >
<div class ="btn-group" >
<button class ="btn btn-secondary btn-lg" type ="button" >
Large split button
</button >
<button type ="button" class ="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle Dropdown</span >
</button >
<div class ="dropdown-menu" >
...
</div >
</div >
<!-- Small button groups (default and split) -->
<div class ="btn-group" >
<button class ="btn btn-secondary btn-sm dropdown-toggle" type ="button" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Small button
</button >
<div class ="dropdown-menu" >
...
</div >
</div >
<div class ="btn-group" >
<button class ="btn btn-secondary btn-sm" type ="button" >
Small split button
</button >
<button type ="button" class ="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle Dropdown</span >
</button >
<div class ="dropdown-menu" >
...
</div >
</div >
방향 Dropup
Split dropup Toggle Dropdown
<!-- Default dropup button -->
<div class ="btn-group dropup" >
<button type ="button" class ="btn btn-secondary dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Dropup
</button >
<div class ="dropdown-menu" >
<!-- Dropdown menu links -->
</div >
</div >
<!-- Split dropup button -->
<div class ="btn-group dropup" >
<button type ="button" class ="btn btn-secondary" >
Split dropup
</button >
<button type ="button" class ="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle Dropdown</span >
</button >
<div class ="dropdown-menu" >
<!-- Dropdown menu links -->
</div >
</div >
Dropright
Split dropright Toggle Dropright
<!-- Default dropright button -->
<div class ="btn-group dropright" >
<button type ="button" class ="btn btn-secondary dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Dropright
</button >
<div class ="dropdown-menu" >
<!-- Dropdown menu links -->
</div >
</div >
<!-- Split dropright button -->
<div class ="btn-group dropright" >
<button type ="button" class ="btn btn-secondary" >
Split dropright
</button >
<button type ="button" class ="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle Dropright</span >
</button >
<div class ="dropdown-menu" >
<!-- Dropdown menu links -->
</div >
</div >
Dropleft
Toggle Dropleft
Split dropleft <!-- Default dropleft button -->
<div class ="btn-group dropleft" >
<button type ="button" class ="btn btn-secondary dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Dropleft
</button >
<div class ="dropdown-menu" >
<!-- Dropdown menu links -->
</div >
</div >
<!-- Split dropleft button -->
<div class ="btn-group" >
<div class ="btn-group dropleft" role ="group" >
<button type ="button" class ="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
<span class ="sr-only" > Toggle Dropleft</span >
</button >
<div class ="dropdown-menu" >
<!-- Dropdown menu links -->
</div >
</div >
<button type ="button" class ="btn btn-secondary" >
Split dropleft
</button >
</div >
메뉴 아이템 <div class ="dropdown" >
<button class ="btn btn-secondary dropdown-toggle" type ="button" id ="dropdownMenu2" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Dropdown
</button >
<div class ="dropdown-menu" aria-labelledby ="dropdownMenu2" >
<button class ="dropdown-item" type ="button" > Action</button >
<button class ="dropdown-item" type ="button" > Another action</button >
<button class ="dropdown-item" type ="button" > Something else here</button >
</div >
</div >
<div class ="dropdown" >
<button class ="btn btn-secondary dropdown-toggle" type ="button" id ="dropdownMenu2" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Dropdown
</button >
<div class ="dropdown-menu" aria-labelledby ="dropdownMenu2" >
<button class ="dropdown-item" type ="button" > Action</button >
<button class ="dropdown-item" type ="button" > Another action</button >
<button class ="dropdown-item" type ="button" > Something else here</button >
</div >
</div >
<div class ="dropdown-menu" >
<span class ="dropdown-item-text" > Dropdown item text</span >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<a class ="dropdown-item" href ="#" > Something else here</a >
</div >
활성 상태 표현
<div class ="dropdown-menu" >
<a class ="dropdown-item" href ="#" > Regular link</a >
<a class ="dropdown-item active" href ="#" > Active link</a >
<a class ="dropdown-item" href ="#" > Another link</a >
</div >
비활성 상태 표현
<div class ="dropdown-menu" >
<a class ="dropdown-item" href ="#" > Regular link</a >
<a class ="dropdown-item disabled" href ="#" tabindex ="-1" aria-disabled ="true" > Disabled link</a >
<a class ="dropdown-item" href ="#" > Another link</a >
</div >
메뉴 정렬 <div class ="btn-group" >
<button type ="button" class ="btn btn-secondary dropdown-toggle" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" >
Right-aligned menu
</button >
<div class ="dropdown-menu dropdown-menu-right" >
<button class ="dropdown-item" type ="button" > Action</button >
<button class ="dropdown-item" type ="button" > Another action</button >
<button class ="dropdown-item" type ="button" > Something else here</button >
</div >
</div >
반응형 대응 정렬 Left-aligned but right aligned when large screen
<div class ="btn-group" >
<button type ="button" class ="btn btn-secondary dropdown-toggle" data-toggle ="dropdown" data-display ="static" aria-haspopup ="true" aria-expanded ="false" >
Left-aligned but right aligned when large screen
</button >
<div class ="dropdown-menu dropdown-menu-lg-right" >
<button class ="dropdown-item" type ="button" > Action</button >
<button class ="dropdown-item" type ="button" > Another action</button >
<button class ="dropdown-item" type ="button" > Something else here</button >
</div >
</div >
Right-aligned but left aligned when large screen
<div class ="btn-group" >
<button type ="button" class ="btn btn-secondary dropdown-toggle" data-toggle ="dropdown" data-display ="static" aria-haspopup ="true" aria-expanded ="false" >
Left-aligned but right aligned when large screen
</button >
<div class ="dropdown-menu dropdown-menu-lg-right" >
<button class ="dropdown-item" type ="button" > Action</button >
<button class ="dropdown-item" type ="button" > Another action</button >
<button class ="dropdown-item" type ="button" > Something else here</button >
</div >
</div >
메뉴 컨텐트 헤더 <div class ="dropdown-menu" >
<h6 class ="dropdown-header" > Dropdown header</h6 >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
</div >
구분선 <div class ="dropdown-menu" >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<a class ="dropdown-item" href ="#" > Something else here</a >
<div class ="dropdown-divider" > </div >
<a class ="dropdown-item" href ="#" > Separated link</a >
</div >
텍스트 <div class ="dropdown-menu p-4 text-muted" style ="max-width: 200px;" >
<p >
Some example text that's free-flowing within the dropdown menu.
</p >
<p class ="mb-0" >
And this is more example text.
</p >
</div >
폼 <div class ="dropdown-menu" >
<form class ="px-4 py-3" >
<div class ="form-group" >
<label for ="exampleDropdownFormEmail1" > Email address</label >
<input type ="email" class ="form-control" id ="exampleDropdownFormEmail1" placeholder ="email@example.com" >
</div >
<div class ="form-group" >
<label for ="exampleDropdownFormPassword1" > Password</label >
<input type ="password" class ="form-control" id ="exampleDropdownFormPassword1" placeholder ="Password" >
</div >
<div class ="form-group" >
<div class ="form-check" >
<input type ="checkbox" class ="form-check-input" id ="dropdownCheck" >
<label class ="form-check-label" for ="dropdownCheck" >
Remember me
</label >
</div >
</div >
<button type ="submit" class ="btn btn-primary" > Sign in</button >
</form >
<div class ="dropdown-divider" > </div >
<a class ="dropdown-item" href ="#" > New around here? Sign up</a >
<a class ="dropdown-item" href ="#" > Forgot password?</a >
</div >
<form class ="dropdown-menu p-4" >
<div class ="form-group" >
<label for ="exampleDropdownFormEmail2" > Email address</label >
<input type ="email" class ="form-control" id ="exampleDropdownFormEmail2" placeholder ="email@example.com" >
</div >
<div class ="form-group" >
<label for ="exampleDropdownFormPassword2" > Password</label >
<input type ="password" class ="form-control" id ="exampleDropdownFormPassword2" placeholder ="Password" >
</div >
<div class ="form-group" >
<div class ="form-check" >
<input type ="checkbox" class ="form-check-input" id ="dropdownCheck2" >
<label class ="form-check-label" for ="dropdownCheck2" >
Remember me
</label >
</div >
</div >
<button type ="submit" class ="btn btn-primary" > Sign in</button >
</form >
드롭다운 옵션 <div class ="d-flex" >
<div class ="dropdown mr-1" >
<button type ="button" class ="btn btn-secondary dropdown-toggle" id ="dropdownMenuOffset" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" data-offset ="10,20" >
Offset
</button >
<div class ="dropdown-menu" aria-labelledby ="dropdownMenuOffset" >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<a class ="dropdown-item" href ="#" > Something else here</a >
</div >
</div >
<div class ="btn-group" >
<button type ="button" class ="btn btn-secondary" > Reference</button >
<button type ="button" class ="btn btn-secondary dropdown-toggle dropdown-toggle-split" id ="dropdownMenuReference" data-toggle ="dropdown" aria-haspopup ="true" aria-expanded ="false" data-reference ="parent" >
<span class ="sr-only" > Toggle Dropdown</span >
</button >
<div class ="dropdown-menu" aria-labelledby ="dropdownMenuReference" >
<a class ="dropdown-item" href ="#" > Action</a >
<a class ="dropdown-item" href ="#" > Another action</a >
<a class ="dropdown-item" href ="#" > Something else here</a >
<div class ="dropdown-divider" > </div >
<a class ="dropdown-item" href ="#" > Separated link</a >
</div >
</div >
</div >