Bootstrap 5-Button


The buttons in bootstrap allow the user to submit the form to the server for processing..

Contextual Button Style

Example

<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<button type = "button" class = "btn"> Default Button </button>
<button type = "button" class = ""btn btn-primary""> Primary Button </button>
<button type = "button" class = "btn btn-secondary"> Secondary Button </button>
<button type = "button" class = "btn btn-success"> Success Button </button>
<button type = "button" class = "btn btn-info"> Info Button </button>
<button type = "button" class = "btn btn-warning"> Warning Button </button>
<button type = "button" class = "btn btn-dark"> Dark Button </button>
<button type = "button" class = "btn btn-light"> Light Button </button>
<button type = "button" class = "btn btn-danger"> Danger Button </button>
<button type = "button" class = "btn btn-link"> Link Button </button>
</div>
</body>
</html>


Output(Contextual Button Style)

 Bootstrap 5 Example


Different types of Button


Type Description
Button Outlines <button type = "button" class = "btn btn-outline-primary"> Primary Button </button>
Button Size <button type = "button" class = "btn btn-outline-primary btn-lg"> Large Button </button>
<button type = "button" class = "btn btn-outline-secondary"> Default Button </button>
<button type = "button" class = "btn btn-outline-success btn-sm"> Small Button </button>
Diffrent type of Button <input type = "submit" class = "btn btn-danger" value = "Submit Type">
<input type = "reset" class = "btn btn-primary" value = "Reset Type">
<input type = "button" class = "btn btn-dark" value = "Button Type">

Bootstrap 5 Button Group

Bootstrap 5 provides one class to create multiple buttons simultaneously. Group a collection of multiple buttons on a single line or in a column. Button group displays in one line but handles different operations on the web page.


<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<div class = "btn-group btn-group-lg " >
<button type = "button" class = "btn btn-warning"> Warning Button </button>
<button type = "button" class = "btn btn-dark"> Dark Button </button>
<button type = "button" class = "btn btn-light"> Light Button </button>
<button type = "button" class = "btn btn-danger"> Danger Button </button>
<button type = "button" class = "btn btn-link"> Link Button </button>
</div>

<div class = "btn-group-vertical" >

<button type = "button" class = "btn"> Default Button </button>
<button type = "button" class = ""btn btn-primary""> Primary Button </button>
<button type = "button" class = "btn btn-secondary"> Secondary Button </button>
<button type = "button" class = "btn btn-success"> Success Button </button>
</div>
</body>
</html>
Bootstrap 5 Example