In this post, we are learning about Bootstrap Button.
In previous post I wrote about what is Bootstrap?,
How to setup Bootstrap?,
Bootstrap Grid System,
Bootstrap Container Class ,
Bootstrap Nested column and
Bootstrap Offset Columns.
Using bootstrap button classes we can look
like any fancy button of an anchor tag <a> or <button> tag. Anything that is given a class
The default look of the gray button with round corners of .btn will be inherited. However bootstrap does provide some
Options for style buttons, which are summarized in the following table:.
The button classes for different colors are as follows:
|
Sr.No
|
Properties
|
Description
|
|
1)
|
btn
|
This button class is used for creating a Standard button
|
|
2)
|
btn-primary
|
This button class is used for creating a dark-blue button
|
|
3)
|
btn-info
|
This is used for creating a light-blue button
|
|
4)
|
btn-success
|
This button class is used for creating a green-colored button
|
|
5)
|
btn-warning
|
This class is used for creating a pale yellow-colored button
|
|
6)
|
btn-danger
|
This is used for creating a red-colored button
|
|
7)
|
btn-default
|
This class is used for creating a white-colored button
|
|
8)
|
btn-link
|
This class is used to make buttons look like a link while preserving the behavior of a button.
|
Following example demonstrates all the above button classes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</head>
<body>
<button type="button" class="btn btn-default">
Default Button</button>
<button type="button" class="btn btn-primary">
Primary Button</button>
<button type="button" class="btn btn-success">
Success Button</button>
<button type="button" class="btn btn-info">
Info Button</button>
<button type="button" class="btn btn-warning">
Warning Button</button>
<button type="button" class="btn btn-danger">
Danger Button</button>
<button type="button" class="btn btn-link">
Link Button</button>
</body>
</html>
Here is the output of the above code:
Output
In the above output, we can clearly see that we have created diffrent type of bootstrap buttons using button classes.
Bootstrap also has classes for creating buttons of various sizes. These classes have to be
combined, along with the combination of btn and color classes.
Classes for various sizes are as follows:
|
Sr.No
|
Properties
|
Description
|
|
1)
|
btn-lg
|
This class is used to create a large button
|
|
2)
|
btn-sm
|
This class is used to create a small button
|
|
3)
|
btn-xs
|
This class is used to create an extremely small button
|
|
4)
|
btn-block
|
This class is used for a creates block level buttons—those that span the full width of a parent
|
|
5)
|
No class
|
This class is used for a default size button
|
Following example demonstrates all the above button size classes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</head>
<body>
<p>
<button type="button" class="btn btn-primary btn-lg"> Large Primary button </button>
<button type="button" class="btn btn-default btn-lg">Large button </button>
</p>
<p>
<button type="button" class="btn btn-primary"> Default size Primary button </button>
<button type="button" class="btn btn-default"> Default size button </button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm"> Small Primary button</button>
<button type="button" class="btn btn-default btn-sm"> Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs"> Extra small Primary button</button>
<button type="button" class="btn btn-default btn-xs"> Extra small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level Primary button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
</body>
</html>
Here is the output of the above code:
Output
In the above output, we can clearly see that we have created diffrent size of bootstrap buttons using button Size.
We have create buttons of Large Size, Medium Size,Small Size, Exrta Small size and Block Level Buttons.
Bootstrap provides classes which allow we change the state of buttons say active and disabled.
Classes for Button State are as follows:
|
Sr.No
|
State
|
Description
|
|
1)
|
ACTIVE
|
Use .active class to show that it is activated.Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.
|
|
2)
|
DISABLED
|
Use .disabled class to show that it is disabled.When we disable a button, it will fade in color by 50%, and lose the gradient.
|
Following example demonstrates all the above Button State classes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</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"> Primary button </button>
<button type="button" class="btn btn-primary btn-lg active"> Active Primary button </button>
</p>
<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"> Primary button</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled"> Disabled Primary button</button>
</p>
</body>
</html>
Here is the output of the above code:
Output
In the above output, we can clearly see that we have created diffrent State of bootstrap buttons using button State. Normal Buttons
has white color and active button has darker background and darker border. Disable Button has fade in color by 50%, and lose the gradient as
compare to normal buttons.
No comments:
Post a Comment
Please do not enter any spam link in the comment box.