HOLIDAY SALE! Save 50% on Membership with code HOLIDAY50. Save 15% on Mentorship with code HOLIDAY15.

5) Build Your Blog Overview Page Lesson

Bootstrap Card Code Reference

3 min to complete · By Martin Breuss

For your reference, here is a skeleton HTML code for a Bootstrap card object, as used in the video:

<div class="card m-4" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Post title</h5>
    <p class="card-text text-muted small">Date published</p>
    <p class="card-text">Post text</p>
    <a href="#" class="btn btn-primary">Read More</a>
  </div>
</div>
Illustration of a lighthouse

Note: The above example does not use Django templating language (DTL), but only pure HTML; you will need to replace the appropriate content with template variables and correctly insert it inside a DTL for loop. The button is also not yet implemented in a way that it would function as expected. This will be done later in the tutorial

Feel free to style your blog posts differently by applying different Bootstrap classes or even your own CSS.


In the upcoming video, you will learn about applying Template Filters on template variables to edit your output before displaying it on the page.