Bootstrap: V4 alpha 4 card-columns cuts off cards on top and bottom

Created on 6 Sep 2016  路  6Comments  路  Source: twbs/bootstrap

With the release of V4 alpha 4, card-columns class truncates the top of the middle and right cards when the cards are of varying heights. The same behavior occurs on the bottom edge, although it appears to be the third column that is shown completely, with 1 and 2 being cut off.

card_cols_cutoff

css v4
Source
picture bpierson

Most helpful comment

captura de pantalla de 2016-09-07 07 58 19

Captured in official documentation

picture dpmontero on 7 Sep 2016
👍3

All 6 comments

Browser? Also, are you using CSS columns?

kevinruscoe picture kevinruscoe on 7 Sep 2016

I'm seeing the same behavior, and also seeing it on the Bootstrap documentation site. I'm on Mac OS X Chrome beta channel (currently 53.0.2785.80 beta (64-bit)).

screen shot 2016-09-06 at 5 32 28 pm

kennethn picture kennethn on 7 Sep 2016

I tested in IE 11, Firefox, Chrome on Windows 7. All the same. I'm just using the bootstrap.js and bootstrap.css from the dist folder, so whatever the default settings are.

bpierson picture bpierson on 7 Sep 2016

Likely something to do with the display: block change we introduced in Alpha 4.

mdo picture mdo on 7 Sep 2016

captura de pantalla de 2016-09-07 07 58 19

Captured in official documentation

dpmontero picture dpmontero on 7 Sep 2016
👍3

I have tried! Fixed!!

Thanks!

dpmontero picture dpmontero on 8 Sep 2016
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

knownasilya picture knownasilya  路  3Comments
kamov picture kamov  路  3Comments
steve-32a picture steve-32a  路  3Comments
alvarotrigo picture alvarotrigo  路  3Comments
bellwood picture bellwood  路  3Comments