how to design table using bootstrap


In this tutorial you'll learn how to design a table using Bootstrap.


The HTML tables are used to present data in grid format like row and columns.

See the tutorial on HTML Tables to learn more about tables.

Creating a Simple Table with Bootstrap :

You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap's table class.

<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example of Bootstrap 3 Simple Tables</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <style type="text/css">
        .bs-example {
            margin: 20px;
    <div class="bs-example">
        <table class="table">
                    <th>First Name</th>
                    <th>Last Name</th>

 The output of the above example will look something like this:

how to design table using bootstrap

Click here to read more about bootstrap table.

Last updated:9/7/2019 12:20:11 AM
Aditya Patel

Aditya Patel

Hi, I am a Senior Software Developer in MindStick Software pvt. Ltd. I have done BCA from dr. c.v. Raman university. I have more than five years experience in Microsoft Technology MVC 4, MVC Core, C#,Vb.Net, rdlc Reporting ,SQL Server and other jQuery, css, Bootstrap, Knockout.js, angular.js,react.js Html, Crystal Reporting etc.


Leave Comment