Bootstrap 5 Cards with Hugo static site generator. Loop over front matter data with range. Tutorial

This video takes you through creating Bootstrap 5 cards with hugo. You set up an array of data and iterate over it to create multiple cards. Stay tuned for part 2.

You get 1 month free, to watch my courses using my referral link.

Full length HUGO and Bootstrap 5 intro course

Full length SASS/SCSS building with Hugo Course

Full length JavaScript building with Hugo Course

SEO and asset optimisation with Hugo Course

Looking for the best value for money travel insurance that suits both travellers and digital nomads? Use my link to support this channel.

Like the video? Buy me a cofee!!

The code you need to get started with this tutorial
The code of the finished tutorial

Bootstrap 5 Cards
Hugo range (loop/iteration)
Hugo with (conditionals)

0:00 - Introduction

#hugo #website #staticsite #staticsitegenerator #jamstack

[ElNadaInLada]

Thank you for this awesome Tutorial, it helped me a lot.
Can you maybe help me out and point me to a solution on how to make those cards in such a way as shown here in the video but with pagination, when there is too many on one site?
Is there a way to make this?

[nandnisharma]

thanks it was helpful ... since i m a beginner ...

[FUSSSEL]

It would be interesting to have an iteration for an bootstrap carousel because there you need an variable to always count up each time (for each carousel item)

[ash.mystic]

Nice video! I haven’t used Bootstrap much so this series is helping me learn useful built-in classes. In this video I think it’s better to use an if statement instead of “with” though. Using “if” is clearer to understand (for yourself or other people working on the site). Less code is not always better. It’s not a big deal to repeat the variable name. And in this case you had to add more code anyway by assigning the Params to $e and referencing $e multiple times so it doesn’t seem like that improved anything. But that was useful to learn how Hugo handles scope/context, which is important to know in other situations.

[cheekygeek]

Good video, like always! I've been looking at lots of different themes, and there is one I found (Hargo) that puts homepage data in data/homepage.yml and then call it on the home page (layouts.index.html like this video) with conditionals for each section like this:
{{ if }}
{{ with site.Data.homepage.banner }}
[HTML doing things with that chunk of banner properties.]
The homepage can have so many sections that it would seem unwieldy putting all of that in the frontmatter of layouts/index.html