I am using bootstrap's ROW and COL to make a food menu, im not sure if this is the right way to do this because i get gaps between rows.
how it should look like:
but i get this:
As you can see there is a horrible gap between the rows
my code: jsFiddle HTML
<div class="row">
<div class="col-9">
<h3 class="menu-dish">Chateau D'Armailhac Rothschild Pauillac 5-Eme G.C.C.</h3>France
</div>
<div class="col-3">
<div class="row">
<div class="col-6 price">
123 usd
</div>
<div class="col-6 price">
123 usd
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-9">
<h3 class="menu-dish">Chateau D'Armailhac Rothschild Pauillac 5-Eme G.C.C.</h3>France
</div>
<div class="col-3">
<div class="row">
<div class="col-6 price">
123 usd
</div>
<div class="col-6 price">
123 usd
</div>
</div>
</div>
</div>
CSS
.price {
border-left: 1px solid black;
border-right: 1px solid black;
}
.price:first-child{
border-left:none;
}
.price:last-child{
border-right:none;
}
Use
h-100
to nestedrow
See sizing in bootstrap-4:https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp