Table Hover with Color
First, integrate Bootstrap 5 CDN links for styling and functionality. A <table>
element with the classes table
and table-hover
is used to create the table. The table-hover
class adds a hover effect to the rows. The table has a header row (<thead>
) with a light blue background color (table-primary
class). The table body (<tbody>
) contains three rows (<tr>
), each with the class table-success
, giving them a green background color.
Example: Illustration of hoverable table rows with background color in Bootstrap.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" > < title >Hoverable Table Rows</ title > </ head > < body > < div class = "container mt-5" > < h1 class = "text-success" > w3wiki Hoverable Table Rows </ h1 > < h2 >Hover the rows to show the effect</ h2 > < table class = "table table-hover" > < thead class = "table-primary" > < tr > < th scope = "col" >ID</ th > < th scope = "col" >Name</ th > < th scope = "col" >Email</ th > </ tr > </ thead > < tbody > < tr class = "table-success" > < th scope = "row" >1</ th > < td >John Doe</ td > < td >john@example.com</ td > </ tr > < tr class = "table-success" > < th scope = "row" >2</ th > < td >Jane Smith</ td > < td >jane@example.com</ td > </ tr > < tr class = "table-success" > < th scope = "row" >3</ th > < td >Jane </ td > < td >jane@example.com</ td > </ tr > </ tbody > </ table > </ div > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" > </ script > </ body > </ html > |
Output:
How to create Hoverable Table Rows in Bootstrap 5 ?
This feature is particularly useful in web applications, dashboards, or scenarios where tabular data is presented, improving the overall user experience and interface. To achieve the effect of hoverable table rows we use the bootstrap class “table-hover” in the <table> tag. This effect enhances user interaction by dynamically changing the appearance of rows when hovered over, providing feedback, and making the table more interactive.
Contact Us