Types of Button Outline Classes in Bootstrap

Button Outline Bootstrap

Learn how to set up an HTML button outline using Bootstrap in easy steps. The best features of the bootstrap borders are hover bg-colors and clicked colors. We can use this bootstrap class for all kinds of buttons

Types of bg color button

  • btn-outline-primary: It sets text color to blue and border color to blue.
  • btn-outline-secondary: It sets text color to mid-gray and border color to mid-gray.
  • btn-outline-success: It sets the text color to green and border color to green.
  • btn-outline-info: It sets the text color to pale blue and border color to pale blue.
  • btn-outline-warning: It sets the text color to yellow and border color to yellow.
  • btn-outline-danger: It sets the text color to red and border color to red.
  • btn-outline-light: It sets the text color to light gray and border color to light gray.
  • btn-outline-dark : It sets the text color to dark gray and border color to dark gray.

Example:

<input type="submit" class="btn-outline-primary">
<input type="submit" class="btn-outline-secondary">
<input type="submit" class="btn-outline-success">
<input type="submit" class="btn-outline-info">
<input type="submit" class="btn-outline-warning">
<input type="submit" class="btn-outline-danger">
<input type="submit" class="btn-outline-light">
<input type="submit" class="btn-outline-dark">

Output:

button outline bootstrap

Leave a Reply