-1

Since I'm not a native English speaker its difficult to explain the problem with words. Please refer to the image I will explain to my problem below.

Columns Layout

Currently, I'm using bootstrap 4, But If this can be done by pure CSS HTML that's also fine. The issue is the column card's title and paragraphs words count different to each column card. But these things must be archive developing the layout.

  • All titles should align to the top & should be in the same line.
  • All paragraphs should align to the top after the title but all paragraphs should be aligned in the same horizontal line.
  • All buttons (Green squares) align to the bottom of the card.

I have done this using min-height in CSS. But when it comes to short titles & short paragraphs. UI is not so great.

Please show me the direction how to do this. Thanks in advance.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Crizy Sash
  • 127
  • 1
  • 2
  • 11

2 Answers2

1

The way I see it, you'll have to combine bootstrap card and Flexbox to achieve this. Or you can just use flexbox and put the element into each flexbox and justify-content: flex-start; and align-content: space-between; for it.

Belle Zaid
  • 172
  • 3
  • 9
1

User overflow properties when length is more than a height on your paragraph, or try @media queries when the window's width is more than 992px

Links: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_intro

Aggestor
  • 110
  • 1
  • 6