How to Create a Portfolio Website with Bootstrap 5

Most developer and designer portfolios fail for one reason: they look like every other template and bury the work. This bootstrap 5 portfolio website tutorial walks through a lean, responsive build that puts your projects first and loads fast.

Plan the Portfolio Structure First

Before writing markup, decide what a hiring manager or client must see in under 15 seconds. For most portfolios that is: who you are, what you do, three to six best projects, and how to contact you. Everything else is optional.

1. Navbar: logo or name, 3 to 4 anchor links, one contact button.
2. Hero: a one-line value statement and a primary call to action.
3. Projects: a card grid with a title, short outcome, and link.
4. About: a photo, two short paragraphs, and a skills list.
5. Contact: an email link or a simple form.

Pick a single-page layout if you have fewer than eight projects. Choose multiple pages when each project needs a full case study. Our guide to multi-page website design with AI and HTML templates covers that process.

Set Up the Project and Navbar

Create an index.html, a css/custom.css file, and an images/ folder. If you build from scratch, include the Bootstrap 5 CSS in the head and the Bootstrap bundle script before the closing body tag, using the official files or your package manager. In the Canvas HTML Template this is already bundled, so you never load Bootstrap separately.

The navbar below is a standard Bootstrap 5 component with a collapsing menu for mobile and anchor links to each section:

<nav class="navbar navbar-expand-lg bg-white border-bottom sticky-top">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#top">Jane Doe</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#mainNav"
            aria-controls="mainNav" aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-3">
        <li class="nav-item"><a class="nav-link" href="#work">Work</a></li>
        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
        <li class="nav-item"><a class="btn btn-dark" href="#contact">Hire me</a></li>
      </ul>
    </div>
  </div>
</nav>

Build a Hero That States Your Value

Skip “Welcome to my website”. State your role, your specialty, and a proof point. Bootstrap’s spacing and typography utilities do most of the work. See our Bootstrap 5 typography guide for the full utility list.

<header id="top" class="py-5 bg-light">
  <div class="container py-lg-5">
    <div class="row align-items-center g-5">
      <div class="col-lg-7">
        <p class="text-uppercase fw-semibold text-secondary mb-2">Product Designer</p>
        <h1 class="display-4 fw-bold mb-3">I design SaaS interfaces that people finish using.</h1>
        <p class="lead text-secondary mb-4">7 years, 40+ shipped products, one obsession with clarity.</p>
        <a href="#work" class="btn btn-dark btn-lg me-2">View my work</a>
        <a href="#contact" class="btn btn-outline-dark btn-lg">Get in touch</a>
      </div>
      <div class="col-lg-5">
        <img src="images/portrait.jpg" class="img-fluid rounded-4" alt="Portrait of Jane Doe">
      </div>
    </div>
  </div>
</header>

Note the single h1 on the page, which helps search engines understand your primary topic.

Create the Project Grid with Cards

The project grid is the most important section. Use the Bootstrap grid with row-cols classes so you get one column on mobile, two on tablets, and three on desktop without writing media queries. If you need help choosing column breakpoints, the Bootstrap Grid Calculator speeds this up.

<section id="work" class="py-5">
  <div class="container">
    <h2 class="mb-4">Selected Work</h2>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
      <div class="col">
        <div class="card h-100 project-card border-0 shadow-sm">
          <img src="images/project-1.jpg" class="card-img-top" alt="Dashboard redesign" loading="lazy">
          <div class="card-body">
            <h3 class="h5 card-title">Analytics Dashboard Redesign</h3>
            <p class="card-text text-secondary">Cut onboarding drop-off by 31%.</p>
            <a href="case-study-1.html" class="stretched-link">Read case study</a>
          </div>
        </div>
      </div>
      <!-- Repeat .col for each project -->
    </div>
  </div>
</section>

Crop every thumbnail to the same ratio (16:10 works well) and add a small hover effect in your custom stylesheet:

.project-card { transition: transform .25s ease, box-shadow .25s ease; }
.project-card:hover { transform: translateY(-6px); box-shadow: 0 1rem 2rem rgba(0,0,0,.12) !important; }
.project-card .card-img-top { aspect-ratio: 16 / 10; object-fit: cover; }

Each card should state a measurable outcome. “Cut onboarding drop-off by 31%” persuades far more than “UI design”. For image-heavy work, our photography portfolio guide goes deeper on presentation.

Add About, Contact, and Final Polish

Keep the about section to two short paragraphs and a skills list. For contact, a visible mailto: link converts better than a hidden form, and it needs no backend. If you want a form, use a service endpoint such as Formspree or your own server handler.

<section id="contact" class="py-5 bg-dark text-white text-center">
  <div class="container">
    <h2 class="mb-3">Have a project in mind?</h2>
    <a href="mailto:hello@janedoe.com" class="btn btn-light btn-lg">hello@janedoe.com</a>
  </div>
</section>

Before launch, run through this checklist:

• Compress images to WebP and keep each under 150 KB.
• Add descriptive alt text and loading="lazy" below the fold.
• Set a unique title tag and meta description.
• Test at 360px, 768px, and 1280px widths.
• Check colour contrast meets WCAG AA (4.5:1 for body text).

Plain Bootstrap or the Canvas HTML Template?

Plain Bootstrap 5 is the right choice if you want full control, a small file size, and time to design every section yourself. It is also the better path for learning. The trade-off is real: you will hand-build sticky headers, page transitions, filterable galleries, and multi-page layouts from scratch.

The Canvas HTML Template bundles Bootstrap 5 plus portfolio layouts, filters, and header variants. Branding is controlled through variables, so a theme change is a few lines:

:root {
  --cnvs-themecolor: #1a73e8;
  --cnvs-themecolor-rgb: 26, 115, 232;
  --cnvs-primary-font: "Inter", sans-serif;
  --cnvs-logo-height: 40px;
}

Canvas is heavier than a hand-written page. For a one-page résumé site that overhead is rarely worth it. For a portfolio with several case studies, it usually saves days. Canvas Builder goes a step further by generating Canvas-ready layouts from a prompt, which is useful when you want a first draft of each section quickly.

If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.