Bootstrap Button Related Classes
Notes:
Bootstrap - Button related classes:
btn: sets text color to dark gray and removes background color, border, adds border radius etc.
Filled Buttons: Creating filled buttons
btn-primary : sets text color to white and background and border color to blue color
<input type="submit" class="btn btn-primary"/>
btn-secondary : sets text color to white and background and border color to mid gray color
<input type="submit" class="btn btn-secondary"/>
btn-success : sets text color to white and background and border color to green color
<input type="submit" class="btn btn-success"/>
btn-info : sets text color to white and background and border color to pale blue color or light cyan color
<input type="submit" class="btn btn-info"/>
btn-warning : sets text color to dark gray and background and border color to yellow color
<input type="submit" class="btn btn-warning"/>
btn-danger : sets text color to white and background and border color to red color
<input type="submit" class="btn btn-danger"/>
btn-light : sets text color to dark gray and background and border color to light gray color
<input type="submit" class="btn btn-light"/>
btn-dark : sets text color to light gray and background and border color to dark gray color
<input type="submit" class="btn btn-dark"/>
btn-link : sets text color to blue and removes the underline from the link
<a href="#"class="btn btn-link">Submit</a>
Outlined buttons: Creating outlined buttons
btn-outline-primary : sets text color to blue and border color to blue color
<input type="submit" class="btn btn-outline-primary"/>
btn-outline-secondary : sets text color to mid gray and border color to mid gray color
<input type="submit" class="btn btn-outline-secondary"/>
btn-outline-success : sets text color to green and border color to green color
<input type="submit" class="btn btn-outline-success"/>
btn-outline-info : sets text color to pale blue and border color to pale blue color
<input type="submit" class="btn btn-outline-info"/>
btn-outline-warning : sets text color to yellow and border color to yellow color
<input type="submit" class="btn btn-outline-warning"/>
btn-outline-danger : sets text color to red and border color to red color
<input type="submit" class="btn btn-outline-danger"/>
btn-outline-light : sets text color to light gray and border color to light gray color
<input type="submit" class="btn btn-outline-light"/>
btn-outline-dark : sets text color to dark gray and border color to dark gray color
<input type="submit" class="btn btn-outline-dark"/>
Button Modifier Classes:
btn-block : converts button to block level and sets width to 100%
<input type="submit" class="btn btn-block btn-outline-primary"/>
btn-lg : increase font size and padding little bit so that it gets displayed little bit larger than normal size
<input type="submit" class="btn btn-lg btn-outline-primary"/>
btn-sm : decreases font size and padding little bit so that it gets displayed little bit smaller than normal size
<input type="submit" class="btn btn-sm btn-outline-primary"/>
Interview Questions: