Issue
I have two divs and want to display the content of both divs in the same location. Since the text in the first div is longer and has an impact on where the body content is positioned, the two divs do not look alike.I want the position of second div body content like first div body content. Please see the SS that I have attached.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
<div class="w-100 bg-warning text-center p-2">
<a href="">Somecontent from a map function here dsdsadsadsffffffff</a>
</div>
<div class="h-100">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ; height: 130px;">
<div class="w-100 bg-warning text-center p-2">
<a href="">Somecontent from a map</a>
</div>
<div class="h-100" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" >
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>
</html>Solution
Remove your static height's then use the .py-3 class for 1rem of vertical padding on your .h-100 div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>
<body style="padding: 40px">
<div class="d-flex flex-column border border-primary " style="max-width: 400px; height: 140px;">
<div class="w-100 bg-warning text-center p-2">
<a href="">Somecontent from a map function here dsdsadsadsffffffff</a>
</div>
<div class="h-100 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100" onclick="alert('hey')">
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px; height: 140px;">
<div class="w-100 bg-warning text-center py-3">
<a href="">Somecontent from a map</a>
</div>
<div class="h-100 d-flex justify-content-between align-items-center" onclick="alert('hey')">
<div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100">
<text class="bg-warning"> discussed </text>
<div onclick="alert('hey click me')">icons here</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>Answered By - Kameron Answer Checked By - Timothy Miller (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.