Bootstrap Button's provides several predefined button styles, each serving its own purpose. The button classes can be used on <a>, <button>, or <input> elements. Differect custom button styles include btn, btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, btn-link etc. To avoid text to wrap, use the .text-nowrap class to the bootstrap button.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button's - Button Styles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h2>Bootstrap Button's - Button Styles</h2>
</div>
<div class="card-body">
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</div>
</div>
</body>
</html>
Output :
Bootstrap Outline Button's
Bootstrap provides outline/bordered buttons with an additional "hover" effect. Bootstrap Outline Button's use classes btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-danger, btn-outline-warning, btn-outline-info, btn-outline-light, btn-outline-dark etc.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Outline Button's - Button Styles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h2>Bootstrap Outline Button's - Button Styles</h2>
</div>
<div class="card-body">
<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-dark">Dark</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-light">Light</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
</div>
</div>
</div>
</body>
</html>
Output :
Bootstrap Button Tags
Bootstrap Button style classes can be used with <button> element, <a> element or <input> element. When using bootstrap button classes with <a> element for triggering page functionality rather than linking to new page mension button tag role="button" to convey there message to screen readers.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button's - Button Tag</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h2>Bootstrap Button's - Button Tag</h2>
</div>
<div class="card-body">
<a class="btn btn-info" href="#" role="button">Link</a>
<button class="btn btn-info" type="submit">Button</button>
<input class="btn btn-info" type="button" value="Input">
<input class="btn btn-info" type="submit" value="Submit">
<input class="btn btn-info" type="reset" value="Reset">
</div>
</div>
</div>
</body>
</html>
Output :
