cards with same size in columns
I face a similar problem like described here: I want to place 3-6 cards next to each other and I want them to be the same width & height. I tied adding is-flex option to the column, but this tampered with the widths of the columns (but did work for the height). Also I want to make sure the "order now" button stays on the bottom.
I packed everything in the code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet" />
<div class="columns ml-1 mt-3">
<div class="column is-3">
<div class="card has-background-warning-light">
<div class="card-header">
<p class="has-text-right card-header-title is-centered is-uppercase">
regular price
</p>
</div>
<div class="card-image">
<div class="has-background-warning">
<div class="has-text-centered">
<span class="is-size-1 has-text-weight-bold has-text-white">
450 €
</span>
</div>
</div>
</div>
<div class="card-content">
<div class="content">
<p class="title is-3" style="display: flex;">
standard price available for everyone
</p>
<button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
order
</button>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="card has-background-danger-light">
<div class="card-header">
<p class="has-text-right card-header-title is-centered is-uppercase">
for early birds
</p>
</div>
<div class="card-image">
<div class="has-background-danger">
<div class="has-text-centered">
<span class="is-size-1 has-text-weight-bold has-text-white">
350 €
</span>
</div>
</div>
</div>
<div class="card-content">
<div class="content">
<p class="title is-3" style="display: flex;">
very long text that showas thet the items becomes mostly taller than the other ones.
</p>
<button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
order
</button>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="card has-background-info-light">
<div class="card-header">
<p class="has-text-right card-header-title is-centered is-uppercase">
reduced
</p>
</div>
<div class="card-image">
<div class="has-background-info">
<div class="has-text-centered">
<span class="is-size-1 has-text-weight-bold has-text-white">
250 €
</span>
</div>
</div>
</div>
<div class="card-content">
<div class="content">
<p class="title is-3" style="display: flex;">
only until ...
</p>
<button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
order
</button>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="card">
<div class="card-header has-background-primary-light">
<p class="has-text-right card-header-title is-centered is-uppercase">
green price
</p>
</div>
<div class="card-image">
<div class="has-background-primary">
<div class="has-text-centered">
<span class="is-size-1 has-text-weight-bold has-text-white">
180 €
</span>
</div>
</div>
</div>
<div class="card-content">
<div class="content">
<p class="title is-3">
the reason
</p>
<button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold mt-auto">
order
</button>
</div>
</div>
</div>
</div>
</div>What I have:
How can I achieve to have all cards the same height & width, with the order button on the bottom? I found a workaround with defining a min-height: 10rem; but I don't want to work with a fixed size if possible.
Solution
I've added some css, hope it's what you're looking for:
.column {
display: flex!important;
flex-direction: column;
}
.card,
.card-content,
.card-content .content {
flex: auto;
display: flex;
flex-direction: column;
}
.card .button {
margin-top:auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/>
<div class="columns ml-1 mt-3">
<div class="column is-3">
<div class="card has-background-warning-light">
<div class="card-header">
<p class="has-text-right card-header-title is-centered is-uppercase">
regular price
</p>
</div>
<div class="card-image">
<div class="has-background-warning">
<div class="has-text-centered">
<span class="is-size-1 has-text-weight-bold has-text-white">
450 €
</span>
</div>
</div>
</div>
<div class="card-content">
<div class="content">
<p class="title is-3" style="display: flex;">
standard price available for everyone
</p>
<button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
order
</button>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="card has-background-danger-light">
<div class="card-header">
<p class="has-text-right card-header-title is-centered is-uppercase">
for early birds
</p>
</div>
<div class="card-image">
<div class="has-background-danger">
<div class="has-text-centered">
<span class="is-size-1 has-text-weight-bold has-text-white">
350 €
</span>
</div>
</div>
</div>
<div class="card-content">
<div class="content">
<p class="title is-3" style="display: flex;">
very long text that showas thet the items becomes mostly taller than the other ones.
</p>
<button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
order
</button>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="card has-background-info-light">
<div class="card-header">
<p class="has-text-right card-header-title is-centered is-uppercase">
reduced
</p>
</div>
<div class="card-image">
<div class="has-background-info">
<div class="has-text-centered">
<span class="is-size-1 has-text-weight-bold has-text-white">
250 €
</span>
</div>
</div>
</div>
<div class="card-content">
<div class="content">
<p class="title is-3" style="display: flex;">
only until ...
</p>
<button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold">
order
</button>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="card">
<div class="card-header has-background-primary-light">
<p class="has-text-right card-header-title is-centered is-uppercase">
green price
</p>
</div>
<div class="card-image">
<div class="has-background-primary">
<div class="has-text-centered">
<span class="is-size-1 has-text-weight-bold has-text-white">
180 €
</span>
</div>
</div>
</div>
<div class="card-content">
<div class="content">
<p class="title is-3">
the reason
</p>
<button class="button is-dark is-fullwidth is-uppercase has-text-weight-bold mt-auto">
order
</button>
</div>
</div>
</div>
</div>
</div>- Is it possible to pull css values with HTA javascript?
- Unable to make the animation function in Tailwind CSS
- CSS selector for first element with class
- Using margin:auto to vertically-align <div>
- how to change angular stepper progress color when next step active
- How to get the grid coordinates of an element using JavaScript?
- How to stop dark mode at inline css?
- Unable to make text bold in SVG
- Extend "grid-lines" beyond a CSS grid
- Show hide divs on click in HTML and CSS without jQuery
- input type color default color input as HEX
- Enable content on row hover in Blazor wasm
- Can't vertical scroll page on mobile devices with full width PrimeNg carousel
- Using custom HTML Tags
- Why is ccsnano messing up the css of bootstrap styles in gulp builder?
- Giving wrapped flexbox items vertical spacing
- force element to display outside of overflow:hidden
- How do I make the text that is inside a half capsule shape?
- Capsule shape using border-radius without a set width or height?
- Using css how so I create a pill shape which is circular on one side and angled on the other?
- How to make a pill shape button with HTML and CSS?
- Modal fixed position content shift
- Change text with a CSS3 animation?
- Changing the Style of a specific element by Checkbox:Checked
- slideDown jumps abruptly at the end
- Why doesn't CSS nesting appended nesting selector work within pseudoselectors?
- How to show empty date picker in Material UI- REACT?
- Formatting a nested table in HTML
- How can I center text (horizontally and vertically) inside a div block?
- How to use CSS files with <s:head> tag in Struts 2?