I'm trying to style an HTML listing with Bootstrap 5.
My problem is achieving a proper line height. The .lh class in bootstrap even with .lh-1 is too high. The negative margin doesn't seem to work for me. Any ideas?
I achieved the designed look but using small but I would prefer it to be a p, as it's important data.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<title>test</title>
</head>
<body class="bg-dark">
<!-- LISTING 1-->
<section id="listing_ad" class="px-3 lh-1 pb-4">
<div id="row_1" class="row">
<div class="col-3">
<img class="w-100" src="user_listing_images/sm-square/hans.jpg" alt="">
</div>
<div class="col-sm-9">
<!-- LISTING ROW 1 -->
<div id="row_1" class="">
<h3 class="text-white fw-light font-monospace">How it is</h3>
</div>
<!-- LISTING ROW 2 -->
<div id="row_2" class="row">
<div class=" col-3">
<p class="text-white small font-monospace">5 days</p>
</div>
<div class="col-3">
<p class="text-white small font-monospace">$700</p>
</div>
<div class="col-3">
<p class="text-white small font-monospace">26.05.2023</p>
</div>
</div>
<!-- LISTING ROW 3 -->
<div id="row_2" class="row">
<div id="user_rating" class="col-sm-3">
<p class="text-white small font-monospace"><i class="bi bi-heart"></i> 4.9</p>
</div>
<div id="user_from" class="col-sm-3">
<p class="text-white small font-monospace"><i class="bi bi-hand-thumbs-up"></i> 124</p>
</div>
<div id="user_from" class="col-sm-3">
<p class="text-white small font-monospace"><i class="bi bi-hand-thumbs-down"></i> 4</p>
</div>
</div>
<!-- LISTING ROW 3 -->
<div id="row_3" class="row">
<div id=" user_from" class="col-sm-7">
<p class="text-white small font-monospace">by Jorge Martiges</p>
</div>
</div>
</div>
</div>
</section>
<!-- LISTING 2-->
<section id="listing_ad" class="px-3 pb-4">
<div id="row_1" class="row">
<div class="col-3">
<img class="w-100" src="user_listing_images/sm-square/thayran.jpg" alt="">
</div>
<div class="col-sm-9">
<!-- LISTING ROW 1 -->
<div id="row_2" class="row lh-basic">
<h3 class="text-white fw-light font-monospace">How I want it</h3>
</div>
<!-- LISTING ROW 2 -->
<div id="row_2" class="row lh-basic">
<div class="col-sm-3">
<small class="text-white font-monospace">10 day</small>
</div>
<div class="col-sm-3">
<small class="text-white font-monospace">$3999</small>
</div>
<div class="col-sm-5">
<small class="text-white font-monospace">20.05.2023</small>
</div>
</div>
<!-- LISTING ROW 3 -->
<div id="row_2" class="row lh-basic">
<div id="user_rating" class="col-sm-3">
<small class="text-white font-monospace"><i class="bi bi-heart"></i> New</small>
</div>
<div id="user_from" class="col-sm-3">
<small class="text-white font-monospace"><i class="bi bi-hand-thumbs-up"></i> New</small>
</div>
<div id="user_from" class="col-sm-3">
<small class="text-white font-monospace"><i class="bi bi-hand-thumbs-down"></i> New</small>
</div>
</div>
<!-- LISTING ROW 3 -->
<div id="row_3" class="row lh-basic">
<div id="user_from" class="col-sm-7">
<small class="text-white font-monospace">by Tribu de las Aguas</small>
</div>
</div>
</div>
</div>
</section>
<!-- END OF LISTINGS -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>