Which of the Bootstrap class can be used to get a basic table with stripes on rows?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we walk through the complete process of creating a used to get a basic table with stripes on rows.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Include the code in body

This article will guide you to adding table with stripes on rows in Bootstrap with example.

Creating Tables with Striped Rows

You can also add zebra-striping to the table rows within the <tbody> by simply adding an additional class .table-striped to the .table base class, as shown below.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Step 3: Include the code in body

Here we will use .table table-striped class to make a table with stripes on rows.

    <div class="container">
		<h1 style="text-align:center;color:#1c0080;">
            aGuideHub
		</h1>
<div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>S. No.</th>
                <th>Name</th>
                <th>City</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Vijay</td>
                <td>Solapur</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Viraj</td>
                <td>Miraroad</td>
                <td>23</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Astha</td>
                <td>Virar</td>
                <td>34</td>
            </tr>
        </tbody>
    </table>
</div>
</div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Zebra-Striped Tables</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

    <div class="container">
		<h1 style="text-align:center;color:#1c0080;">
            aGuideHub
		</h1>
<div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>S. No.</th>
                <th>Name</th>
                <th>City</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Vijay</td>
                <td>Solapur</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Viraj</td>
                <td>Miraroad</td>
                <td>23</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Astha</td>
                <td>Virar</td>
                <td>34</td>
            </tr>
        </tbody>
    </table>
</div>
</div>
</body>
</html>

Check the output of the above code example.

Bootstrap,

All the best 👍