ApiDemos™Bootstrap 5 Buttons
Bootstrap 5 provides different styles of buttons.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Button styles(apidemos.com)</h2>
<button type="button" class="btn">Basic Buttons</button>
<button type="button" class="btn btn-primary">Primary Buttons</button>
<button type="button" class="btn btn-secondary">secondary Buttons</button>
<button type="button" class="btn btn-success">success Buttons</button>
<button type="button" class="btn btn-info">info Buttons</button>
<button type="button" class="btn btn-warning">warning Buttons</button>
<button type="button" class="btn btn-danger">danger Buttons</button>
<button type="button" class="btn btn-dark">dark Buttons</button>
<button type="button" class="btn btn-light">light Buttons</button>
<button type="button" class="btn btn-link">link Buttons</button>
</div>
</body>
</html>Output:
The button class can be used for <a>, <button> or <input> elements.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Button elements(apidemos.com)</h2>
<a href="#" class="btn btn-info" role="button">Link Buttons</a>
<button type="button" class="btn btn-info">Buttons</button>
<input type="button" class="btn btn-info" value="Input box button">
<input type="submit" class="btn btn-info" value="Submit button">
</div>
</body>
</html>Output:
Buttons to set the border
Bootstrap 5 can also set up buttons with multiple borders, and mouse over the button to add prominence to the effect:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Buttons to set the border(apidemos.com)</h2>
<button type="button" class="btn btn-outline-primary">primary button</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-info">info</button>
<button type="button" class="btn btn-outline-warning">warning</button>
<button type="button" class="btn btn-outline-danger">danger</button>
<button type="button" class="btn btn-outline-dark">dark</button>
<button type="button" class="btn btn-outline-light text-dark">light</button>
</div>
</body>
</html>Output:
Different size buttons
Bootstrap 5 can set the size of the buttons, using the .btn-lg class for large buttons and the .btn-sm class for small buttons
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Different size buttons(apidemos.com)</h2>
<button type="button" class="btn btn-primary btn-lg">btn-lg</button>
<button type="button" class="btn btn-primary">default button</button>
<button type="button" class="btn btn-primary btn-sm">btn-sm</button>
</div>
</body>
</html>Output:
Block level buttons
Block-level buttons can be set by adding the .btn-block class, and the .d-grid class is set in the parent element：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>Block-level buttons can be set by adding the .btn-block class, and the .d-grid class is set in the parent element:</p>
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">button 1</button>
</div>
</div>
</body>
</html>Output:
If there are multiple block-level buttons, you can use the .gap-* class to set the：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>Block-level buttons can be set by adding the .btn-block class, and the .d-grid class is set in the parent element:</p>
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary btn-block">100% Width of the button</button>
<button type="button" class="btn btn-primary btn-block">100% Width of the button</button>
<button type="button" class="btn btn-primary btn-block">100% Width of the button</button>
</div>
</div>
</body>
</html>Output:
Activated and disabled buttons
Buttons can be set to be active or disabled from being clicked.
The .active class sets the button to be available, and the disabled property sets the button to be unclickable.
Note that the
<a>element does not support the disabled attribute, and you can disable link clicks by adding the .disabled class.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Button Status(apidemos.com)</h2>
<button type="button" class="btn btn-primary">primary button</button>
<button type="button" class="btn btn-primary active">active primary button</button>
<button type="button" class="btn btn-primary" disabled>disabled button</button>
<a href="#" class="btn btn-primary disabled">disabled links</a>
</div>
</body>
</html>Output:
Loading button
We can also set a button that is loading.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Loading button(apidemos.com)</h2>
<p>button adds a loading button:</p>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
</div>
</body>
</html>Output:
