Bootstrap Buttons, Glyphicons, Tables

Last Updated : 23 Jul, 2025

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

<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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

bootstrap-basic-buttons — Bootstrap Basic Buttons

Button Sizes

We have also an option to resize the button according to our requirement using 'btn-lg' 'btn-sm' etc.

HTML

<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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

bootstrap-button-sizes — Bootstrap Button Sizes

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

<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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

active-and-disabled-bootstrap-buttons — Active And Disabled bootstrap Buttons

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

<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

<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.

Bootstrap 5 Introduction

kartik

Improve

Article Tags :

Bootstrap Buttons, Glyphicons, Tables