Patrix: Bootstrap 5 Landing Page

A multi purpose, responsive landing page built with Bootstrap 5 and Sass. I made it to learn how Bootstrap is customised through Sass instead of overriding CSS.

Live: https://zainulabideen5.github.io/Bootstrap-website/

Sections

• Hero
• Client logos
• Services: marketing, web development and cloud hosting
• Testimonials
• FAQ accordion
• Portfolio of recent work
• Call to action and footer

What I practised

• Customising Bootstrap variables and components with Sass
• Splitting styles into partials for components and sections
• Responsive grid layouts
• Font Awesome icons compiled from Sass

Project structure

scss/
  style.scss        entry point
  _custom.scss      Bootstrap variable overrides
  components/       buttons, typography, animations, mixins
  sections/         one partial per page section
assets/css/         compiled CSS
images/             artwork, portfolio, testimonials

Run it locally

npm install
npm run compile-sass    # watches scss/ and writes assets/css/

Then open index.html in a browser.

Built with

• Bootstrap 5
• Sass
• Font Awesome
• PostCSS and Autoprefixer

---

Zain Ul Abideen