Quick Reach
- 1 Buttons in Bootstrap
- 2 A few quick button examples
- 3 Creating a simple button with Bootstrap
- 4 Bootstrap buttons example with other btn classes
- 5 Creating button as a link example
- 6 Button sizes
- 7 Bootstrap Active button example
- 8 Bootstrap Disabled button example
- 9 Button dropdown example
- 10 Related
Buttons in Bootstrap
The Bootstrap framework enables you to create buttons in your web pages beautifully and easily; by simply using available classes. This tutorial shows how to create Bootstrap buttons with different CSS classes. Also, you will see button dropdown – acting as the menu example at the end of this chapter.
buttons example with different styles
Creating button as a link example
Small and large size button example
The following example shows how to create a simple button in your web page using Bootstrap button class. The class available for buttons is “btn” and then you can add button style’s predefined classes. Following example uses the btn-default class.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>Example of Buttons</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Button Example</h1>
<!– Default button –>
<button type=“button”>Default</button>
</div>
</body>
</html>
|
As you can see, a button is created by <button> tag and a Bootstrap CSS class is added, which is: btn btn-default.
Following example is using other btn classes to create more buttons. The following classes are used with the main btn class to create buttons:
- btn-primary
- btn btn-success
- btn btn-info
- btn btn-warning
- btn btn-danger
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html>
<head>
<title>Example of Buttons</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Button Example</h1>
<!– Standard button –>
<button type=“button”>Default Button</button>
<!– Provides extra visual weight and identifies the primary action in a set of buttons –>
<button type=“button”>Primary Style Button</button>
<!– Indicates a successful or positive action –>
<button type=“button”>Success Style Button</button>
<!– Contextual button for informational alert messages –>
<button type=“button”>Info Style Button</button>
<!– Indicates caution should be taken with this action –>
<button type=“button”>Warning Style Button</button>
<!– Indicates a dangerous or potentially negative action –>
<button type=“button”>Danger Style Button</button>
</div>
</body>
</html>
|
You can create a button as a link by using the btn-link class with the btn class. Following example creates a button as a link. Note that the link still acts like a button. Only its appearance is like a link.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<title>Example of Buttons Bootstrap</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Button Example</h1>
<button type=“button”>Button appearing as link</button>
</div>
</body>
</html>
|
Button sizes
You can set button sizes by using available classes in the Bootstrap. Use following classes to set button sizes:
- btn-lg – for the large size button
- btn-sm – for the small size button
- btn-xs – for the extra small size button
See the following example for different sizes of buttons.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<title>Example of Button in Bootstrap</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Button Example</h1>
<p>
<button type=“button”>Large info button</button>
<button type=“button”>Normal/Default button</button>
<button type=“button”>Small info button</button>
<button type=“button”>Extra small info button</button>
</p>
</div>
</body>
</html>
|
You can use the active class in button to make it look as the active state which is darker background, darker border and inset shadow.
See the following example with the active state of buttons that we used in the above example.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!DOCTYPE html>
<html>
<head>
<title>Example of Buttons</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Button Example</h1>
<p> Normal Buttons
<!– Standard button –>
<button type=“button”>Default Button</button>
<!– Provides extra visual weight and identifies the primary action in a set of buttons –>
<button type=“button”>Primary Style Button</button>
<!– Indicates a successful or positive action –>
<button type=“button”>Success Style Button</button>
<!– Contextual button for informational alert messages –>
<button type=“button”>Info Style Button</button>
<!– Indicates caution should be taken with this action –>
<button type=“button”>Warning Style Button</button>
<!– Indicates a dangerous or potentially negative action –>
<button type=“button”>Danger Style Button</button>
</p>
<p> Active Buttons
<!– Standard button –>
<button type=“button”>Default Button</button>
<!– Provides extra visual weight and identifies the primary action in a set of buttons –>
<button type=“button”>Primary Style Button</button>
<!– Indicates a successful or positive action –>
<button type=“button”>Success Style Button</button>
<!– Contextual button for informational alert messages –>
<button type=“button”>Info Style Button</button>
<!– Indicates caution should be taken with this action –>
<button type=“button”>Warning Style Button</button>
<!– Indicates a dangerous or potentially negative action –>
<button type=“button”>Danger Style Button</button>
</p>
</div>
</body>
</html>
|
You can see the difference in the example. The first row showed the buttons without active class while next row showed the buttons using the active class.
Following example uses the disabled attribute of button tag to make the text button look disabled. To understand the difference, the first row of the buttons are shown as normal while the second row contains disabled buttons.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!DOCTYPE html>
<html>
<head>
<title>Example of Buttons</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Button Example</h1>
<p> Normal Buttons
<!– Standard button –>
<button type=“button”>Default Button</button>
<!– Provides extra visual weight and identifies the primary action in a set of buttons –>
<button type=“button”>Primary Style Button</button>
<!– Indicates a successful or positive action –>
<button type=“button”>Success Style Button</button>
<!– Contextual button for informational alert messages –>
<button type=“button”>Info Style Button</button>
<!– Indicates caution should be taken with this action –>
<button type=“button”>Warning Style Button</button>
<!– Indicates a dangerous or potentially negative action –>
<button type=“button”>Danger Style Button</button>
</p>
<p> Disabled Buttons
<!– Standard button –>
<button type=“button” disabled=“disabled”>Default Button</button>
<!– Provides extra visual weight and identifies the primary action in a set of buttons –>
<button type=“button” disabled=“disabled”>Primary Style Button</button>
<!– Indicates a successful or positive action –>
<button type=“button” disabled=“disabled”>Success Style Button</button>
<!– Contextual button for informational alert messages –>
<button type=“button” disabled=“disabled”>Info Style Button</button>
<!– Indicates caution should be taken with this action –>
<button type=“button” disabled=“disabled”>Warning Style Button</button>
<!– Indicates a dangerous or potentially negative action –>
<button type=“button” disabled=“disabled”>Danger Style Button</button>
</p>
</div>
</body>
</html>
|
Button dropdown example
You can also create button dropdown quite easily by using the wrapping button in btn-group class. See the following example:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<!DOCTYPE html>
<html>
<head>
<title>A subscription Bootstrap modal example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Bootstrap dropdown example</h1>
<!– Single button –>
<div class=“btn-group”>
<button type=“button” data-toggle=“dropdown”>
Button Dropdown Example <span></span>
</button>
<ul class=“dropdown-menu” role=“menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
<!– Single button –>
<div class=“btn-group”>
<button type=“button” data-toggle=“dropdown”>
Button Dropdown Example <span></span>
</button>
<ul class=“dropdown-menu” role=“menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
<!– Single button –>
<div class=“btn-group”>
<button type=“button” class=“btn btn-danger dropdown-toggle” data-toggle=“dropdown”>
Button Dropdown Example <span></span>
</button>
<ul class=“dropdown-menu” role=“menu”>
<li><a href=“#”>Item 1</a></li>
<li><a href=“#”>Item 2</a></li>
<li><a href=“#”>Item 3</a></li>
<li class=“divider”></li>
<li><a href=“#”>Item 4</a></li>
</ul>
</div>
</div>
</body>
</html>
|
To learn more about button dropdown in the menu and to create a Split button dropdown, go to the Bootstrap dropdown chapter.
Useful links: Twitter Bootstrap Tutorial | Bootstrap Table | Bootstrap CSS | Bootstrap Form
Leave A Comment?