Search code examples
htmlcssbootstrap-4row

Bootsrap rows has smaller height of last column has an empty <p></p>

I am rendering a html website with ruby (html.erb). Depending on what values the database has, it either renders <p>somevalue</p> or if the given attribute has no value, it only renders <p></p> inside a column of a row (Bootsrap). If the rendered html is <p></p> the row has smaller height. Have a look at the code below on full page. In Example 1 the second column of the first row has <p></p> and it looses half of its row-height. In Example 2 the

has some value, and the row keeps its height. I want to have a solution where the rows are keeping their height, no matter if the renders html is <p></p> or <p>somevalue</p>

<!-- JavaScript Bundle with Popper -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="h3">
Example 1
</div>

<div class="container">
<div class="row">
  <div class="col-md-2">
    <strong>Row 1</strong> 
  </div>
  <div class="col-md-10">
    <p></p>  
  </div>  
</div>
<div class="row">
  <div class="col-md-2">
    <strong>Row 2</strong> 
  </div>
  <div class="col-md-10">
    <p>41</p>  
  </div>  
</div>
</div>

<div class="h3">
Example 2
</div>


<div class="container">
<div class="row">
  <div class="col-md-2">
    <strong>Row 1</strong> 
  </div>
  <div class="col-md-10">
    <p>42</p>  
  </div>  
</div>
<div class="row">
  <div class="col-md-2">
    <strong>Row 2</strong> 
  </div>
  <div class="col-md-10">
    <p>41</p>  
  </div>  
</div>
</div>

Solution

  • The heights are not equal because of the default margin of <p>. If you remove it, in both scenario it will be of same height. If you want spacing between rows, you could add margin to the row using bootstrap utility class like .mb-2.

    .row p {
  margin-bottom: 0;
}

.row {
  border: 1px solid #ccc;
}
    <!-- JavaScript Bundle with Popper -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="h3">
  Example 1
</div>

<div class="container">
  <div class="row mb-2">
    <div class="col-md-2">
      <strong>Row 1</strong>
    </div>
    <div class="col-md-10">
      <p></p>
    </div>
  </div>
  <div class="row mb-2">
    <div class="col-md-2">
      <strong>Row 2</strong>
    </div>
    <div class="col-md-10">
      <p>41</p>
    </div>
  </div>
</div>

<div class="h3">
  Example 2
</div>


<div class="container">
  <div class="row mb-2">
    <div class="col-md-2">
      <strong>Row 1</strong>
    </div>
    <div class="col-md-10">
      <p>42</p>
    </div>
  </div>
  <div class="row mb-2">
    <div class="col-md-2">
      <strong>Row 2</strong>
    </div>
    <div class="col-md-10">
      <p>41</p>
    </div>
  </div>
</div>