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.
Bootstrap Buttons
Bootstrap buttons provide a quick way to create consistent and responsive buttons using predefined classes. Buttons come in several states and styles.
We can either use <a> tag using the class of bootstrap or by using <button> tag.
<a href="/https://www.geeksforgeeks.org/"class="btn btn-danger">
<button type="button" class="btn btn-info" >Button with 'button' tag </button>Buttons Colors
We have a variety of colors to use in the buttons like primary, secondary, success, danger and many more.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</body>
</html>
Output
Button Sizes
We have also an option to resize the button according to our requirement using 'btn-lg' 'btn-sm' etc.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-secondary btn-sm">Small Button</button>
</body>
</html>
Output
Button States
We can adjust the button if it should've in active state or not for our functional needs. We can do it by defining 'active' and 'disabled' state in the button.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary active">Active Button</button>
<button type="button" class="btn btn-secondary" disabled>Disabled Button</button>
</body>
</html>
Output
Glyphicons
Glyphicons were included in Bootstrap 3 for easy icon integration, but they were deprecated in Bootstrap 4. To use Glyphicons, you would add the glyphicon and corresponding icon class, such as glyphicon-star.
<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><html>
<head>
<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
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.
<html>
<head>
<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 Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
You'll learn more of Bootstrap stuff in the next article. Keep Learning!
If you also wish to showcase your blog here, please see GBlog for guest blog writing on GeeksforGeeks.