Journey With Bootstrap : Day 4 (Dropdown Buttons)

Sanjay Singh
7y
11.1k
0
3

Article

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:

<!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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 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>
.frm
{
margin:20%;
}
</style>
</head>
<body>
<form class="frm">
<div class="container">
<br />
<div class="btn-group dropup">
<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 dropup">
<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 dropup">
<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 dropup">
<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 dropup">
<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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 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>
.frm
{
margin:20%;
}
</style>
</head>
<body>
<form class="frm">
<div class="container">
<br />
<div class="btn-group">
<button type="button" class="btn btn-default">Default </button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<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">primary </button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<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">Default </button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<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">success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<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">warning </button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
<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>