Cutting up a design comp with Sass using Bootstrap 5: A video tutorial

Cutting up designs can be tough. A common request from colleagues might be to leverage a design framework like Bootstrap on a web project. This can cause anxiety for some. It’s a new tool to learn, you can’t seem to do what you want, and it feels like A LOT.

I get it. But Bootstrap doesn’t have to be that scary. I have created a video tutorial that takes a design and implements it via HTML/Sass in the browser. Along the way, I cover a lot of pitfalls and features: Sass file import order, Sass folder architecture, writing HTML in and around Bootstrap’s HTML, grid and spacing utilities, responsive font sizing, color functions, and more.

You can find the code used in the tutorial on this GitHub repo: Bootstrap 5 HTML Cutup.

Check out the video tutorial here.