”;
This chapter will discuss about Bootstrap Buttons.You can use Bootstrap’s custom button styles for actions in forms, dialogs and many more. This support for multiple sizes, states,…etc. Bootstrap includes the class .btn that sets basic styles such as padding and content alignment.
Base button
Add .btn class that implements basic styles such as padding and content alignment. The .btn class provides a transparent border, a background color, and no explicit focus and hover styles.
Example
You can edit and try running this code using Edit & Run option.
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<button type="button" class="btn btn-primary">Base Button </button>
</body>
</html>
Variants
Bootstrap includes different styles of buttons, each serving its own semantic purpose, with some extras thrown in for further control.
To achieve the button styles, Bootstrap provides following classes:
-
.btn
-
.btn-default
-
.btn-primary
-
.btn-success
-
.btn-info
-
.btn-warning
-
.btn-danger
-
.btn-link
Example
You can edit and try running this code using Edit & Run option.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" ></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<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>
</body>
</html>
Disabled text wrapping
To disable the text wrapping on a button text, add .text-nowrap class to the button.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<button type="button" class="btn btn-primary text-nowrap">this button''s text has disabled text wrapping. Here we see the test in a single line</button><br><br><br>
<button type="button" class="btn btn-primary">this button''s text does not have text wrapping enabled. Here we see the text being wrapped to next line</button>
</body>
</html>
Button tags
The .btn classes can be used on <a> and <input> elements.
When you are using button classes on <a> elements that used to trigger in-page functionality instead of linking to new pages or sections within the current page these links have element role=”button” to appropriately convey their purpose to assistive technologies such as screen readers.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<a href="#"role="button" class="btn btn-info">Download Link</a>
<button type="button" class="btn btn-primary">Button</button>
<input type="submit" class="btn btn-secondary" value="Submit">
<input type="button" class="btn btn-danger" value="Login">
<input type="reset" class="btn btn-light" value="Reset">
</body>
</html>
Outline button
To get the button without heavy background colors, use .btn-outline-* class which allows you to remove all background images and colors from any button.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<button type="button" class="btn btn-outline-primary">Primary Button</button>
<button type="submit" class="btn btn-outline-secondary">Secondary Button</button>
<button type="button" class="btn btn-outline-warning">Warning Button</button>
<button type="button" class="btn btn-outline-success">Sucess Button</button>
<button type="button" class="btn btn-outline-light">Light Button</button>
<button type="button" class="btn btn-outline-danger">Danger Button</button>
<button type="button" class="btn btn-outline-dark">Dark Button</button>
<button type="button" class="btn btn-outline-info">Info Button</button>
<button type="button" class="btn btn-outline-link">Link</button>
</button>
</body>
</html>
Button sizes
To get any larger or smaller buttons add the classes .btn-lg, .btn-sm to the .btn. You can create your own custom size button by using CSS variables.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-info btn-sm">Small Button</button>
<button type="button" class="btn btn-warning"
style="--bs-btn-padding-y: .24rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .75rem;">
Custom Button
</button>
</body>
</html>
Disabled state
Bootstrap provides class .disabled. This feature disables from hovering and active states of
click event.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<button type="button" class="btn btn-primary disabled">Primary Disabled Button</button>
<button type="button" class="btn btn-secondary" disabled>Secondary Disabled Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Outline Primary Disabled button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Outline Secondary Disabled Button</button>
</button>
</body>
</html>
Disabled buttons using the <a> element that has slightly different behavior:
-
The element <a> doesn”t support the disabled attribute. You have to add the .disabled class to make it visually seem disabled.
-
To disable all pointer-events on anchor buttons, some future-friendly styles are included.
-
To show the state of the element to assistive technologies in disabled buttons using <a> should contain aria-disabled=”true” attribute.
-
The href attribute should not be included within disabled buttons using <a>.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary Disabled</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Secondary Disabled</a>
<a class="btn btn-outline-danger disabled" role="button" aria-disabled="true">Outline Primary Disabled Button</a>
<a class="btn btn-outline-warning disabled" role="button" aria-disabled="true">Outline Secondary Disabled Button</a>
</button>
</body>
</html>
Link functionality caveat
-
When you have to save the href attribute on a disabled link, the .disabled class utilizes
pointer-events: none to attempt to disable the link functionality of the element <a>. -
Keyboard users and users of assistive technologies will always be able to activate these links.
-
You can include aria-disabled=”true” and tabindex=”-1″ attributes on these links to control them from receiving
keyboard focus and utilize custom JavaScript to disable their functionality altogether.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Disables Primary Link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Disabled Secondary Link</a>
</button>
</body>
</html>
Block buttons
-
We can create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a combination of display and gap utilities.
-
Using button specific classes rather than utilities, we can have more significant control over spacing, alignment and responsive behaviors.
To adjust the width of block buttons you can use grid column width classes. To get the block button of half-width use .col-6 class. The .mx-auto class center the button horizontally.
The following example demonstrated basic block buttons and half-width block using the class .col-6.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<div class="d-grid gap-2 mt-1">
<button class="btn btn-primary" type="button">Primary Block Button</button>
<button class="btn btn-secondary" type="button">Secondary Block Button</button>
</div>
<div class="d-grid gap-2 col-6 mx-auto mt-4">
<button class="btn btn-primary" type="button">Primary Button Using Grid Column Width Classes</button>
<button class="btn btn-secondary" type="button">Secondary Button Using Grid Column Width Classes</button>
</div>
</button>
</body>
</html>
Button plugin
The button plugin permits you to make simple on-off toggle buttons.
Toggle states
Toggle a button”s active state by adding class .data-bs-toggle=”button”. The class .aria-pressed=”true” assures that it is communicated appropriately
with assistive technologies.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="button">Primary Toggle Button</button>
<button type="button" class="btn btn-secondary active" data-bs-toggle="button" aria-pressed="true">Secondary Active Toggle Button</button>
<button type="button" class="btn btn-info" disabled data-bs-toggle="button">Info Disabled Toggle Button</button>
</button>
</body>
</html>
You can create toggle state link using the element <a>.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Primary Toggle link</a>
<a href="#" class="btn btn-secondary active" role="button" data-bs-toggle="button" aria-pressed="true">SecondaryActive toggle link</a>
<a class="btn btn-info disabled" aria-disabled="true" role="button" data-bs-toggle="button">Info Disabled togglelink</a>
</button>
</body>
</html>
”;