Bootstrap Button Style, Bootstrap Button, Bootstrap Button Background, Button border, Bootstrap Button Group, Bootstrap Vertical Button Group, Button Size

Bootstrap Provide different style button according your requirement. Because everyone need different background of their website button. Bootstrap made button style very easy for web designer. Here I will tell you how you can use different different style of button.

Example:-

Code for Bootstrap Button Style.

<button type="button" class="btn">Basic</button>

<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-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-link">Link</button>

Bootstrap Button Class can be use for <a> or <input> type HTML tags.

For Example:-

<a href=”#”> <button type="button" class="btn">Basic</button> </a>

Bootstrap Button Outline (Border)

Bootstrap also provide button outline we call it button border

For Example:- 

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>

<button type="button" class="btn btn-outline-success">Success</button>

<button type="button" class="btn btn-outline-info">Info</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-dark">Dark</button>

<button type="button" class="btn btn-outline-light text-dark">Light</button>

Button Sizes

Now we came on button size because a web designer need different size of button for their website. So Bootstrap provide very simple class to resize your button size.

For Example:-

Code for button size

<button type="button" class="btn btn-primary btn-lg">Large</button>

<button type="button" class="btn btn-primary">Default</button>

<button type="button" class="btn btn-primary btn-sm">Small</button>

Block Level Button or full width button

If you need full width button for your website you just need to a simple Bootstrap class (.btn-block)

Example:-

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Bootstrap Button Group

We can keep all the button in a single group. For example you need multiple button in single row, But if you use normal button class as I told you earlier it will shows a little bit gap between every button. If you don’t want to see that space then you should use button group class.

Example:-

Code For Button Group.

To create button group you just need to add a <div> and keep your button code inside that <div>.

<div class="btn-group">

  <button type="button" class="btn btn-primary">Apple</button>

  <button type="button" class="btn btn-primary">Samsung</button>

  <button type="button" class="btn btn-primary">Sony</button>

</div>

Vertical Button Group.

Sometimes you need vertical button in your website. Bootstrap provide very simple class to keep your all button in vertical way. To keep your button in vertical way you need to add a class in <div>

Example:-

Code For Vertical Button Group

<div class="btn-group-vertical">

  <button type="button" class="btn btn-primary">Apple</button>

  <button type="button" class="btn btn-primary">Samsung</button>

  <button type="button" class="btn btn-primary">Sony</button>

</div>

If you are facing any problem applying these button code write in comment box I will reply you ASAP