Live preview

Source code

html

<!-- Full page: Startup SaaS -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
  <div class="container"><a class="navbar-brand fw-bold" href="#"><i class="bi bi-rocket-takeoff text-primary"></i> Rocket</a><button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nv"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="nv">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
        <li class="nav-item ms-lg-3"><a class="btn btn-primary" href="#">Start free</a></li>
      </ul>
    </div>
  </div>
</nav>
<section class="py-5" style="background:linear-gradient(180deg,#eff6ff,#fff)">
  <div class="container py-5 text-center"><span class="badge bg-primary-subtle text-primary">New · v2.0 launched</span>
    <h1 class="display-3 fw-bold mt-3">Ship your MVP <span class="text-primary">10× faster</span></h1>
    <p class="lead text-muted mx-auto" style="max-width:620px">Rocket gives you auth, payments, analytics & UI — pre-built. Focus on your product.</p>
    <div class="d-flex gap-2 justify-content-center"><a href="#" class="btn btn-primary btn-lg">Start free trial</a><a href="#" class="btn btn-outline-dark btn-lg"><i class="bi bi-play-circle me-1"></i>Watch demo</a></div><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=600&fit=crop" alt="Dashboard preview screenshot" class="img-fluid rounded-4 shadow mt-5">
  </div>
</section>
<section class="py-5">
  <div class="container">
    <h2 class="text-center fw-bold">Everything you need</h2>
    <div class="row g-4 mt-3">
      <div class="col-md-4">
        <div class="p-4 border rounded-4 h-100"><i class="bi bi-shield-check display-4 text-primary"></i>
          <h5 class="fw-bold mt-3">Enterprise-grade security</h5>
          <p class="text-muted small mb-0">SOC 2, GDPR, and HIPAA compliant infrastructure.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 border rounded-4 h-100"><i class="bi bi-lightning-charge display-4 text-warning"></i>
          <h5 class="fw-bold mt-3">Blazing fast API</h5>
          <p class="text-muted small mb-0">Sub-50ms responses on our global edge network.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 border rounded-4 h-100"><i class="bi bi-graph-up-arrow display-4 text-success"></i>
          <h5 class="fw-bold mt-3">Built to scale</h5>
          <p class="text-muted small mb-0">From 10 to 10 million users — no re-platforming.</p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center fw-bold">Simple pricing</h2>
    <div class="row g-4 mt-3">
      <div class="col-md-4">
        <div class="p-4 border bg-white rounded-4 h-100">
          <h5>Starter</h5>
          <h1>$0</h1>
          <ul class="list-unstyled small">
            <li>✓ 3 projects</li>
            <li>✓ Community support</li>
          </ul><a href="#" class="btn btn-outline-dark w-100">Start</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 border-primary border-2 bg-white rounded-4 h-100 shadow"><span class="badge bg-primary">Popular</span>
          <h5 class="mt-2">Pro</h5>
          <h1>$29<span class="fs-6">/mo</span></h1>
          <ul class="list-unstyled small">
            <li>✓ Unlimited projects</li>
            <li>✓ Priority support</li>
          </ul><a href="#" class="btn btn-primary w-100">Start</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="p-4 border bg-white rounded-4 h-100">
          <h5>Enterprise</h5>
          <h1>Custom</h1>
          <ul class="list-unstyled small">
            <li>✓ SSO + audit logs</li>
            <li>✓ Dedicated CSM</li>
          </ul><a href="#" class="btn btn-outline-dark w-100">Contact</a>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="py-5 text-center bg-primary text-white">
  <div class="container py-3">
    <h2 class="fw-bold">Ready to launch?</h2>
    <p class="lead">Join 10,000+ teams shipping with Rocket.</p><a href="#" class="btn btn-warning btn-lg fw-bold">Start free — no credit card</a>
  </div>
</section>
<footer class="py-4 bg-dark text-white text-center">
  <div class="container"><small>© 2026 Rocket, Inc.</small></div>
</footer>

How to use this home page

Add it to your project in three steps

Copy the HTML from the Source code tab above and paste it inside your <div class="container"> wrapper.
Make sure the Bootstrap 5 CDN CSS and JS are linked in your <head> and before </body>. Any CodeShikhi component assumes Bootstrap 5.3+ is already loaded.
Swap the placeholder text, links, and images for your own content — the layout, spacing, and responsive behaviour stay intact.

The Startup SaaS Landing Page block is fully responsive and works on every screen from 320 px phones to 1440 px+ desktops without additional CSS.

Accessibility checklist

Ship it accessible by default

