Bootstrap Buttons, Glyphicons, Tables - GeeksforGeeks

12 Jan, 2022
Introduction and InstallationGrid SystemVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron
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. Lets 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 colours using Bootstrap. Each having 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 colour of 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>Example:htmlhtml<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body>    <div class="container" style="color:green">     <h1>GeeksforGeeks</h1>    </div><div class="container">  <h2>Button Styles</h2>  <button type="button" class="btn">Basic</button>  <button type="button" class="btn btn-default">Default</button>  <button type="button" class="btn btn-primary">Primary</button>  <button type="button" class="btn btn-success">Success</button>  <button type="button" class="btn btn-info">Info</button>  <button type="button" class="btn btn-warning">Warning</button>  <button type="button" class="btn btn-danger">Danger</button></div><br>  <div class="container">  <h4>Button with <a> and  <button> tag</h4>  <a href="https://ide.geeksforgeeks.org/tryit.php"class="btn btn-danger">    Button with <a> tag </a>  <button type="button" class="btn btn-success">Button with <button> tag </button>      </div>  </body></html>Output:
html
<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body>    <div class="container" style="color:green">     <h1>GeeksforGeeks</h1>    </div><div class="container">  <h2>Button Styles</h2>  <button type="button" class="btn">Basic</button>  <button type="button" class="btn btn-default">Default</button>  <button type="button" class="btn btn-primary">Primary</button>  <button type="button" class="btn btn-success">Success</button>  <button type="button" class="btn btn-info">Info</button>  <button type="button" class="btn btn-warning">Warning</button>  <button type="button" class="btn btn-danger">Danger</button></div><br>  <div class="container">  <h4>Button with <a> and  <button> tag</h4>  <a href="https://ide.geeksforgeeks.org/tryit.php"class="btn btn-danger">    Button with <a> tag </a>  <button type="button" class="btn btn-success">Button with <button> tag </button>      </div>  </body></html>
Output:
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 within the quotes  class=”Paste here”. If you need more specific glyphicon you can visit http://glyphicons.com/ and buy them.Example:htmlhtml<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body>    <div class="container" style="color:green">     <h1>GeeksforGeeks</h1>           </div>    <div class="container">        <p>Correct<span class="glyphicon glyphicon-ok"></span></p>        <p>Incorrect<span class="glyphicon glyphicon-remove"></span></p>        <h4>Glyphicon with buttons</h4>        <a href="https://www.geeksforgeeks.org"class="btn btn-primary">            <span class="glyphicon glyphicon-backward"></span>         </a>        <a href="https://www.geeksforgeeks.org"class="btn btn-danger">            <span class="glyphicon glyphicon-pause"></span>         </a>        <a href="https://www.geeksforgeeks.org"class="btn btn-success">            <span class="glyphicon glyphicon-play"></span>         </a>        <a href="https://www.geeksforgeeks.org"class="btn btn-primary">            <span class="glyphicon glyphicon-forward"></span>         </a>    </div>    <br>    <div class="container">        <a href="https://www.geeksforgeeks.org"class="btn btn-primary">        <span class="glyphicon glyphicon-thumbs-up"></span>Like Button     </a>    </div></body></html>Output:
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 within the quotes  class=”Paste here”. If you need more specific glyphicon you can visit http://glyphicons.com/ and buy them.
Example:
html
<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body>    <div class="container" style="color:green">     <h1>GeeksforGeeks</h1>           </div>    <div class="container">        <p>Correct<span class="glyphicon glyphicon-ok"></span></p>        <p>Incorrect<span class="glyphicon glyphicon-remove"></span></p>        <h4>Glyphicon with buttons</h4>        <a href="https://www.geeksforgeeks.org"class="btn btn-primary">            <span class="glyphicon glyphicon-backward"></span>         </a>        <a href="https://www.geeksforgeeks.org"class="btn btn-danger">            <span class="glyphicon glyphicon-pause"></span>         </a>        <a href="https://www.geeksforgeeks.org"class="btn btn-success">            <span class="glyphicon glyphicon-play"></span>         </a>        <a href="https://www.geeksforgeeks.org"class="btn btn-primary">            <span class="glyphicon glyphicon-forward"></span>         </a>    </div>    <br>    <div class="container">        <a href="https://www.geeksforgeeks.org"class="btn btn-primary">        <span class="glyphicon glyphicon-thumbs-up"></span>Like Button     </a>    </div></body></html>
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.Example:htmlhtml<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body>    <div class="container" style="color:green">     <h1>GeeksforGeeks</h1>           </div>    <div class="container">        <h4>Tables using Bootstrap</h4>        <hr><hr>        <div class="container">            <div class="bg bg-success">                <table class="table table-hover">                   <tr class="danger">                    <td>First Column</td>                    <td>Second Column</td>                    <td>Third Column</td>                   </tr>                   <tr class="info">                    <td>Python</td>                    <td>Java</td>                    <td>Swift</td>                   </tr>                   <tr class="danger">                    <td>HTML</td>                    <td>CSS</td>                    <td>JavaScript</td>                   </tr>                   <tr class="info">                    <td>MySql</td>                    <td>MongoDB</td>                    <td>SQL lit</td>                   </tr>                </table>            </div>       </div>   </div></body></html>Output:Supported Browsers:Google ChromeMicrosoft EdgeFirefoxOperaSafariYou’ll learn more of Bootstrap stuff in the next article. Keep Learning!Article By Harshit Gupta: Kolkata based Harshit Gupta is an active blogger having keen interest in writing about current affairs, technical Blogs, stories, and personal life experiences. Besides passionate about writing, he also loves coding and dancing. Currently studying at IIEST, he is an active blog contributor at geeksforgeeks.If you also wish to showcase your blog here,please see GBlog for guest blog writing on GeeksforGeeks.  My Personal Notes
arrow_drop_upSave
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.Example:
html
<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body>    <div class="container" style="color:green">     <h1>GeeksforGeeks</h1>           </div>    <div class="container">        <h4>Tables using Bootstrap</h4>        <hr><hr>        <div class="container">            <div class="bg bg-success">                <table class="table table-hover">                   <tr class="danger">                    <td>First Column</td>                    <td>Second Column</td>                    <td>Third Column</td>                   </tr>                   <tr class="info">                    <td>Python</td>                    <td>Java</td>                    <td>Swift</td>                   </tr>                   <tr class="danger">                    <td>HTML</td>                    <td>CSS</td>                    <td>JavaScript</td>                   </tr>                   <tr class="info">                    <td>MySql</td>                    <td>MongoDB</td>                    <td>SQL lit</td>                   </tr>                </table>            </div>       </div>   </div></body></html>
Supported Browsers:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
You’ll learn more of Bootstrap stuff in the next article. Keep Learning!
Article By Harshit Gupta: Kolkata based Harshit Gupta is an active blogger having keen interest in writing about current affairs, technical Blogs, stories, and personal life experiences. Besides passionate about writing, he also loves coding and dancing. Currently studying at IIEST, he is an active blog contributor at geeksforgeeks.
If you also wish to showcase your blog here,please see GBlog for guest blog writing on GeeksforGeeks.
 
 
Akanksha_Rai
ysachin2314
Web technologies
Bootstrap
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to align button to right side of text box in Bootstrap?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
How to change the background color of the active nav-item?