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.

  Modified On Jul-04-2019 06:46:46 AM

Leave Comment