title: Adding Message for empty row in bootstrap table
body: <p>I'm working on a Django project but am relatively new to bootstrap and css.
  I have a table with books inventory and its looking fine until there are records in them. But when there are no records, I want to display a placeholder "No books added yet."
  I've tried multiple ways but I'm unable to do so.
  This is my html file:</p>
  
  <pre><code>&lt;table class="table table-hover table-bordered"&gt;
    &lt;thead class="thead-light"&gt;
      &lt;tr&gt;
        &lt;th scope="col"&gt;Title&lt;/th&gt;
        &lt;th scope="col"&gt;Author&lt;/th&gt;
        &lt;th scope="col"&gt;Genre&lt;/th&gt;
        &lt;th scope="col"&gt;Available&lt;/th&gt;
        &lt;th scope="col"&gt;Add Date&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      {% if books.count &gt; 0 %}
      {% for row in books %}
      &lt;tr&gt;
        &lt;td&gt;{{row.title}}&lt;/td&gt;
        &lt;td&gt;{{row.author}}&lt;/td&gt;
        &lt;td&gt;{{row.genre}}&lt;/td&gt;
        &lt;td&gt;{% if row.available %}Yes{% else %}No{% endif %}&lt;/td&gt;
        &lt;td&gt;{{row.date}}&lt;/td&gt;
      &lt;/tr&gt;
      {% endfor %}
      {% else %}
      &lt;tr&gt;
        &lt;td&gt;No Books added yet !&lt;/td&gt;
      &lt;/tr&gt;
      {% endif %}
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Doing so, the placeholder is just comimg on the first cell:</p>
  
  <p><a href="https://i.stack.imgur.com/6yhJJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6yhJJ.png" alt="enter image description here"></a></p>
  
  <p>How to edit this so this cell shows as a complete row?</p>