0
0
Bootsrapmarkup~5 mins

Button styles and variants in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Buttons help users click to do things on a website. Different styles make buttons look special and show what they do.

When you want a button to look like a main action, like Submit or Save.
When you want a button to look less important, like Cancel or Close.
When you want to show a button with different colors for different meanings, like red for Delete.
When you want buttons to look different on hover or when clicked.
When you want buttons to be small or large depending on the space.
Syntax
Bootsrap
<button type="button" class="btn btn-primary">Primary</button>

Use btn class to start a button style.

Add btn-variant classes like btn-primary, btn-secondary, btn-success, etc. to change color and meaning.

Examples
This is a blue button for main actions.
Bootsrap
<button type="button" class="btn btn-primary">Primary</button>
This is a gray button for less important actions.
Bootsrap
<button type="button" class="btn btn-secondary">Secondary</button>
This is a red button for dangerous actions like delete.
Bootsrap
<button type="button" class="btn btn-danger">Danger</button>
This is a large green button for positive actions.
Bootsrap
<button type="button" class="btn btn-success btn-lg">Large Success</button>
Sample Program

This page shows different Bootstrap button styles and sizes. Each button uses a class to change its color and size. You can see how buttons look for different meanings and importance.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Button Styles</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="p-4">
    <h1>Button Styles and Variants</h1>
    <section class="mb-3">
      <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-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
    </section>
    <section>
      <button type="button" class="btn btn-primary btn-lg">Large Primary</button>
      <button type="button" class="btn btn-secondary btn-sm">Small Secondary</button>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use semantic type="button" to make buttons accessible.

Bootstrap buttons respond to keyboard and screen readers by default.

You can combine size classes like btn-lg or btn-sm with color variants.

Summary

Buttons use btn plus a variant class to change color and meaning.

Variants include primary, secondary, success, danger, warning, info, light, and dark.

You can change button size with btn-lg and btn-sm.