Live preview

Source code

html

<!-- Top Header -->
<div class="bg-dark text-white py-2 d-none d-lg-block">
  <div class="container d-flex justify-content-between align-items-center">
    <div class="small">
      <i class="bi bi-envelope-at me-2"></i> info@modernagency.com
      <span class="mx-3">|</span>
      <i class="bi bi-telephone me-2"></i> +1 (555) 000-1234
    </div>
    <div class="d-flex align-items-center">
      <div id="currentDateTime" class="small me-4 border-end pe-3 border-secondary"></div>
      <div class="social-links">
        <a href="#" class="text-white ms-3 text-decoration-none"><i class="bi bi-facebook"></i></a>
        <a href="#" class="text-white ms-3 text-decoration-none"><i class="bi bi-twitter-x"></i></a>
        <a href="#" class="text-white ms-3 text-decoration-none"><i class="bi bi-linkedin"></i></a>
        <a href="#" class="btn btn-sm btn-outline-light ms-4">Login</a>
      </div>
    </div>
  </div>
</div>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm py-3">
  <div class="container">
    <a class="navbar-brand fw-bold fs-3 text-primary" href="#">
      <i class="bi bi-lightning-charge-fill"></i> AGENCY
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto fw-medium">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#news">News</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        <li class="nav-item ms-lg-3"><a class="btn btn-primary px-4 rounded-pill" href="#">Get a Quote</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- Hero Carousel -->
<header id="heroHeader">
  <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
      <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner text-white">
      <div class="carousel-item active vh-100" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=1920'); background-size: cover; background-position: center;">
        <div class="carousel-caption h-100 d-flex flex-column justify-content-center align-items-center animate-up">
          <h1 class="display-1 fw-bold mb-4">Innovate Your Future</h1>
          <p class="lead mb-5 col-lg-8 mx-auto">Discover modern solutions for your business growth with our expert consulting services.</p>
          <div class="d-flex gap-3">
            <a href="#" class="btn btn-primary btn-lg px-5">Get Started</a>
            <a href="#" class="btn btn-outline-light btn-lg px-5">Learn More</a>
          </div>
        </div>
      </div>
      <div class="carousel-item vh-100" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&q=80&w=1920'); background-size: cover; background-position: center;">
        <div class="carousel-caption h-100 d-flex flex-column justify-content-center align-items-center">
          <h1 class="display-1 fw-bold mb-4">Digital Excellence</h1>
          <p class="lead mb-5 col-lg-8 mx-auto">We provide top-tier web and design solutions tailored for your unique brand identity.</p>
          <a href="#" class="btn btn-primary btn-lg px-5">Our Portfolio</a>
        </div>
      </div>
      <div class="carousel-item vh-100" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&q=80&w=1920'); background-size: cover; background-position: center;">
        <div class="carousel-caption h-100 d-flex flex-column justify-content-center align-items-center">
          <h1 class="display-1 fw-bold mb-4">Strategic Success</h1>
          <p class="lead mb-5 col-lg-8 mx-auto">Join over 1,000+ businesses who trusted us to scale their digital operations.</p>
          <a href="#" class="btn btn-primary btn-lg px-5">Contact Us</a>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon p-3 bg-dark rounded-circle"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon p-3 bg-dark rounded-circle"></span>
    </button>
  </div>
</header>

<!-- Welcome Section -->
<section id="about" class="py-5 scroll-reveal">
  <div class="container py-5">
    <div class="row align-items-center g-5">
      <div class="col-lg-6">
        <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=800" class="img-fluid rounded-4 shadow-lg" alt="About">
      </div>
      <div class="col-lg-6">
        <h6 class="text-primary fw-bold text-uppercase mb-3">Welcome to Agency</h6>
        <h2 class="display-5 fw-bold mb-4">We are Creative Creators & Digital Solution Providers</h2>
        <p class="text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Our approach combines data-driven insights with creative excellence.</p>
        <div class="row g-4 mb-5">
          <div class="col-sm-6">
            <div class="d-flex align-items-center">
              <i class="bi bi-check-circle-fill text-primary fs-4"></i>
              <span class="ms-3 fw-bold">Quality Service</span>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="d-flex align-items-center">
              <i class="bi bi-check-circle-fill text-primary fs-4"></i>
              <span class="ms-3 fw-bold">Expert Support</span>
            </div>
          </div>
        </div>
        <a href="#" class="btn btn-primary px-4 py-2">Read More About Us</a>
      </div>
    </div>
  </div>
