ksno ksno - 3 months ago 9x
CSS Question

How could we make bootstrap rows/columns look like a table?

My #1 try fails because of padding in col's.

My #2 try also because I must be doing something stupid.

Here's desired result:

enter image description here

Could someone help me? Please avoid rewriting bootstrap rules if possible.


Basic principle of Table -> row / column is that, in a particular row, columns should be of equal height whatever is the content.

You can make table -> row/columns structure using bootstrap grid but there will be a problem of equal heights column.

So, for this purpose i.e. for equal columns, you can use flexbox property. (it doesn't work in ie9 and less so be sure about its use.)

Check this fiddle here

Just add following simple CSS to a parent container (for complete demo checkout above fiddle),

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;