Button Colors Bootstrap 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 4 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-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 3: custom color bootstrap buttonm

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {     background-color: #8064A2 !important; }

Example 4: bootstrap btn colors

<!-- Bootstrap v5.0 -->  <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 5: 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 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>

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable