Hi pals! Hope you are doing very well. We are going to learn some more about bootstrap buttons in this tutorial. What we are going to do is have a look at few buttons in the example, define the general method of adding buttons in bootstrap and then we will give you the list of all buttons available in bootstrap.
Simple Button:
What do you do when you add a simple button in HTML? You write:
<button> Bootstrap Tutorials</button>
The whole code in bootstrap is going to be the same you will just add a bootstrap class.
<button class=”btn”>Bootstrap Tutorials</button>
Now have a look at your page. You must have a simple nice looking button on your website.
Good thing is bootstrap provides bunch of nice looking buttons. Let’s have a look at some of those:
<button class=”btn btn-primary”>Bootstrap Tutorials</button>
Check this button; you simple add another class that colors your previous button with blue.
Let’s check out another:
<button class=”btn btn-large”>Bootstrap Tutorials</button>
Can you see the difference of this button with previous ones? It’s slightly larger.
That’s all was from this tutorial we are giving a list of buttons below in the code you can use in your website with bootstrap classes.
<!DOCTYPE html> <html> <head> <title>Test Buttons</title> <script type="text/javascript" src="bootstrap.js"></script> <link rel"stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <button>This is Normal Button.</button></br></br> <button>This is Normal Bootstrap Button.</button></br></br> <button>This is Mini Button.</button></br></br> <button >This is Primary Button.</button></br></br> <button>This is Danger Button.</button></br></br> <button>This is Block Button.</button></br></br> <button>This is Group Button.</button></br></br> <button>This is info Button.</button></br></br> <button>This is Inverse Button.</button></br></br> <button>This is Large Button.</button></br></br> <button>This is Link Button.</button></br></br> <button>This is Nav Button.</button></br></br> <button>This is Small Button.</button></br></br> <button>This is warning Button.</button></br></br> <button>This is toolbar Button.</button></br></br> <button>This is Vertical Group Button.</button></br></br> </body> </html>
You copy this code in html and see the effect, don’t forget to include bootstrap files in the folder. If you don’t know how to include bootstrap file CLICK HERE.
Author Description
