Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Bootstrap
3.
Button
4.
Buttons Tags
4.1.
Implementation
5.
Button Styles
5.1.
Implementation
6.
Button Sizes
6.1.
Implementation
7.
Button States
7.1.
Active State
7.2.
Disabled State
8.
Frequently Asked Questions
8.1.
How can we start using Bootstrap?
8.2.
How can we use the components of Bootstrap?
8.3.
What are the styles in Bootstrap buttons? 
8.4.
What are the different sizes of Bootstrap buttons available?
8.5.
What are the states of Bootstrap buttons?
9.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap Buttons

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Have you ever tried to work with Bootstrap on your web pages? Bootstrap is among the most widely used CSS frameworks for developing responsive websites. This article discusses the different types of buttons available in Bootstrap.

Bootstrap Buttons

We will also learn about implementing different button styles and sizes.

Bootstrap

Bootstrap is an open-source CSS framework. It is easy to create attractive web pages with responsiveness using Bootstrap. 

These CSS and javascript-based design templates for forms, buttons, and typography are contained in Bootstrap. Bootstrap provides easy ways to style websites, and it is less verbose.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Button

An <button> element in Bootstrap can be implemented using the .btn class. In this class, you can use elements like <a> or <input>.

Syntax:

<button type="button" class="btn buttonStyle">tagName</button>

Buttons Tags

You can use button classes with <a>, <button>, or <input> elements. Using <button> elements is recommended to avoid cross-browser inconsistency issues(the website must be available for every user).

The following example demonstrates this −

Implementation

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" />
        <title>Bootstrap</title>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body class="p-1 m-1 border-3 bd-example">
        <p>
            <center><h2>Bootstrap Button Tags</h2></center>
        </p>
        <p>
            <center>
                <a class="btn btn-primary" href="#" role="button">Link</a>
                <button class="btn btn-danger" type="submit">Button</button>
                <input class="btn btn-warning" type="button" value="Input" />
                <input class="btn btn-success" type="submit" value="Submit" />
                <input class="btn btn-info" type="reset" value="Reset" />
            </center>
        </p>
    </body>
</html>

Output:

Buttons Tags

Here we can see how the button class is implemented using predefined styles. Let's now see more on styles for Bootstrap buttons.

Button Styles

Different styles are available in Bootstrap buttons. They apply different colours to the Bootstrap buttons.

Styles

Description

Default Button

Simple standard button style.

Class: .btn

Primary Button

This button is blue. Denotes primary action.

Class: .btn-primary

Secondary Button

This button is grey. Denotes secondary action.

Class: .btn-secondary

Success Button

This button is green. Denotes a successful action.

Class: .btn-success

Info Button

This button is light blue. Relates to necessary alert messages.

Class: .btn-info

Warning Button

This button is yellow. An Indication that care should be taken with this action.

Class: .btn-warning

Danger Button

This button is red. Indicates potentially harmful action.

Class: .btn-danger

Link Button

Look of the button is changed to a link while maintaining the button’s behaviour.

Class: .btn-link

Implementation

This code helps us identify how each button looks and functions.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" />
        <title>Bootstrap Buttons</title>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body class="p-5 m-2 border-3 bd-example">
        <p>
            <center><h2>Bootstrap Buttons</h2></center>
        </p>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>
        <button type="button" class="btn btn-link">Link</button>
        <button type="button" class="btn btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-outline-secondary">Secondary</button>
        <button type="button" class="btn btn-outline-success">Success</button>
        <button type="button" class="btn btn-outline-danger">Danger</button>
        <button type="button" class="btn btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-outline-info">Info</button>
        <button type="button" class="btn btn-outline-light">Light</button>
        <button type="button" class="btn btn-outline-dark">Dark</button>
    </body>
</html>

Output:

Button Styles

Here we can see how the Bootstrap button style is implemented by using pre-defined styles. We have also seen variations of button layouts. The first set of eight buttons is regular, and the next set outlines the button with predefined colours. 

Along with colour, we can also change the sizes of the buttons. Let's now see more on sizes for Bootstrap buttons.

Button Sizes

Different sizes are available in Bootstrap buttons. They are

Sizes

Class

Large Button

.btn-lg

Small Button

.btn-sm

Extra Small Button

.btn-xs

Block Level Button

.btn-block

 

Note: Block-level buttons span the entire width of a parent.

Implementation

