Table rows inside a card body are not sized correctly in Bootstrap 4

Question

I have a card in which under card body, I am displaying a table. One of the td contains a progress bar. However, this specific column containing the progress bar is not appearing of desired width (col-xs-8). I tried to set this on table headers and on specific data columns in tbody but this was of no avail. Any suggestions?

Working code snippet : https://www.codeply.com/go/2CGGezuq6j

I think they removed xs, just do `.col-8` – Breezer Mar 12 '18 at 21:58 — Breezer, Mar 12 '18 at 21:58

Breezer · Accepted Answer · 2018-03-13T03:28:03.250

2

As of bootstrap 4, you can't use xs, replace col-xs-8 with just col-8

https://getbootstrap.com/docs/4.0/layout/grid/

Edit:

And remember to enclose your columns with the row class

edited Mar 13 '18 at 03:28

answered Mar 12 '18 at 22:00

Breezer

10,410
6
29
50

1

Updated to col- but does not help. https://www.codeply.com/go/BGnAi3HaLt – shmit Mar 12 '18 at 22:03
you've changed back to bootstrap 3 – Breezer Mar 12 '18 at 22:10
if this helped you please marked it as answered – Breezer Mar 13 '18 at 00:00
I am sorry for the oversight of including bootstrap 3. Updated with no luck at https://www.codeply.com/go/gm4g0JxaOA – shmit Mar 13 '18 at 00:06
1

you have to add `class="row"` to your `tr's` and you got one to many columns in your last table row – Breezer Mar 13 '18 at 03:25

Table rows inside a card body are not sized correctly in Bootstrap 4

1 Answers1