Bootstrap Basic Tutorial

Bootstrap plugins

Bootstrap Buttons

This chapter will explain how to use Bootstrap buttons through examples. Any element with the class .btn elements will inherit the default appearance of rounded grey buttons. However, Bootstrap provides some options to define button styles, as shown in the following table:

The following styles can be used on <a>, <button>, or <input> elements:

Class	Description	Example
.btn	Add basic styles to the button	Try it
.btn-default	Default/Standard button	Try it
.btn-primary	Original button style (not operated)	Try it
.btn-success	Indicates a successful action	Try it
.btn-info	This style can be used for buttons that pop up information	Try it
.btn-warning	Indicates a button that requires careful operation	Try it
.btn-danger	Indicates a button operation for a dangerous action	Try it
.btn-link	Make the button look like a link (still retains button behavior)	Try it
.btn-lg	Make a large button	Try it
.btn-sm	Make a small button	Try it
.btn-xs	Make an extra small button	Try it
.btn-block	Block-level button (stretches to the parent element10(0% width)	Try it
.active	Button is clicked	Try it
.disabled	Disabled button	Try it

The following example demonstrates all the button classes mentioned above:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button options/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--　Standard button　-->
<button type="button" class="btn btn-<button class="default">Default button</button>/button>
<!--　Provides additional visual effects to identify the original action in a group of buttons　-->
<button type="button" class="btn btn-<button class="primary">Original button</button>/button>
<!--　Indicates a successful or positive action　-->
<button type="button" class="btn btn-<button class="success">Success button</button>/button>
<!--　Contextual button for information warning messages　-->
<button type="button" class="btn btn-<button class="info">Info button</button>/button>
<!--　Indicates an action that should be taken with caution　-->
<button type="button" class="btn btn-<button class="warning">Warning button</button>/button>
<!--　Indicates a dangerous or potentially negative action　-->
<button type="button" class="btn btn-<button class="danger">Danger button</button>/button>
<!--　It does not emphasize that it is a button, looking like a link, but still maintains the button behavior　-->
<button type="button" class="btn btn-<button class="link">Link button</button>/button>
</body>
</html>

Test It Out ‹/›

The result is as shown below:

Button size

The following table lists the classes for obtaining buttons of various sizes:

Class	Description
.btn-lg	This will make the button look larger.
.btn-sm	This will make the button look smaller.
.btn-xs	This will make the button look particularly small.
.btn-block	This will create a block-level button that spans the full width of the parent element.

The following example demonstrates all the button classes mentioned above:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button size/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
　　　<button type="button" class="btn btn-primary　btn-lg">Large original button</button>/button>
　　　<button type="button" class="btn btn-default　btn-lg">Large button</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary">Default size original button</button>/button>
　　　<button type="button" class="btn btn-default">Default size button</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary　btn-sm">Small original button</button>/button>
　　　<button type="button" class="btn btn-default　btn-sm">Small button</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary　btn-xs">Extra small original button</button>/button>
　　　<button type="button" class="btn btn-default　btn-xs">Extra small button</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary　btn-lg btn-<button class="block">Block-level original button</button>/button>
　　　<button type="button" class="btn btn-default　btn-lg btn-<button class="block">Block-level button</button>/button>
</p>
</body>
</html>

Test It Out ‹/›

The result is as shown below:

Button state

Bootstrap provides classes for button states such as active and disabled, which will be explained in detail below.

Active state

When active, the button will appear as pressed (dark background, dark border, shadow).

The following table lists the classes that make the button element and anchor element active:

Element	Class
Button element	Add .active class to display the button as active.
anchor element	Add .active The class is used to display the button as active by targeting the <a> button.

The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button active state/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
	<button type="button" class="btn btn-default　btn-lg　">default button</button>
　　　	<button type="button" class="btn btn-default　btn-lg　active">active button</button>
</p>
<p>
　　　	<button type="button" class="btn btn-primary　btn-lg　">original button</button>
　　　	<button type="button" class="btn btn-primary　btn-lg　active">original active button</button>
</p>
</body>
</html>

Test It Out ‹/›

The result is as shown below:

Disabled state

When you disable a button, its color will fade 50%, and lose the gradient.

The following table lists the classes that make the button element and anchor element disabled:

Element	Class
Button element	Add disabled Attribute to <button> button.
anchor element	Add disabled class to <a> button.

The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button disabled state/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
　　　<button type="button" class="btn btn-default　btn-lg">default button</button>
　　　<button type="button" class="btn btn-default　btn-lg"　disabled="disabled">disabled button</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary　btn-lg　">original button</button>
　　　<button type="button" class="btn btn-primary　btn-lg"　disabled="disabled">disabled original button</button>
</p>
<p>
　　　<a href="#" class="btn btn-default　btn-lg"　role="button">link</a>
　　　<a href="#" class="btn btn-default　btn-lg　disabled"　role="button">disabled link</a>
</p>
<p>
　　　<a href="#" class="btn btn-primary　btn-lg"　role="button">original link</a>
　　　<a href="#" class="btn btn-primary　btn-lg　disabled"　role="button">disabled original link</a>
</p>
</body>
</html>

Test It Out ‹/›

The result is as shown below:

Button tag

You can use the button class on <a>, <button>, or <input> elements. However, it is recommended to use the button class on the <button> element to avoid cross-browser inconsistencies.

The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button tag/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a　class="btn　btn-default"　href="#"　role="button">link</a>
<button　class="btn　btn-default"　type="submit">button</button>
<input　class="btn　btn-default"　type="button"　value="input">
<input　class="btn　btn-default"　type="submit"　value="submit">
</body>
</html>

Test It Out ‹/›

The result is as shown below:

Button group

Use .btn directly in the div-group can create a button group:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button (Button) plugin radio button/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Button group/h2>
　　<p>.btn-group class to create a button group:</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Test It Out ‹/›

Use .btn-group-lg|sm|xs to control the size of the button group:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button group/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Button group　-　Set button size/h2>
　　<p>Using .btn-group-*　Class to control the size of buttons in the button group./p>
　　<h2>Large button:</h2>
　　<div class="btn-group btn-group-lg">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>Default size button:</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>Small button:</h2>
　　<div class="btn-group btn-group-sm">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2sm">/h2>
　　<div class="btn-group btn-group->Super Small Button:<
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Test It Out ‹/›

xs">-group-If you want to set vertical buttons, you can use .btn

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2vertical class to set:/h2>
　　>Vertical Button Group<-group-<p>If you want to set vertical buttons, you can use .btn/p>
　　<div class="btn-group-vertical class to set:<
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Test It Out ‹/›

Vertical

Responsive Button Group-group-justified class to set a responsive button group.

The following example uses the a tag to display:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Responsive Button Group</h2>
　　<p>can be set through .btn-group-justified class to set a responsive button group.</p>
　　<div class="btn-group btn-group-justified">
　　　　<a href="#" class="btn btn-primary">Apple</a>
　　　　<a href="#" class="btn btn-primary">Samsung</a>
　　　　<a href="#" class="btn btn-primary">Sony</a>
　　</div>
</div>
</body>
</html>

Test It Out ‹/›

Note: If it is a <button> element, you need to use .btn-group class to wrap:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Responsive Button Group</h2>
　　<div class="btn-group btn-group-justified">
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Sony</button>
　　　　</div>
　　</div>
</div>
</body>
</html>

Test It Out ‹/›

Nested Dropdown Button Group

Button groups can be nested to create dropdown menus, as shown in the following example:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Inline Button Group</h2>
　　<p>Create a dropdown menu with an inline button group: </p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Sony <span class="caret"></span></button>
　　　　　　<ul class="dropdown-menu" role="menu">
　　　　　　　　<li><a href="#">Tablet</a></li>
　　　　　　　　<li><a href="#">Smartphone</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>
</body>
</html>

Test It Out ‹/›

Split Button

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Button</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Separator Button</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Sony</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="#">Tablet</a></li>
　　　　　　<li><a href="#">Smartphone</a></li>
　　　　</ul>
　　</div>
</div>
</body>
</html>

Test It Out ‹/›

Bootstrap Images Bootstrap Forms