Bootstrap Buttons - Naukri Code 360

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.

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.

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:

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:

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:

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:

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:

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 DSA, Competitive Programming, System 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!