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:

the default button


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:

sizes

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:

default button


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:

The Primary button

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.