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
Anonymous User

Anonymous User

I am a content writter !


Leave Comment