Back to Browse

Tutorial | Bootstrap 5 Breadcrumbs for HUGO | Static Site Generation

985 views
Jan 12, 2023
6:35

This video is about using a new Hugo page variable to simplify and speed up the generation of Breadcrumbs with Hugo - using Bootstrap 5 breadcrumbs CSS. Watch my full length Hugo courses on skillshare here: https://www.skillshare.com/r/user/sean_emerson?gr_tch_ref=on&gr_trp=off You get 1 month free, to watch my courses using my referral link. Full length HUGO and Bootstrap 5 intro course https://skl.sh/3rsfq4y Full length SASS/SCSS building with Hugo Course https://skl.sh/3IKdWc2 Full length JavaScript building with Hugo Course https://skl.sh/3uHZcEz SEO and asset optimisation with Hugo Course https://skl.sh/3rthbOo Looking for the best value for money travel insurance that suits both travellers and digital nomads? Covid-19 coverage included! Use my link to support this channel. https://safetywing.com/nomad-insurance?referenceID=24741702&utm_source=24741702&utm_medium=Ambassador Like the video? Buy me a cofee!! https://www.buymeacoffee.com/futureweb Code to get started https://github.com/hugo-starters/basic-bootstrap-template Code of completed video https://github.com/future-wd/video-hugo-bootstrap-breadcrumbs Links: https://getbootstrap.com/docs/5.3/components/breadcrumb/#variables https://gohugo.io/variables/page/ https://gohugo.io/content-management/sections/#example-breadcrumb-navigation VIDEO - Installing Hugo on windows https://youtu.be/l7PHRA8t4Bw PLAYLIST - My other HUGO videos https://www.youtube.com/watch?v=sX1_R11wuxk&list=PLE92IfveVXuXTOjdPM_nleN6Cga_d3uJ- 0:00 - Introduction 0:36 - Download template 1:20 - Create breadcrumbs partial 1:55 - Insert bootstrap boilerplate code 2:57 - Create Hugo breadcrumb logic 4:42 - Remove breadcrumbs from home page 5:17 - Additional customizations #hugo #bootstrap #ssg #webdev #coding

Download

0 formats

No download links available.

Tutorial | Bootstrap 5 Breadcrumbs for HUGO | Static Site Generation | NatokHD