Search...
graphql
react

Button

What is Bootstrap 5 button?

Users can interact with your website using the Bootstrap 5 Button. In terms of size, form, and color, they are simple to alter. They include a number of pre-defined button styles, each with its own logical function and a few more features.

Default Buttons

Bootstrap button (Contrast) predefined style can be used by adding the classes btn and btn-primary (primary designating our button's background color) to a button element.

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

Bootstrap 5 Circular Buttons (Contrast)

The class btn-rounded provides our Bootstrap 5 Button (Contrast ) a more rounded look.

html
<button class="btn btn-primary btn-rounded">Primary</button>
<button class="btn btn-secondary btn-rounded">Secondary</button>
<button class="btn btn-rounded btn-success">Success</button>
<button class="btn btn-danger btn-rounded">Danger</button>
<button class="btn btn-warning btn-rounded">Warning</button>
<button class="btn btn-info btn-rounded">Info</button>
<button class="btn btn-light btn-light btn-rounded">Light</button>
<button class="btn btn-light btn-dark btn-rounded">Dark</button>

Bootstrap 5 Outline Buttons

We use the class btn-outline-primary to make our buttons have only an outline and no background color. The color of the outline of your button is determined by the last word applied to the class name.

html
<button className="btn btn-outline-primary">Primary</button>
<button className="btn btn-outline-secondary">Secondary</button>
<button className="btn btn-outline-success">Success</button>
<button className="btn btn-outline-danger">Danger</button>
<button className="btn btn-outline-warning">Warning</button>
<button className="btn btn-outline-info">Info</button>
<button className="btn btn-outline-light">Light</button>
<button className="btn btn-outline-dark">Dark</button>

Bootstrap 5 Button Size

We can use the classes btn-sm (small size buttons), btn-md (medium or default sized button), and finally btn-lg(large sized button) to set the size of a button.

html
<button className="btn btn-danger btn-xl">Xl</button>
<button className="btn btn-primary btn-lg">Lg</button>
<button className="btn btn-secondary btn-md">Md</button>
<button className="btn btn-success btn-sm">Sm</button>

Bootstrap 5 Buttons with Icon

Pro Component

On our website, we use the i element to add icons. We can have icons on our button by nesting a i tag in our button.

html
<button type="button" class="btn btn-primary">
  <i class="fa fa-book"></i>
  <span> Primary </span>
</button>
<button type="button" class="btn btn-secondary">
  <i class="fa fa-user"></i>
  <span>Secondary </span>
</button>
<button type="button" class="btn btn-success">
  <i class="fa fa-check"></i>
  <span> Success </span>
</button>
<button type="button" class="btn btn-danger">
  <i class="fa fa-times"></i>
  <span> Cancel </span>
</button>
<button type="button" class="btn btn-dark btn-rounded">
  <i class="fa fa-home"></i>
  <span> Home </span>
</button>
<button type="button" class="btn btn-info btn-rounded">
  <i class="fa fa-book"></i>
  <span> Read </span>
</button>
<button type="button" class="btn btn-outline-warning btn-rounded">
  <i class="fa fa-lock"></i>
  <span> Lock </span>
</button>

Block Button

To make our Bootstrap 5 Button ( Contrast ) a block element, which means it will take up the entire width of the page or container it is in. We will use the class btn-block to achieve this result.

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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Previous
ButtonToolbar
Next
Card