As I promised in Day 3 of our journey that in my next article I'll explain Bootstrap Dropdown Buttons so here I'll explain Bootstrap Dropdown on Day 4 of our journey.
Syntax of Button
- <button type="button" class="btn btn-size">
- <span class="glyphicon glyphicon-name"></span></button>
- Default
- Info
- Primary
- Danger
- success
- warning
Default Button Syntax
- <button type=”button” class=”btn btn-default btn-size”>
- Default
- </button>
Info Button Syntax
- <button type=”button” class=”btn btn-Info btn-size”>
- Info
- </button>
Primary Button Syntax
- <button type=”button” class=”btn btn-primary btn-size”>
- Primary
- </button>
- <button type=”button” class=”btn btn-Danger btn-size”>
- Danger
- </button>
- <button type=”button” class=”btn btn-Success btn-size”>
- Success
- </button>
Warning Button Syntax
- <button type=”button” class=”btn btn-Warning btn-size”>
- Warning
- </button>
Example
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html
- xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Day 4</title>
- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
- <script src="bootstrap/js/bootstrap.min.js"></script>
- </head>
- <body>
- <form>
- <div class="container">
- <br />
- <button type="button" class="btn btn-default btn-md">Default</button>
- <button type="button" class="btn btn-info btn-md">Info</button>
- <button type="button" class="btn btn-primary btn-md">Primary</button>
- <button type="button" class="btn btn-danger btn-md">Danger</button>
- <button type="button" class="btn btn-success btn-md">Success</button>
- <button type="button" class="btn btn-warning btn-md">Warning</button>
- </div>
- </form>
- </body>
- </html>
Output
The given output is just a simple bootstrap button but to make it a dropdown button, we need to add some pre-defined tags of bootstrap.
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
And in the <ul> tag we need to add a class:
- <ul class="dropdown-menu" role="menu">
For example:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Bootstrap 3 Dropdowns </title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
- </style>
- </head>
- <body>
- <form>
- <div class="container">
- <br />
- <div class="btn-group">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
- Default
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li class="divider"></li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- </ul>
- </div>
- <div class="btn-group">
- <button type="button" class="btn btn-primary dropdown-toggle"
- data-toggle="dropdown">
- Primary
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li class="divider"></li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- </ul>
- </div>
- <div class="btn-group">
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
- Danger
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- </ul>
- </div>
- <div class="btn-group">
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
- success
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- </ul>
- </div>
- <div class="btn-group">
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
- warning
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- <li>
- <a href="#">C# Corner </a>
- </li>
- </ul>
- </div>
- </div>
- </form>
- </body>
- </html>
Output
If you want to show the dropdown content in the upward direction then add a dropup to the parent class.
- <div class="btn-group dropup">
Example
Joe WilsonPosted Dec 31, 2016, 1:38 PM
Well, Thank you very much.
Tom MohanPosted Mar 30, 2015, 4:38 AM
nice one
Santhakumar MunuswamyPosted Mar 29, 2015, 1:31 PM
Good Work
Khargesh RajputPosted Mar 29, 2015, 2:22 AM
nice
Rahul Kumar SaxenaPosted Mar 29, 2015, 12:20 AM
Nice One..
Gowtham RajamanickamPosted Mar 28, 2015, 12:24 PM
easy to understand
Gowtham RajamanickamPosted Mar 28, 2015, 12:24 PM
nice one...
Vithal WadjePosted Mar 28, 2015, 9:34 AM
nice one keep it up
Manish Kumar ChoudharyPosted Mar 28, 2015, 2:48 AM
Nice work.
Abhishek JaiswalPosted Mar 28, 2015, 2:47 AM
Good work buddy.. keep up that good work! :)
Dinesh BeniwalPosted Mar 28, 2015, 2:28 AM
Thanks Sanjay for sharing.
Kamlesh YadavPosted Mar 28, 2015, 2:24 AM
good job...go for it..:)
Sanjay SinghPosted Mar 28, 2015, 1:29 AM
agree with you @deepa kumari.... but it make your web page awesome
Tom MohanPosted Mar 27, 2015, 7:59 PM
Awesome buttons