Start Here Basic Page Setup || Navigation Bars || Column Grids || Buttons || Modal Generators || Bootstrap Icons || Badges & Labels || Progress Bars
Creating buttons with PHP Bootstrap 5!
Use custom button styles for actions in forms, on pages, available in multiple sizes and states.
Various Buttons
Default
<div class="btn" aria-label="Basic button example"> <button type="button">Button 1</button> <button type="button">Button 2</button> <button type="button">Button 3</button> </div>
Button Group
<div class="btn-group" role="group" aria-label="Basic outlined example"> <button type="button" class="btn btn-outline-secondary">Left</button> <button type="button" class="btn btn-outline-secondary">Middle</button> <button type="button" class="btn btn-outline-secondary">Right</button> </div>
Warnings
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-link">Link</button>
Sizes
<p> <button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary btn-md">Medium</button> <button type="button" class="btn btn-primary btn-sm">Small</button> </p>
Active or Disabled Buttons
<p> <button type="button" class="btn btn-warning active">Active Warning</button> <button type="button" class="btn btn-warning disabled">Disabled Warning</button> </p>
Full Container Width Buttons
<div class="d-grid gap-2"> <button type="button" class="btn btn-primary btn-block">Button 1</button> <button type="button" class="btn btn-success btn-block">Button 2</button> <button type="button" class="btn btn-info btn-block">Button 3</button> <button type="button" class="btn btn-warning btn-block">Button 4</button> <button type="button" class="btn btn-danger btn-block">Button 5</button> <button type="button" class="btn btn-link btn-block">Button 6</button> </div>
Dismissable Buttons
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <center><strong>Hello</strong>, this is used for informing visitors about current events. This information bar can be dismissed on click.</center> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <div class="alert alert-info alert-dismissible fade show" role="alert"> <center><strong>Hello</strong>, this is used for informing visitors about current events. This information bar can be dismissed on click.</center> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <center><strong>Hello</strong>, this is used for informing visitors about current events. This information bar can be dismissed on click.</center> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <div class="alert alert-success alert-dismissible fade show" role="alert"> <center><strong>Hello</strong>, this is used for informing visitors about current events. This information bar can be dismissed on click.</center> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>