'Flex bootstrap 5.1.3 div and price not aligned
I am using flex = https://getbootstrap.com/docs/4.0/utilities/flex/
if my content text increase size the div and the price do not stay aligned. https://i.imgur.com/7HXPMCi.jpg
What I am trying to achieve:
- div to have the same size when the content text is big or short.
- price always be aligned with the other one if the content text increases.
JSFiddle = https://jsfiddle.net/scbxef5y/
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<style>
.border-gray {
border: 1px solid #000;
min-height: 100px;
padding: 20px;
}
</style>
<body>
<div class="container">
<div>
<h4>section name</h4>
</div>
<!-- <div class="menu-section row align-items-baseline menu-row"> -->
<div class="menu-section row align-items-baseline">
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="border-gray">
<div class="d-flex justify-content-between bd-highlight mb-2">
<div class="p-2 bd-highlight">
title
<div>
t contentcontent contentcontent contentcontent contentcontent content content contentcontent contentcontent content
</div>
</div>
<div class="p-2 bd-highlight">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
</div>
<div class="d-flex align-content-end flex-wrap">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
</div>
</div>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="border-gray">
<div class="d-flex justify-content-between bd-highlight mb-2">
<div class="p-2 bd-highlight">
title
<div>
content t contentcontent contentcontent content t contentcontent contentcontentcontent t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent
contentcontent
</div>
</div>
<div class="p-2 bd-highlight">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
</div>
<div class="d-flex align-content-end flex-wrap">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
</div>
</div>
</div>
</div>
</div>
</body>Solution 1:[1]
The way I would approach this is to look at your two divs. Find the one with the most amount of content that is causing alignment issues. Then set a min-height on the smaller div based on the rendered size of the largest one.
So with your structure, the div on the right is rendered larger than the left one. The difference in the amount of content causes both border-gray and its first child with the flex to have different heights. So then, we need to set min-heights on the div with less content so that it fills the available space and aligns your content. This also includes setting a max-height on the div with lots of content (mostly for when resizing the browser and content wraps).
This should work with any varying-sized content as long as you follow this approach. It mostly relies on finding that min-height sweet spot. See the min-height I set on border-gray and the inline styles I set on its first child.
.border-gray {
border: 1px solid #000;
padding: 20px;
min-height: 300px;
}<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<div>
<h4>section name</h4>
</div>
<!-- <div class="menu-section row align-items-baseline menu-row"> -->
<div class="menu-section row align-items-baseline">
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="border-gray">
<div class="d-flex justify-content-between bd-highlight mb-2" style="min-height: 300px;">
<div class="p-2 bd-highlight">
title
<div>
t contentcontent contentcontent contentcontent contentcontent content content contentcontent contentcontent content
</div>
</div>
<div class="p-2 bd-highlight">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
</div>
<div class="d-flex align-content-end flex-wrap">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
</div>
</div>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="border-gray">
<div class="d-flex justify-content-between bd-highlight mb-2" style="min-height: 300px; max-height: 300px;">
<div class="p-2 bd-highlight">
title
<div>
content t contentcontent contentcontent content t contentcontent contentcontentcontent t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent contentcontent content t contentcontent
contentcontent
</div>
</div>
<div class="p-2 bd-highlight">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="" />
</div>
</div>
<div class="d-flex align-content-end flex-wrap">
<span itemscope="" itemtype="http://schema.org/offers"><span itemprop="price"><p>€5.00</p></span></span>
</div>
</div>
</div>
</div>
</div>
</body>Solution 2:[2]
Have you tried to give height to one of the elements? then give height:auto; to the other one. also this code needs to be writen better, with that i mean to be more simplier, that way you can can see issues easier!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Jasin Bilalli |