BSKIN 5 - Bootstrap 5 Button Page

loading....

Button

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Default Button

   
         <button class="btn btn-primary me-5 mb-4" type="button">Primary</button>
         <button class="btn btn-secondary me-5 mb-4" type="button">Secondary</button>
         <button class="btn btn-success me-5 mb-4" type="button">Success</button>
         <button class="btn btn-danger me-5 mb-4" type="button">Danger</button>
         <button class="btn btn-warning me-5 mb-4" type="button">Warning</button>
         <button class="btn btn-info me-5 mb-4" type="button">Info</button>
         <button class="btn btn-light me-5 mb-4" type="button">Light</button>
         <button class="btn btn-dark me-5 mb-4" type="button">Dark</button>
         <button class="btn btn-link me-5 mb-4" type="button">Link</button>

Button Sizes

   
         <button class="btn btn-primary btn-lg me-5  mb-4" type="button">Get started</button>
         <button class="btn btn-primary me-5 mb-4" type="button">Get started</button>
         <button class="btn btn-primary btn-sm me-5 mb-4" type="button">Get started</button>

Outline buttons

   
         <button class="btn btn-outline-primary btn-lg me-5 mb-4" type="button">Get started</button>
         <button class="btn btn-outline-primary me-5 mb-4" type="button">Get started</button>
         <button class="btn btn-outline-primary btn-sm me-5 mb-4" type="button">Get started</button>

Full Width buttons

 
         <button class="btn btn-primary btn-block mb-4" type="button">Block level button</button>
         <button class=""btn btn-secondary btn-block mb-4" type="button">Block level button</button>

Active State

  
         <btn btn-primary btn-lg me-5 mb-4" type="button">Get started</button>
         <button class="btn btn-primary me-5 mb-4" type="button">Get started</button>
         <button class="btn btn-primary btn-sm me-5 mb-4" type="button">Get started</button>

Disabled State

  
         <btn btn-primary btn-lg disabled me-5 mb-4" type="button">Get started</button>
         <button class="btn btn-primary disabled me-5 mb-4" type="button">Get started</button>
         <button class="btn btn-primary disabled btn-sm me-5 mb-4" type="button">Get started</button>