Bootstrap Buttons, Glyphicons, Tables
- Introduction and Installation
- Grid System
- Vertical Forms, Horizontal Forms, Inline Forms
- DropDowns and Responsive Tabs
- Progress Bar and Jumbotron
After the previous article, one should be familiar with the Grid System of Bootstrap. Now, we’ll learn about making Buttons, the all-new Glyphicons, and Tables. Let’s get started.
We can make Buttons in Bootstrap in two ways ( or more specifically, using two tags ). Firstly, with the <a> tag and secondly by using the <button> tag.
<a href="https://www.geeksforgeeks.org"class="btn btn-danger"> Button with'a'tag </a> <button type="button" class="btn btn-info" >Button with 'button' tag </button>
We can have Buttons in different colors using Bootstrap. Each has a specific name like btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, and btn-link. All of them represent a specific color of the button.
We can also make buttons of different sizes ( by using btn-lg, btn-sm, btn-xs and btn-block attributes)
- <a href=” “>Button with <a> tag </a>
- Gorgeous Glyphicons:
Glyphicons is a library of precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation. We can use Glyphicons inside the span tag like this:
<span class="Name of the glyphicon"> </span>
Glyphicons can also be used within buttons like this:
<a href="" class="btn btn-default"><span class="Name of the glyphicon"> </span> </a>
One can see all the glyphicons available at http://getbootstrap.com/components for free. You can copy their names and paste them within the quotes class=”Paste here”. If you need more specific glyphicon you can visit http://glyphicons.com/ and buy them.
- Tantalizing Tables:
For creating tables, we need the <table> tag within which we use <tr> tag to define each row and <td>/<th> tag to represent actual data cell. In the table tag, we can add different classes attributed to them which can make our table look better. Some of the table classes would be table-striped, table-bordered, table-hover, table-condensed, etc. You can find all the table classes here. The basic structure of the table is :
<table class="table-striped"> <tr> <td>First Column</td> <td>Second Column</td> <td>Third Column</td> </tr> </table>
You can also add different colours to each row of the table using the colour in the <tr> tag like <tr class=”danger”> </tr> Similarly, you can also add colours to each cell by including the class of colours in the <td> tag.
- Google Chrome
- Microsoft Edge