E-J SOURCE CODE

A responsive table created with Bootstrap

Author- LORYMER JAUCULAN

In order to make it simpler to design responsive, mobile-first websites, Bootstrap is a well-known front-end development framework. One of the elements offered by Bootstrap is a responsive table, which is made to change its formatting and layout according to the size of the screen or device being used to see it.

Since they make it simple for visitors to read and interact with data on desktop and mobile devices, responsive tables are a crucial part of any modern website. In this post, we'll go over how to make a responsive table using Bootstrap and give some advice and best design practices for creating tables that are both useful and aesthetically pleasing.

The Beginning

You must first download Bootstrap's most recent version from its official website in order to get started. After downloading the framework, you can either utilize the pre-built CSS files or edit them to suit your unique requirements.

The "table" class and the "table-responsive" class must be used together in order to construct a responsive table using Bootstrap. The "table-responsive" class makes the table responsive by adding horizontal scrolling and allowing it to change its layout dependent on the screen size, while the "table" class defines the table's fundamental structure and formatting.

Here is an example of a simple responsive table made with Bootstrap:

  
  

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet"href="bootstrap-5.3.0-alpha1-dist/css/bootstrap.css">
<div class="table-responsive">
	<table class="table table-hover">
		<thead>
			<tr>
				<th> No </th>
				<th> Fistname </th>
			<th> Lastname</th>
			<th> Username </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>John</td>
			<td>Doe</td>
			<td>@joe</td>
		</tr>
		<tr>
				<td>2</td>
				<td>Jane</td>
				<td>Doe</td>
				<td>@jane</td>
				<tr>
		        	<tr> 
		         	<td>3</td>
		         	<td>bob</td>
		         	<td>smith</td>
		         	<td>@smith</td>
		       	</tr>
		   	</tbody>
			</table>
		</div>

Download Here is an example of a Bootstrap.css:

https://drive.google.com/file/d/1f5g5AGlZjCTeboD7_bQ65vt3BemQ2IWR/view?usp=share_link

In this illustration, a simple table with three rows of data and three columns (Firstname, Lastname, and Email) has been built. The table has been responsively wrapped in a "table-responsive" div, and the "table" class has been added to specify the formatting and structure of the table.

Personalized Tables

Once a basic responsive table has been developed, it may be further customized by adding more classes and styles. Table formatting options in Bootstrap include "table-striped" for adding zebra stripes to table rows and "table-bordered" for adding borders to table cells.


Discussions

Post a Comment