CSS Extension To Fix Bootstrap Table In Card Issue

Author: philipnewcomer
Views Total: 2,333 views
Official Page: Go to website
Last Update: September 25, 2019
License: MIT


CSS Extension To Fix Bootstrap Table In Card Issue


This is a CSS extension used to fix a bug where the Bootstrap 4 table can NOT be full height when placed in a card.

How to use it:

Insert the CSS extension after Bootstrap’s stylesheet.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="dist/bootstrap4-card-tables.min.css">

Insert your HTML table into a Bootstrap card. Done.

<div class="card">
  <div class="card-header">
    Card Header
  <table class="table table-bordered">
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
        <th scope="row">1</th>
        <th scope="row">2</th>
        <th scope="row">3</th>
        <td>the Bird</td>
  <div class="card-footer">
    Card Footer


v1.2.1 (09/25/2019)

  • Don’t modify table cell padding for small tables

See also  Simple 5-star Rating System with CSS and Html Radios

Leave a Reply

Your email address will not be published. Required fields are marked *