bootstrap button background color code example

Example 1: bootstarp btn colors

<button type="button" class="btn btn-primary">Blue</button>
<button type="button" class="btn btn-secondary">Grey</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-warning">Yellow</button>
<button type="button" class="btn btn-info">Ligth blue</button>
<button type="button" class="btn btn-light">White</button>
<button type="button" class="btn btn-dark">Black</button>

<button type="button" class="btn btn-link">White with blue text</button>

Example 2: bootstrap background color

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

Example 3: button bootstrap 4

<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>

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

Example 4: how to change the color of a bootstrap button

.btn-default
 
{
 
background-color: #68889E;
 
color:#FFF;
 
border-color: #2F3E48;
 
}
 
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
 
 
 
background-color: #2F3E48;
 
color:#FFF;
 
border-color: #31347B;
 
}

Example 5: bootstrap buttons

<button type="button" class="btn btn-primary">Blue</button>
<button type="button" class="btn btn-secondary">Grey</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-danger">Red</button>
<button type="button" class="btn btn-warning">Orange</button>
<button type="button" class="btn btn-info">Navy Blue</button>
<button type="button" class="btn btn-light">Light Grey</button>
<button type="button" class="btn btn-dark">Black</button>

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

Example 6: button color bootstrap

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>