</section>

<!-- Stats Counter -->
<section class="bg-primary py-5 text-white">
  <div class="container">
    <div class="row text-center g-4">
      <div class="col-md-3 col-6">
        <div class="counter-item">
          <h2 class="counter-value display-4 fw-bold" data-target="1500">0</h2>
          <p class="mb-0">Projects Done</p>
        </div>
      </div>
      <div class="col-md-3 col-6">
        <div class="counter-item">
          <h2 class="counter-value display-4 fw-bold" data-target="250">0</h2>
          <p class="mb-0">Satisfied Clients</p>
        </div>
      </div>
      <div class="col-md-3 col-6">
        <div class="counter-item">
          <h2 class="counter-value display-4 fw-bold" data-target="50">0</h2>
          <p class="mb-0">Awards Won</p>
        </div>
      </div>
      <div class="col-md-3 col-6">
        <div class="counter-item">
          <h2 class="counter-value display-4 fw-bold" data-target="15">0</h2>
          <p class="mb-0">Years Experience</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Featured Services -->
<section id="services" class="py-5 bg-light scroll-reveal">
  <div class="container py-5">
    <div class="text-center mb-5">
      <h6 class="text-primary fw-bold text-uppercase">Our Services</h6>
      <h2 class="display-5 fw-bold">What We Offer</h2>
    </div>
    <div class="row g-4">
      <div class="col-lg-4">
        <div class="card h-100 border-0 shadow-sm p-4 hover-lift">
          <div class="icon-box mb-4 fs-1 text-primary"><i class="bi bi-code-slash"></i></div>
          <h4 class="fw-bold mb-3">Web Development</h4>
          <p class="text-muted">High-performance custom websites built with the latest modern techniques.</p>
          <a href="#" class="stretched-link text-decoration-none fw-bold">Read More <i class="bi bi-arrow-right"></i></a>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card h-100 border-0 shadow-sm p-4 hover-lift">
          <div class="icon-box mb-4 fs-1 text-primary"><i class="bi bi-palette"></i></div>
          <h4 class="fw-bold mb-3">UI/UX Design</h4>
          <p class="text-muted">User-centric designs that provide intuitive experiences for your customers.</p>
          <a href="#" class="stretched-link text-decoration-none fw-bold">Read More <i class="bi bi-arrow-right"></i></a>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card h-100 border-0 shadow-sm p-4 hover-lift">
          <div class="icon-box mb-4 fs-1 text-primary"><i class="bi bi-graph-up-arrow"></i></div>
          <h4 class="fw-bold mb-3">Digital Marketing</h4>
          <p class="text-muted">Comprehensive marketing strategies to help you reach more audience.</p>
          <a href="#" class="stretched-link text-decoration-none fw-bold">Read More <i class="bi bi-arrow-right"></i></a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Why Choose Us -->
<section class="py-5 bg-dark text-white scroll-reveal">
  <div class="container py-4">
    <div class="row align-items-center g-5">
      <div class="col-lg-6">
        <h2 class="display-5 fw-bold mb-4">Why Choose Our Expertise?</h2>
        <div class="d-flex mb-4">
          <div class="flex-shrink-0"><i class="bi bi-shield-check fs-2 text-primary"></i></div>
          <div class="ms-3">
            <h5 class="fw-bold">Secured & Trustworthy</h5>
            <p class="text-secondary">We prioritize safety and integrity in every project we handle.</p>
          </div>
        </div>
        <div class="d-flex mb-4">
          <div class="flex-shrink-0"><i class="bi bi-lightning fs-2 text-primary"></i></div>
          <div class="ms-3">
            <h5 class="fw-bold">Fast Performance</h5>
            <p class="text-secondary">Optimized execution flows that guarantee speed and reliability.</p>
          </div>
        </div>
        <div class="d-flex">
          <div class="flex-shrink-0"><i class="bi bi-headset fs-2 text-primary"></i></div>
          <div class="ms-3">
            <h5 class="fw-bold">24/7 Support</h5>
            <p class="text-secondary">Our dedicated team is always ready to assist you any time.</p>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="position-relative">
          <img src="https://images.unsplash.com/photo-1600880212319-78d7e59b0f2a?auto=format&fit=crop&q=80&w=800" class="img-fluid rounded-4 shadow" alt="Feature">
          <div class="position-absolute bottom-0 start-0 bg-primary p-4 rounded m-4 shadow-lg">
            <h3 class="mb-0 fw-bold">100%</h3>
            <p class="mb-0 small">Client Satisfaction</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Latest News -->
