I am building a small plugin to make it possible to add bootstrap cards as custom blocks. This works great in general. Now i'm working on their css and have an issue with alignment. I would like the cardblocks to stretch to the same height as the tallest card in the columnsblock.

I thought the best way would be to eigher add the bootstrap class align-stretch to the specific columns, but this isn't very user friendly and i'm developing for customers, or to adjust the css for wp-columns in my theme and add stretch there. But I can't get this to work.

Here is an example of adding css to the columnsblock:

.entry-content .wp-block-columns {
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;

And here is what the plugin is returning for the custom block which is added inside the columns:

return (
            <div className="card d-flex flex-column">
                { cardImage(attributes.imageUrl, attributes.imageAlt) }
                <div className="card-body">
                    <h5 className="card-title">{ cardTitle(attributes.url, attributes.title) }
                    <div className="card-text">
                        { attributes.body }
                        { cardButton(attributes.url, attributes.buttonTitle) }

Doing this in my own theme which is based on understrap and the block plugin is build with cgb.

Do anyone have ideas on how to do this the best way?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.