Menu
Bootstrap 5 Buttons
Button Styles
Bootstrap 5 provides different styles of buttons:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Button Styles</h2>
<button type=”button”>Basic</button>
<button type=”button”>Primary</button>
<button type=”button”>Secondary</button>
<button type=”button”>Success</button>
<button type=”button”>Info</button>
<button type=”button”>Warning</button>
<button type=”button”>Danger</button>
<button type=”button”>Dark</button>
<button type=”button”>Light</button>
<button type=”button”>Link</button>
</div>
</body>
</html>
The button classes can be used on <a>, <button>, or <input> elements:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Button Elements</h2>
<a href=”#”>Link Button</a>
<button type=”button”>Button</button>
<input type=”button” value=”Input Button”>
<input type=”submit” value=”Submit Button”>
<input type=”reset” value=”Reset Button”>
</div>
</body>
</html>
Why do we put a # in the href attribute of the link?
Since we do not have any page to link it to, and we do not want to get a “404” message, we put # as the link. In real life it should of course been a real URL to the “Search” page.
Button Outline
Bootstrap 5 also provides eight outline/bordered buttons.
Move the mouse over them to see an additional “hover” effect:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Button Outline</h2>
<button type=”button”>Primary</button>
<button type=”button”>Secondary</button>
<button type=”button”>Success</button>
<button type=”button”>Info</button>
<button type=”button”>Warning</button>
<button type=”button”>Danger</button>
<button type=”button”>Dark</button>
<button type=”button”>Light</button>
</div>
</body>
</html>
Button Sizes
Use the .btn-lg class for large buttons or .btn-sm class for small buttons:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Button Sizes</h2>
<button type=”button”>Large</button>
<button type=”button”>Default</button>
<button type=”button”>Small</button>
</div>
</body>
</html>
Block Level Buttons
To create a block level button that spans the entire width of the parent element, use the .d-grid “helper” class on the parent element:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Block Level Buttons</h2>
<p>To create a block level button that spans the entire width of the parent element, use the .d-grid “helper” class on the parent element:</p>
<div>
<button type=”button”>Full-Width Button</button>
</div>
</div>
</body>
</html>
If you have many block-level buttons, you can control the space between them with the .gap-* class:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Block Level Buttons</h2>
<p>If you have many block-level buttons, you can control the space between them with the .gap-* class:</p>
<div>
<button type=”button”>Full-Width Button</button>
<button type=”button”>Full-Width Button</button>
<button type=”button”>Full-Width Button</button>
</div>
</div>
</body>
</html>
Active/Disabled Buttons
A button can be set to an active (appear pressed) or a disabled (unclickable) state: The class .active makes a button appear pressed, and the disabled attribute makes a button unclickable. Note that <a> elements do not support the disabled attribute and must therefore use the .disabled class to make it visually appear disabled.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Button States</h2>
<button type=”button”>Primary Button</button>
<button type=”button”>Active Primary</button>
<button type=”button” disabled>Disabled Primary</button>
<a href=”#”>Disabled Link</a>
</div>
</body>
</html>
Spinner Buttons
You can also add “spinners” to a button, which you will learn more about in our BS5 Spinners Tutorial:
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Spinner Buttons</h2>
<p>Add spinners to buttons:</p>
<button>
<span></span>
</button>
<button>
<span></span>
Loading..
</button>
<button disabled>
<span></span>
Loading..
</button>
<button disabled>
<span></span>
Loading..
</button>
</div>
</body>
</html>