<section id="news" class="py-5 scroll-reveal">
  <div class="container py-5">
    <div class="text-center mb-5">
      <h6 class="text-primary fw-bold text-uppercase">Blog & News</h6>
      <h2 class="display-5 fw-bold">Latest Industry Trends</h2>
    </div>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card border-0 shadow-sm overflow-hidden h-100">
          <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=600" class="card-img-top" alt="News">
          <div class="card-body p-4">
            <div class="small text-primary mb-2">October 24, 2023</div>
            <h5 class="card-title fw-bold">SEO Strategies for 2024</h5>
            <p class="card-text text-muted">Keep up with the latest Google algorithm updates.</p>
            <a href="#" class="btn btn-link p-0 text-decoration-none fw-bold">Read Blog</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card border-0 shadow-sm overflow-hidden h-100">
          <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=600" class="card-img-top" alt="News">
          <div class="card-body p-4">
            <div class="small text-primary mb-2">October 21, 2023</div>
            <h5 class="card-title fw-bold">Mastering Data Analytics</h5>
            <p class="card-text text-muted">Utility of big data in small business operations.</p>
            <a href="#" class="btn btn-link p-0 text-decoration-none fw-bold">Read Blog</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card border-0 shadow-sm overflow-hidden h-100">
          <div class="position-relative">
            <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&q=80&w=600" class="card-img-top" alt="News">
            <span class="badge bg-danger position-absolute mt-2 me-2 top-0 end-0">Trending</span>
          </div>
          <div class="card-body p-4">
            <div class="small text-primary mb-2">October 18, 2023</div>
            <h5 class="card-title fw-bold">UI Trends in E-commerce</h5>
            <p class="card-text text-muted">Designing for higher conversion in online stores.</p>
            <a href="#" class="btn btn-link p-0 text-decoration-none fw-bold">Read Blog</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Partners Container (Simplified Slider Style) -->
<section class="py-5 bg-white border-top border-bottom">
  <div class="container overflow-hidden">
    <div class="row align-items-center text-center row-cols-2 row-cols-md-4 row-cols-lg-6 g-4 partner-slider">
      <div class="col"><img src="https://img.icons8.com/color/144/google-logo.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
      <div class="col"><img src="https://img.icons8.com/color/144/amazon.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
      <div class="col"><img src="https://img.icons8.com/color/144/slack.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
      <div class="col"><img src="https://img.icons8.com/color/144/intel.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
      <div class="col"><img src="https://img.icons8.com/color/144/spotify.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
      <div class="col"><img src="https://img.icons8.com/color/144/netflix.png" class="img-fluid opacity-50 grayscale" style="max-height: 40px;" alt="Logo"></div>
    </div>
  </div>
</section>

<!-- Newsletter -->
<section class="py-5">
  <div class="container">
    <div class="bg-primary rounded-4 p-5 text-white text-center position-relative overflow-hidden">
      <div class="row justify-content-center position-relative z-1">
        <div class="col-lg-7">
          <h2 class="fw-bold mb-3">Newsletter Subscription</h2>
          <p class="mb-4">Get the latest news and special offers directly in your inbox.</p>
          <form class="row g-2">
            <div class="col-md-9">
              <input type="email" class="form-control form-control-lg rounded-pill" placeholder="Enter your email address">
            </div>
            <div class="col-md-3 d-grid">
              <button class="btn btn-dark btn-lg rounded-pill">Subscribe</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="bg-dark text-white pt-5 mt-5">
  <div class="container py-5 border-bottom border-secondary">
    <div class="row g-4">
      <div class="col-lg-4">
        <h4 class="fw-bold mb-4 text-primary">AGENCY</h4>
        <p class="text-secondary pe-lg-5">Building digital products that people love. We are a full-service agency specializing in design and development.</p>
        <div class="d-flex pt-3">
          <a href="#" class="btn btn-outline-light btn-sm rounded-circle me-2"><i class="bi bi-facebook"></i></a>
          <a href="#" class="btn btn-outline-light btn-sm rounded-circle me-2"><i class="bi bi-linkedin"></i></a>
          <a href="#" class="btn btn-outline-light btn-sm rounded-circle me-2"><i class="bi bi-instagram"></i></a>
        </div>
      </div>
      <div class="col-lg-2 col-md-4">
        <h5 class="fw-bold mb-4">Quick Links</h5>
        <ul class="list-unstyled text-secondary">
          <li class="mb-2"><a href="#" class="text-decoration-none text-secondary">About Us</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Services</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Portfolio</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Careers</a></li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-4">
        <h5 class="fw-bold mb-4">Support</h5>
        <ul class="list-unstyled text-secondary">
          <li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Help Center</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Privacy Policy</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Terms of Service</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-secondary">Contact FAQ</a></li>
        </ul>
      </div>
      <div class="col-lg-4 col-md-4">
        <h5 class="fw-bold mb-4">Contact Info</h5>
        <p class="text-secondary mb-2"><i class="bi bi-geo-alt me-3 text-primary"></i> 123 Business Avenue, London, NY</p>
        <p class="text-secondary mb-2"><i class="bi bi-telephone me-3 text-primary"></i> +1 234 567 890</p>
        <p class="text-secondary mb-2"><i class="bi bi-envelope me-3 text-primary"></i> support@agency.com</p>
      </div>
    </div>
  </div>
  <div class="container py-4 text-center text-secondary small">
    <p class="mb-0">&copy; 2023 Creative Agency. All rights reserved.</p>
  </div>
