Bootstrap Buttons
In this section we will demonstrate the use of buttons in bootstrap. Whenever we use a .btn class, a button will be created on the page which will have rounded corners. In bootstrap we have a number of styling options for styling the buttons. Consider the following table in which we have a number of styling options (classes) for bootstrap buttons:
Classes | Description |
btn | This class will create a default button in bootstrap. |
btn- primary | This class will create a button which will have a primary action and which will have an extra weight (visually). |
btn- success | This class is used to create a success button. |
btn- info | This class is used to create a contextual button which will be used for information messages. |
btn- warning | This class is used to create a button which will alert the user for any cautionary message. |
btn- danger | This class is used to create a button which will indicate danger. |
btn- link | This class will create a button which will look like a link. This link will have all the behaviors of a button. |
Consider the following example in which we have used all the above classes.
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Exampe< /title >
<linkhref = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts / jquery. min. js” >< /script >
<scriptsrc = “/ bootstrap/ js/ bootstrap. min. js” >< / script >
< /head >
<body>
< !– This class will create a default button in bootstrap. — >
<button type = “button” class = “btnbtn- default” > The Default Button < / button >
< ! — This class will create a button which will have a primary action and which will have an extra weight (visually). — >
<button type = “button” class = “btnbtn- primary” >The Primary Button < / button >
< ! — This class is used to create a success button. — >
<button type = “button” class = “btnbtn- success” > The Success Button < / button >
< ! — This class is used to create a contextual button which will be used for information messages. — >
<button type = “button” class = “btnbtn- info” > The Info Button < / button >
< ! — This class is used to create a button which will alert the user for any cautionary message. — >
<button type = “button” class = “btnbtn- warning” > The Warning Button < / button >
< ! — This class is used to create a button which will indicate danger. — >
<button type = “button” class = “btnbtn- danger” > The Danger Button < /button >
< ! — This class will create a button which will look like a link. This link will have all the behaviors of a button. — >
<button type = “button” class = “btnbtn- link” > The Link Button < / button >
< /body >
< /html >
The above example will generate the following result:
OUTPUT:
Button Size:
Consider the following table in which we have classes that are used to create of buttons of different sizes:
Classes | Description |
.btn- lg | This class will make the size of the button larger. |
.btn- sm | This class will make the size of the button smaller. |
.btn- xs | This class will make the size of the button extra small. |
.btn- block | This class is used to create block level buttons. |
Consider the following example in which we have used all the above classes to format the size of the button in bootstrap:
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Example </title>
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<p>
<button type = “button” class = “btnbtn-primary btn-lg”>
The Primary button (Large size)
</button>
<button type = “button” class = “btnbtn-default btn-lg”>
The Large button
</button>
</p>
<p>
<button type = “button” class = “btnbtn-primary”>
The Primary button (Default size)
</button>
<button type = “button” class = “btnbtn-default”>
The Default button
</button>
</p>
<p>
<button type = “button” class = “btnbtn-primary btn-sm”>
The Primary button (Smaller size)
</button>
<button type = “button” class = “btnbtn-default btn-sm”>
Default button (smaller size)
</button>
</p>
<p>
<button type = “button” class = “btnbtn-primary btn-xs”>
The Primary button (Extra small size)
</button>
<button type = “button” class = “btnbtn-default btn-xs”>
The default button (Extra small size)
</button>
</p>
<p>
<button type = “button” class = “btnbtn-primary btn-lgbtn-block”>
The Primary button (Block level)
</button>
<button type = “button” class = “btnbtn-default btn-lgbtn-block”>
The default button (Block level)
</button>
</p>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example we have primary and default buttons of different sizes that are extra small, small and large.
Button State:
In bootstrap we have some classes that may be used to change the state of the buttons. For example an active or a disabled button can be created by using these classes in bootstrap. The following are some of the states of buttons in bootstrap:
Active State:
A button in active state looks like it is pressed and it has a darker background with a darker border and there will be shadow in the button. Consider the following table in which we have defined the classes that are used to make buttons and anchors active:
Element | Classes |
Button | The .active class is used to make a button active or to create an active button. |
Anchor | The .active class should be used inside the <a> tag to make an anchor in active state. |
Consider the following example in which we have used these classes to create a button in active state:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<h4>Difference between Default and Default Active Buttons</h4>
<p>
<button type = “button” class = “btnbtn-default btn-lg “>
The Default Button
</button>
<button type = “button” class = “btnbtn-default btn-lg active”>
The Default Active Button
</button>
</p>
<h4>Difference between Primary and Primary Active Buttons</h4>
<p>
<button type = “button” class = “btnbtn-primary btn-lg”>
The Primary button
</button>
<button type = “button” class = “btnbtn-primary btn-lg active”>
The Primary Active button
</button>
</p>
</body>
</html>
The above code will generate the following result:
OUTPUT:
Disabled State:
A button in disabled state is faded and its color is faded by 50% of the original color. Consider the following table in which we have defined the classes that are used to make buttons and anchors disabled:
Element | Classes |
Button | The “disabled” attribute is used inside the <button> tag to make a button disabled or to create a disabled button. |
Anchor | The .disabled class should be used inside the <a> tag to make an anchor in disabled state. |
Consider the following example in which we have used these classes to create a button in disabled state:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example</title>
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<h4>Difference between Default button and Default Disabled Button</h4>
<p>
<button type = “button” class = “btnbtn-default btn-lg”>
The Default Button
</button>
<button type = “button” class = “btnbtn-default btn-lg” disabled = “disabled”>
The default Disabled Button
</button>
</p>
<h4>Difference between Primary button and Primary Disabled Button</h4>
<p>
<button type = “button” class = “btnbtn-primary btn-lg”>
The Primary button
</button>
<button type = “button” class = “btnbtn-primary btn-lg” disabled = “disabled”>
The Disabled Primary button
</button>
</p>
<h4>Difference between Default anchor and Default Disabled anchor</h4>
<p>
<ahref = “#” class = “btnbtn-default btn-lg” role = “button”>
The Link
</a>
<ahref = “#” class = “btnbtn-default btn-lg disabled” role = “button”>
The Disabled Link
</a>
</p>
<h4>Difference between Primary anchor and Primary disabled anchor</h4>
<p>
<ahref = “#” class = “btnbtn-primary btn-lg” role = “button”>
The Primary link
</a>
<ahref = “#” class = “btnbtn-primary btn-lg disabled” role = “button”>
The Disabled Primary link
</a>
</p>
</body>
</html>
The above will generate the following result:
OUTPUT:
It can be seen in the above example that the disabled button cannot do any function and are faded by 50% that is the original color is darker and they are lighter in color.
Button Tags:
The button classes should be used with the button element rather than using them with the <input> or <a> tags. This will reduce the inconsistency that may occur in the browsers.