Bootstrap 5 Buttons
Last Updated :
05 Apr, 2024
Bootstrap 5 Buttons are pre-styled components in the Bootstrap framework, offering consistent design and functionality. They streamline development by providing ready-to-use button styles, sizes, and behaviors, ensuring a cohesive and responsive user interface across web applications with minimal CSS customization.
Syntax:
<button class="badge bg-type"> Button Text <button>
Types: Following are the nine types of buttons available in Bootstrap 5:
- btn-primary
- btn-secondary
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-light
- btn-dark
- btn-link
Examples of Bootstrap 5 Buttons
 Example 1: This example uses shows the working of the first five types of buttons in Bootstrap 5.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 Buttons
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<div style="width: 600px;height: 200px;
margin:20px;text-align: center;">
<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>
</div>
</body>
</html>
Output:
Button Outlines: Bootstrap 5 provides a series of classes that can be used when we need to use outline-styled buttons in our project, i.e. buttons without background color. The outline button classes remove any background color or background image style applied to the buttons. All the button types support it as given in the example below:
Example: This example uses shows the working of different outline buttons in Bootstrap 5.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Buttons
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
</head>
<body style="text-align:center;">
<div class="container mt-3">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Button Sizes</h2>
<button type="button"
class="btn btn-success btn-sm">
Small Button
</button>
<button type="button"
class="btn btn-success">
Default Button
</button>
<button type="button"
class="btn btn-success btn-lg">
Large Button
</button>
</div>
</body>
</html>
Output:
Disabled State Buttons: The disabled attribute is used with button element to set the disabled state of the button.
Example: This example uses show the working of a button’s disabled state in Bootstrap 5.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Buttons
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
</head>
<body style="text-align:center;" style="width:700px;">
<div class="container mt-3">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Block Level Buttons</h2>
<button type="button"
class="btn btn-block btn-primary">
Block Level Button
</button>
<button type="button"
class="btn btn-block btn-success">
Block Level Button
</button>
</div>
</body>
</html>
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...