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>
Danger Button Syntax
- <button type=”button” class=”btn btn-Danger btn-size”>
- Danger
- </button>
Success Button Syntax
- <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:
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
Output
Now we will split the button into two parts.
To do this we make two buttons, one is for the button with a name and the second button for a glyphicon.
Example
Ok Geeks. I think that is enough for our 4th day of our journey.
In our next day of journeys we will meet with a new concept of Bootstrap.
If you have not yet read my previous articles of bootstrap then read it from:
-
-
-