HOME HTML CSS Javascript PHP Laravel

Table :

Hello guys ! today we will learn about Tables in Bootstrap 4 !

table class is used to style HTML tables and make them more visually appealing and responsive. The table class in Bootstrap provides a set of predefined styles and features that can be applied to tables.

Table Styles :

table-striped :
Adds zebra-striping to the table rows by applying alternate background colors.
table-bordered :
Adds borders to all the cells and the table itself.
table-hover :
Adds a hover effect to highlight rows when the user hovers over them.
table-responsive :
Wraps the table in a responsive container, enabling horizontal scrolling on smaller screens when the table content exceeds the width.

Table Color :

One can color table by using its classes like....

  • table-primary
  • table-secondary
  • table-success
  • table-danger
  • table-warning
  • table-info
  • table-light
  • table-dark

Example :

PHP Example

Edit it yourself 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Grid Example</title>

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

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>No.</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

</body>
</html>