</footer>

<style>
  :root {
    --bs-primary: #0d6efd;
  }

  .carousel-item {
    transition: transform 1.2s ease-in-out, opacity 1s ease-in-out;
  }

  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
  }

  .grayscale {
    filter: grayscale(100%);
    transition: 0.3s;
  }

  .grayscale:hover {
    filter: grayscale(0%);
  }

  .scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-up {
    animation: fadeIn 1s ease-out;
  }

</style>

<script>
  // Count Animation
  function animateCounter(el) {
    const target = +el.getAttribute('data-target');
    const count = +el.innerText;
    const speed = target / 100;

    if (count < target) {
      el.innerText = Math.ceil(count + speed);
      setTimeout(() => animateCounter(el), 30);
    } else {
      el.innerText = target + '+';
    }
  }

  // Intersection Observer for Animations
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        if (entry.target.classList.contains('counter-value')) {
          animateCounter(entry.target);
        }
      }
    });
  }, {
    threshold: 0.5
  });

  document.querySelectorAll('.scroll-reveal, .counter-value').forEach(el => observer.observe(el));

  // Current Date & Time
  function updateDateTime() {
    const now = new Date();
    const options = {
      weekday: 'short',
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    };
    document.getElementById('currentDateTime').innerText = now.toLocaleDateString('en-US', options);
  }
  setInterval(updateDateTime, 1000);
  updateDateTime();

</script>

How to use this component

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 Agency Full Home 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 component 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 Agency Full Home Page component

This component 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: Agency Full Home Page

Browser compatibility & standards

The Agency Full Home Page component 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 component 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 component 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 component 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 component 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 component 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 — Agency Full Home Page (component)

When and why to use this component

This block is written as a self-contained Bootstrap 5 section: a single outer container, a predictable grid inside it, and no dependencies beyond the standard Bootstrap CSS and JS bundle. That makes it safe to paste into an existing page without worrying about class-name collisions or cascade conflicts.

Accessibility & ARIA attributes

Keep the heading hierarchy in order, label any icon-only control with aria-label, and give every image either a descriptive alt attribute or an empty alt="" when it is decorative. Interactive elements must be real <button> or <a> tags so they are reachable with Tab and activatable with Enter. If the block includes a collapsible or dismissible element, preserve Bootstrap's data-bs-* attributes — they generate the aria-expanded and aria-controls wiring for you.

Performance notes for this pattern

The markup is under a few kilobytes gzipped and reuses the Bootstrap bundle already on the page, so the marginal cost of adding it is close to zero. Replace placeholder images with optimised WebP or AVIF files, declare width and height to keep Cumulative Layout Shift at zero, and add loading="lazy" to anything that renders below the fold.

Three customisation tricks

Override --bs-primary and --bs-body-font-family at :root to rebrand the block without touching its markup.
Adjust rhythm with spacing utilities (py-5, gap-4, mt-lg-5) instead of writing custom CSS.
Test at every Bootstrap breakpoint and change only the column spans when long copy wraps awkwardly.

Mistakes to avoid

Removing the .container wrapper, which makes the content run to the viewport edges.
Pasting the block twice on one page when it is meant to appear once.

More designs in this section

E-commerce Login Page

E-commerce login Page

About Agency Full Page

Technical Training Center (TTC) Home Page

Technical Training Center About Page