Use semantic HTML landmarks — <header>, <nav>, <main>, <footer> — so screen readers can navigate your page.
Give every image an alt attribute (empty alt="" if it's decorative).
Label icon-only buttons with aria-label and keep focus outlines visible.
Maintain a contrast ratio of at least 4.5:1 for body text against its background.
Test the home page with Tab / Shift+Tab and Enter — every interactive element should be reachable.

Step-by-step customisation

Make it match your brand

Change the colour palette by overriding Bootstrap CSS variables: --bs-primary, --bs-body-bg.
Adjust spacing with utility classes such as py-5, gap-4, and mt-lg-5 — no custom CSS required.
Swap the typography by loading a Google Font in your <head> and setting --bs-body-font-family.
Replace stock images with brand assets. Keep dimensions similar to avoid layout shift.
Preview at multiple breakpoints (mobile, tablet, desktop) and tweak column spans if content wraps awkwardly.

Need the full theory? Read our Bootstrap 5 Technical Introduction Guide for grid, breakpoints, and Sass customisation in depth.

About the Startup SaaS Landing Page home page

This home page is part of the free CodeShikhi (কোড শিখি) Bootstrap 5 library — a growing collection of copy-paste website building blocks curated for learners and freelance developers. Every block is written in clean, semantic HTML with Bootstrap utility classes, keeps custom CSS to the minimum needed, and works without any build step. Use it as a starting point and adapt the markup, colours, and content to fit your project's brand and audience.

If you spot a bug, want a new variation, or would like to contribute an improvement, reach us via the contact page — we ship updates weekly based on community feedback.

Detailed Technical Breakdown

Detailed Technical Breakdown: Startup SaaS Landing Page

Browser compatibility & standards

The Startup SaaS Landing Page home page is authored against Bootstrap 5.3, which drops legacy Internet Explorer support and targets modern evergreen engines — Chrome, Edge, Firefox, Safari, and all Chromium-based mobile browsers. Because the markup relies exclusively on the standard CSS features that ship with Bootstrap (Flexbox, CSS Grid, CSS custom properties, and the responsive breakpoint system), you can safely deploy this home page to any browser released in the last five years without polyfills. If you need to support very old WebKit or Samsung Internet builds, load the standard Bootstrap 5 CSS from the official jsDelivr CDN — the bundled autoprefixer output already covers those vendor prefixes.

Performance impact

Performance-wise this block is intentionally light. The HTML payload for a typical Bootstrap home page is under 4 KB gzipped, and it shares the same Bootstrap CSS/JS bundle you are already loading — meaning the marginal cost of adding it to a page is effectively zero KB on repeat visits. There is no JavaScript framework runtime, no hydration cost, and no client-side data fetching. The only images referenced are placeholders you will replace with your own assets; when you do, serve them as WebP or AVIF, add explicit width and height attributes to prevent layout shift (CLS), and lazy-load anything below the fold with loading="lazy". These small changes typically move Lighthouse Performance scores from the mid-80s into the 95+ range on both mobile and desktop.

Utility classes used

The home page leans on Bootstrap's utility-first classes to stay declarative: spacing utilities (p-*, m-*, gap-*), the flex helpers (d-flex, align-items-*, justify-content-*), the grid system (container, row, col-lg-*), typography helpers (display-*, lead, text-*), and colour utilities that resolve to Bootstrap CSS variables such as --bs-primary, --bs-body-bg, and --bs-border-color. Because everything is expressed as utilities you can re-theme the entire home page by overriding a handful of CSS variables at the :root level — no Sass recompile required.

Exact customisation steps

Copy the source HTML from the tab above and paste it inside your <body>. The outer <div class="container"> wrapper is already included so the home page sits on the Bootstrap grid.
Replace the placeholder headings and paragraphs with your own copy. Keep heading levels in order (h1 → h2 → h3) so screen readers and search engines can parse the document outline.
Swap any <img> tags for your brand assets. Match the original aspect ratio to avoid layout shift, and always fill in a meaningful alt attribute.
Retune the palette by overriding CSS variables::root { --bs-primary: #4f46e5; --bs-body-bg: #ffffff; }. All utility colour classes update automatically.
Test at each Bootstrap breakpoint — sm (576 px), md (768 px),lg (992 px), xl (1200 px), xxl (1400 px) — using your browser's device toolbar, and tweak column spans if long content wraps.
Ship it with the standard Bootstrap 5 CDN in the <head> and the JS bundle before the closing </body>. No build step required.

Technical & Performance Integration Guide

Technical & Performance Integration Guide — Startup SaaS Landing Page (full-page template)

When and why to use this full-page template

A full-page template stitches together every block on this site into one deployable document: navigation, hero, feature grid, social proof, call to action and footer. Because it is a complete page, the integration rules shift from "drop this in" to "own the whole document head".

Accessibility & ARIA attributes

Exactly one <h1>, one <header>, one <main>, one <footer> per document. Add a skip link (<a class="visually-hidden-focusable" href="#main">Skip to content</a>) as the first focusable element so keyboard users can bypass the navigation. Set the correct lang attribute on <html> — screen readers use it to pick the right pronunciation engine, which matters when you mix Bangla and English content.

Performance notes for this pattern

Load Bootstrap CSS in the head and the JS bundle just before </body>. Inline the handful of critical CSS rules the hero needs and let everything else arrive normally. Lazy-load every image below the fold, preload the hero image and the primary webfont, and self-host fonts with font-display: swap if you want to remove a third-party connection entirely. A page built this way typically lands in the 90s on mobile Lighthouse without further tuning.

Three customisation tricks

Keep one and only one navbar and one footer — duplicated landmarks confuse both crawlers and screen readers.
Give every section an id and link the navbar anchors to them for instant on-page navigation.
Add Organization and WebSite JSON-LD once in the head so the whole template ships search-ready.

Mistakes to avoid

Copying two heroes into the same document, leaving two <h1> elements.
Forgetting the responsive viewport meta tag, which makes the entire mobile layout render at desktop width.

More designs in this section

Portfolio Website Homepage

Portfolio Website Full Home Page

TTC About Full Page

TTC Login Full page

Home Page

Agency Portfolio Full Page