This code helps us identify the size of each class of buttons.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
		<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" />
		<title>Bootstrap</title>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body class="p-1 m-1 border-3 bd-example">
		<p>
			<center><h2>Bootstrap Button Sizes</h2></center>
		</p>
		<p>
			<button type="button" class="btn btn-primary btn-lg">Large</button>
			<button type="button" class="btn btn-default btn-lg">
				Default Large
			</button>
		</p>
		<p>
			<button type="button" class="btn btn-primary">Default button</button>
			<button type="button" class="btn btn-default">Default button</button>
		</p>
		<p>
			<button type="button" class="btn btn-primary btn-sm">Small</button>
			<button type="button" class="btn btn-default btn-sm">Default Small</button>
		</p>
	</body>
</html>

Output:

Button Sizes

Here we can see how the Bootstrap button sizes are implemented using predefined sizes.

Along with colour, we can also change the sizes of the buttons. Let's now see more on sizes for Bootstrap buttons.

Button States

Bootstrap offers many classes that allow us to change the state of buttons.

  • Active state
  • Disabled state

Each of these states is discussed in the below sections.

Active State

This is the state of the button that will make a button appear pressed (with a darker border, darker background, and inset shadow) when active. It can be denoted under the .active class. The table below explains the classes that activate the button and anchor elements.

Element Class
Button element Button is active.
Anchor element <a> <a> button shows that button has been activated.

The following example demonstrates this −

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
		<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" />
		<title>Bootstrap</title>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body class="p-1 m-1 border-3 bd-example">
		<p>
			<center><h2>Bootstrap Button States</h2></center>
		</p>
		<p>
			<button type="button" class="btn btn-danger">Default Button</button>
			<button type="button" class="btn btn-success">
				Default Active Button
			</button>
		</p>
		<p>
			<a href="#" class="btn btn-danger btn-lg active" role="button" aria-pressed="true">Button</a>
			<a href="#" class="btn btn-success btn-lg active" role="button" aria-pressed="true">Active</a>
		</p>
	</body>
</html>

Output:

Active State

Here we can see how the Bootstrap button states are implemented. The active state buttons have a darker colour when compared to the default Bootstrap button colour.

Disabled State

When a button is disabled, the colour will fade in by 50% and lose the gradient.

The table below explains the classes used to make the button and anchor elements disabled.

Element Class
Button element Add the disabled attribute to <button> buttons.
Anchor element  Add the disabled class to <a> buttons.

Note: In the anchor element, this class will only change the appearance, not its functionality. Custom JavaScript needs to be used to disable the links.

This example will demonstrate this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
		<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" />
		<title>Bootstrap</title>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body class="p-1 m-1 border-3 bd-example">
		<p>
			<center><h2>Bootstrap Button States</h2></center>
		</p>
		<p>
			<button type="button" class="btn btn-warning">Default Button</button>
		</p>
		<p>
			<button type="button" class="btn btn-warning" disabled>Primary button</button>
		</p>
		<p>
			<a href="#" class="btn btn-warning disabled" role="button" aria-disabled="true">Primary Button2</a>
		</p>
	</body>
</html> 

Output:

Disabled State

Here we can see how the Bootstrap button state is implemented. The disabled state buttons are faded compared to the default Bootstrap button colour. 

In this code, we have implemented the Bootstrap button disabled in 2 different ways.

Frequently Asked Questions

How can we start using Bootstrap?

The links provided on Bootstrap's official website can be included in your file in the header, and after that, add classes to respective elements for interacting with the results.

How can we use the components of Bootstrap?

There are many classes; for example, for dropdowns, we have .drop-down and many more provided by the Bootstrap framework, which can be added to the respective elements to get used.

What are the styles in Bootstrap buttons? 

The styles available in Bootstrap buttons are Primary, Secondary, Success, Danger, Warning, Info, and Link. These help in adding colours to the button.

What are the different sizes of Bootstrap buttons available?

The different sizes of buttons available in Bootstrap buttons are Large, Small, Extra small, and block-level buttons. 

What are the states of Bootstrap buttons?

There are two states in the Bootstrap buttons, namely, Active and Disabled states.

Conclusion

In this article, we have discussed the various types of buttons in Bootstrap. We also learned about the various sizes of buttons in Bootstrap. We also learned about the different states and tags of the buttons in Bootstrap. This article also explained the implementation of all buttons available in Bootstrap. To learn more about Bootstrap, read:

You may refer to our Guided Path on Code Studios for enhancing your skill set on DSACompetitive ProgrammingSystem Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy Learning, Ninjas!

Previous article
Bootstrap Forms
Next article
Bootstrap Border
Live masterclass