Bootstrap Button Classes | Bootstrap Buttons - Bootstrap Tutorial 17

Notes for You:: Bootstrap Button Classes.

btn: sets text color to dark gray and removes background color, border, adds border radius etc.

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:
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 Modifiers:
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"/﹥

Note:
- replace ﹤ with less-than symbol.
- replace ﹥ with greater-than symbol.

=========================================

Follow the link for next video:
Bootstrap Tutorial 18 - Bootstrap Badge Related Classes | Bootstrap Badges
https://youtu.be/e1a0jidsE5w

Follow the link for previous video:
Bootstrap Tutorial 16 - Bootstrap Table Related Classes | Bootstrap Tables
https://youtu.be/0bQltSCisA0

=========================================

Bootstrap Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_vnCOUPx1fhQLRZGENyfuMG

=========================================
Watch My Other Useful Tutorials:-

Dreamweaver Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_sGP0m9D68jHqZQr_qRzDXk

PHP Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_s8zash4d8He_49QS_VVmAG

MySQL Tutorials Playlist:-
https://www.youtube.com/playlist?list=PLdE8ESr9Th_tvPGAlbOEc-0_qleTOBgmU

=========================================

Subscribe to our YouTube channel:-
https://www.youtube.com/chidrestechtutorials

Join as member of our YouTube channel:-
https://www.youtube.com/chidrestechtutorials/join

Become our Patron:-
https://www.patreon.com/chidrestechtutorials

Visit our Website:-
https://www.chidrestechtutorials.com

Download our notes from Instamojo:-
https://chidrestechtutorials.myinstamojo.com

Buy our products on Spring:-
https://chidres-tech-tutorials.creator-spring.com

=========================================
Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial