Bootstrap Hero section Components (201)

Framework

UI Library

Components

Hero section from Saturn

Bootstrap

Saturn

<section class="pb-12 pb-lg-16 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-50 ms-n64" src="saturn-assets/images/headers/light-orange-blue-1.png" alt="">
  <img class="position-absolute top-0 end-0 mt-96 col-5" src="saturn-assets/images/headers/robot-hand-header.png" alt="">
  <img class="position-absolute top-0 end-0" src="saturn-assets/images/headers/star-background-header.png" alt="">
  <nav class="navbar mb-20 navbar-expand-lg navbar-light position-relative">
    <div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="saturn-assets/logos/logo-saturn-dark.svg" alt="">
      </a>
      <button class="navbar-burger navbar-toggler p-2 rounded-1 border-0 bg-light">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Featured</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Solutions</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Products</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Articles</a></li>
        </ul>
        <div class="ms-auto"><a class="btn btn-sm btn-link fw-semibold" href="#">Sign In</a><a class="btn btn-sm btn-outline-light text-primary" href="#">Create an account</a></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Flaro

Bootstrap

Flaro

<section class="pb-20">
  <nav class="navbar navbar-expand-lg navbar-light bg-light"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" src="flaro-assets/logos/flaro-logo-black.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-5 justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#" >Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Solutions</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Resources</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Pricing</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block"><a class="btn btn-primary" href="#" >Try 14 Days Free Trial</a></div>
      <div class="d-lg-none">
        <button class="btn navbar-burger p-0">
          <svg class="text-primary" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="28" fill="currentColor"></rect>
            <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="container position-relative">
    <div class="row align-items-center">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Gradia

Bootstrap

Gradia

<section style="background: url(gradia-assets/images/hero/bg.png) no-repeat center center; background-size: cover;">
  <div>
    <nav class="navbar navbar-dark navbar-expand-lg bg-transparent py-5 py-lg-3 px-5"  >
      <div class="container-fluid"><a class="navbar-brand" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a>
        <div class="collapse navbar-collapse me-5 justify-content-end">
          <ul class="navbar-nav">
            <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
            <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-white mb-0" >Solutions</h3></a></li>
            <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
            <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-white mb-0" >Pricing</h3></a></li>
          </ul>
        </div>
        <div class="d-none d-lg-block">
          <div class="border border-2 border-light rounded-3">
            <button class="btn btn-transparent px-4 py-3 rounded-1" type="button"><span class="fs-17 fw-medium text-white mb-0" >Start Free Trial</span></button>
          </div>
        </div>
        <div class="d-lg-none">
          <button class="btn navbar-burger p-0">
            <svg class="text-dark-light" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Solstice

Bootstrap

Solstice

<section class="pb-12 pb-lg-24">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="#282828"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="white"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="white"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
          <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-light py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Basko

Bootstrap

Basko

<section class="pb-12 pb-lg-24 bg-dark">
  <nav class="navbar mb-12 mb-lg-16 navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="basko-assets/logos/basko-logo-light.png" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button">
        <svg class="text-primary" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
          <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Features</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Pricing</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Automation</a></li>
          <li class="nav-item"><a class="nav-link py-0 border-start border-secondary-dark" href="#">Customer Login</a></li>
        </ul>
        <div><a class="btn btn-primary py-3" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
  </nav>
  <div class="container">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Nightsable

Bootstrap

Nightsable

<section class="pb-12 pb-lg-24 bg-black position-relative overflow-hidden"><img class="position-absolute top-0 start-0" src="nightsable-assets/images/headers/layer-blur.svg" alt="">
  <nav class="position-relative navbar navbar-expand-lg navbar-dark bg-transparent mb-20 z-1">
    <div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
      <button class="navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1 text-primary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">About us</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Wallet</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Blog</a></li>
        </ul>
        <div class="ms-14"><a class="btn btn-outline-light" href="#">Get in touch</a></div>
      </div>
    </div>
  </nav>
  <div class="d-none d-lg-block position-absolute top-0 h-100 end-0 pt-20 pt-lg-40 pb-24 px-5 col-6">
    <div class="position-relative mw-3xl ms-auto"><img class="position-absolute top-0 end-0" src="nightsable-assets/images/headers/lines.svg" alt=""><img src="nightsable-assets/images/headers/star.svg" alt=""><img class="position-absolute top-50 start-0" src="nightsable-assets/images/headers/star.svg" alt=""><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/headers/star.svg" alt=""><img class="img-fluid d-block h-100 mx-auto position-relative" src="nightsable-assets/images/headers/card.png" alt=""></div>
  </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Zeus

Bootstrap

Zeus

<section class="pb-8 pb-lg-20">
  <nav class="navbar navbar-light navbar-expand-lg"  >
    <div class="container-fluid"><a class="navbar-brand h4 text-decoration-none" href="#"><img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto"/></a>
      <div class="d-lg-none">
        <button class="btn btn-sm navbar-burger">
          <svg class="d-block" width="16" height="16" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto me-4">
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        </ul>
        <div class="d-none d-lg-block"><a class="btn btn-secondary text-danger" href="#">Contact Us</a></div>
      </div>
    </div>
  </nav>
  <div class="container mt-8">
    <div class="row align-items-center">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Trizzle

Bootstrap

Trizzle

<section>
  <div class="pt-4 pb-6 bg-dark-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-4 mb-4 mb-md-0">
          <h6 class="fs-5 fw-bold mb-0">Overview</h6><span class="fs-10 text-secondary-light">Get daily review of your recent activities</span>
        </div>
        <div class="col-12 col-md-8">
          <div class="d-flex flex-column flex-sm-row align-items-end align-items-sm-center justify-content-end">
            <div class="d-flex mb-5 mb-sm-0 me-sm-4"><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" style="width: 48px; height: 48px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7L12 11.88L4 7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V9.28L11.48 13.85C11.632 13.9378 11.8045 13.984 11.98 13.984C12.1555 13.984 12.328 13.9378 12.48 13.85L20 9.28V17Z" fill="#919EB0"></path>
                </svg></a><a class="btn p-0 me-4 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" style="width: 48px; height: 48px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z" fill="#919EB0"></path>
                </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-secondary rounded-pill" href="#" style="width: 48px; height: 48px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94733 18.6997 5.81281 16.9855 4.27667C15.2714 2.74053 13.0338 1.91954 10.7329 1.9825C8.43207 2.04546 6.24275 2.98759 4.61517 4.61517C2.98759 6.24275 2.04546 8.43207 1.9825 10.7329C1.91954 13.0338 2.74053 15.2714 4.27667 16.9855C5.81281 18.6997 7.94733 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7738 20.4936 21.8482 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5065 21.8482 21.6171 21.7738 21.71 21.68C21.8903 21.4936 21.991 21.2444 21.991 20.985C21.991 20.7257 21.8903 20.4765 21.71 20.29ZM11 18C9.61556 18 8.26218 17.5895 7.11103 16.8203C5.95989 16.0511 5.06268 14.9579 4.53287 13.6788C4.00306 12.3997 3.86443 10.9923 4.13453 9.63439C4.40463 8.27653 5.07131 7.02925 6.05028 6.05028C7.02925 5.07131 8.27653 4.40463 9.63439 4.13453C10.9923 3.86443 12.3997 4.00306 13.6788 4.53287C14.9579 5.06268 16.0511 5.95989 16.8203 7.11103C17.5895 8.26218 18 9.61556 18 11C18 12.8565 17.2625 14.637 15.9498 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#919EB0"></path>
                </svg></a></div><a class="btn px-2 py-1 d-flex align-items-center btn-secondary rounded-pill" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-5 fw-bold text-white">John Doe</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></a>
          </div>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Zospace

Bootstrap

Zospace

<section class="pb-20 bg-secondary-dark overflow-hidden">
  <nav class="navbar pt-10 navbar-dark navbar-expand-lg"  >
    <div class="container position-relative"><a class="navbar-brand h4 mb-0 text-decoration-none" href="#"><img src="zospace-assets/logos/zospace-logo.svg" alt="" style="height: 30px;" width="auto"/></a>
      <div class="d-lg-none">
        <button class="btn p-0 btn-sm navbar-burger">
          <svg width="39" height="13" viewbox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="39" height="2" rx="1" transform="matrix(-1 0 0 1 39 0)" fill="#C4C4C4"></rect>
            <rect width="20" height="2" rx="1" transform="matrix(-1 0 0 1 20 11)" fill="#C4C4C4"></rect>
          </svg>
        </button>
      </div>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item position-relative"><a class="nav-link" href="#" >Product</a>
            <div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
          </li>
          <li class="nav-item position-relative"><a class="nav-link" href="#" >Story</a>
            <div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
          </li>
          <li class="nav-item position-relative"><a class="nav-link" href="#" >Features</a>
            <div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
          </li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact</a></li>
        </ul>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Wrexa

Bootstrap

Wrexa

<section class="position-relative pb-96 pb-md-64 overflow-hidden bg-light">
  <nav class="position-relative navbar flex-wrap py-2 py-xxl-0 px-4 px-md-10 navbar-expand-xxl navbar-dark bg-dark"  >
    <div class="container-fluid">
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav mb-2 pt-3">
          <li class="nav-item"><a class="nav-link" href="#"><small>Account</small></a></li>
          <li class="nav-item"><a class="nav-link" href="#"><small>Saved</small></a></li>
        </ul>
      </div>
      <div class="d-flex w-100"><a class="d-xxl-none navbar-brand" href="#"><img class="img-fluid" src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto"/></a>
        <div class="collapse navbar-collapse">
          <div class="d-inline-flex flex-grow-1 me-12 align-items-center">
            <div class="col-6">
              <div class="w-100 bg-white opacity-25" style="height: 1px;"></div>
              <ul class="navbar-nav justify-content-end pb-5 mt-6">
                <li class="nav-item dropdown position-relative"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" >Collection</a>
                  <div class="position-absolute bottom-0 start-0 w-100 bg-success-light mb-n5" style="height: 3px;"></div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#" >Projects</a></li>
                <li class="nav-item"><a class="nav-link" href="#" >About</a></li>
              </ul>
            </div>
            <div class="mx-xl-10 mt-n10"><a class="navbar-brand mx-auto" href="#"><img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto"/></a></div>
            <div class="col-auto col-xxl-4">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Flex

Bootstrap

Flex

<section class="pb-24 bg-white overflow-hidden">
  <div class="position-relative">
    <nav class="navbar navbar-dark navbar-expand-lg py-5 py-lg-1">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
        </a>
        <div class="collapse navbar-collapse justify-content-center">
          <ul class="navbar-nav">
            <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Product</a></li>
            <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Features</a></li>
            <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Pricing</a></li>
            <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Resources</a></li>
          </ul>
        </div>
        <div class="d-none d-lg-block">
          <div class="row align-items-center g-6">
            <div class="col-auto"><a class="fs-11 link-secondary fw-medium" href="#">Log In</a></div>
            <div class="col-auto"><a class="btn btn-sm btn-success text-success-light shadow" href="#">Sign Up</a></div>
          </div>
        </div>
        <div class="d-lg-none">
          <a class="btn navbar-burger p-0" href="#">
            <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Yofte

Bootstrap

Yofte

<section class="position-relative bg-light overflow-hidden">
  <nav class="navbar py-0 navbar-expand-lg navbar-light bg-light border-bottom"  >
    <div class="container-fluid"><a class="navbar-brand h6 flex-shrink-0 py-10" href="#"  ><img class="img-fluid" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto"/></a>
      <button class="navbar-burger navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
      <div class="d-none d-xl-flex navbar-collapse ms-12">
        <div class="d-none d-xl-flex align-items-center py-3 ps-8 pe-2 bg-white rounded-3">
          <svg class="flex-shrink-0 me-2" style="width: 24px; height: 18px;" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.5 17.1309L12.5042 11.9551" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.27524 13.8672C10.8789 13.8672 13.8002 10.945 13.8002 7.34033C13.8002 3.73565 10.8789 0.813477 7.27524 0.813477C3.67159 0.813477 0.750244 3.73565 0.750244 7.34033C0.750244 10.945 3.67159 13.8672 7.27524 13.8672Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <input class="form-control bg-white border-0 me-2" type="text" placeholder=""/>
          <select class="form-select bg-white ps-6 pe-6 border-0 border-start" name="" id="">
            <option >All&nbsp;items</option>
            <option >Collection</option>
            <option >Option</option>
          </select>
        </div>
        <ul class="navbar-nav me-12 mb-2 mb-lg-0 mx-auto py-10 px-xxl-12">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#" >Category</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#" >Collection</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#" >Story</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#" >Brand</a></li>
        </ul><a class="d-none d-xl-flex link-dark text-decoration-none me-10" href="#">
          <svg width="23" height="20" viewbox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Pstls.

Bootstrap

Pstls.

<section class="pb-20 position-relative overflow-hidden">
  <nav class="navbar py-10 navbar-expand-xl navbar-light bg-transparent"  >
    <div class="container"><a class="navbar-brand" href="#"  ><img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116"/></a>
      
      <button class="btn p-0 d-xl-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-32 mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#" >Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Products</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Resources</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Pricing</a></li>
        </ul>
        <div class="ms-auto"><a class="btn" href="#" >Log In</a><a class="btn btn-dark mt-3 mt-md-0" href="#" >Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="row d-lg-flex flex-lg-row justify-content-lg-between">
      <div class="position-relative top-0 start-0 ms-n32 pe-32 col-12 d-none d-lg-flex align-items-lg-center col-lg-auto">
        <div class="position-absolute d-flex" style="transform: rotate(-90deg);"><a class="me-14 small fw-bold text-decoration-none text-dark" href="#" >Facebook</a><a class="me-14 small fw-bold text-decoration-none text-dark" href="#" >Twitter</a><a class="small fw-bold text-decoration-none text-dark" href="#" >Instagram</a></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Metis

Bootstrap

Metis

<section style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-size: contain; background-repeat: no-repeat; background-position: top;">
  <div class="container">
    <nav class="position-relative navbar navbar-expand-lg navbar-light py-3 mb-5">
      <a class="navbar-brand" href="#">
        <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item me-2"><a class="nav-link" href="#">Product</a></li>
          <li class="nav-item me-2"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item me-2"><a class="nav-link" href="#">About Us</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        </ul>
        <div class="ms-auto"><a class="btn btn-outline-primary me-2" href="#">Log In</a><a class="btn btn-primary" href="#">Sign Up</a></div>
      </div>
    </nav>
    <div class="mb-5 mx-auto text-center" style="max-width: 32rem;">
      <div class="mb-5">
        <h2 class="mb-3 fs-1 fw-bold">
          <span>The quick</span>
          <span class="text-primary">brown fox</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Cronos

Bootstrap

Cronos

<section class="pb-20 bg-secondary-light">
  <nav class="position-relative navbar navbar-expand-lg navbar-light py-5"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 d-lg-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
      <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
      <div class="d-none d-lg-block"><a class="btn btn-secondary" href="#">Contact Us</a></div>
    </div>
  </nav>
  <div class="container mt-8">
    <div class="row align-items-center mb-12">
      <div class="col-12 col-lg-6 mb-20 mb-lg-0">
        <div class="mw-lg-md">
          <h2 class="mb-5 text-primary">Take care of your performance every day.</h2>
          <p class="lead text-muted lh-lg mb-6">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p><a class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0 mb-lg-0 me-md-4" href="#">Track your performance</a><a class="btn btn-dark d-block d-md-inline-block" href="#">Learn More</a>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Consulty

Bootstrap

Consulty

<section class="pt-8 pb-16 position-relative" style="background-image: url('consulty-assets/headers/picture1.png'); background-position: center; background-size: cover;">
  <div>
    <nav class="navbar navbar-expand-xl navbar-dark">
      <div class="container py-4 rounded-3 bg-dark position-relative"><a class="navbar-brand" href="#"><img class="img-fluid me-2" style="height: 24px;" src="consulty-assets/logos/consulty-logo.svg" alt=""><span class="d-none d-sm-inline-block px-2 py-1 lh-sm fs-10 fw-medium text-primary bg-primary-subtle border border-primary-light rounded-pill">We are hiring!</span></a>
        <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle" id="nav01">
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#"><span>Products</span>
                <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.8479 6L8.18119 10.6667L3.51453 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a></li>
            <li class="nav-item"><a class="nav-link" href="#">Case Studies</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Resources</a></li>
          </ul>
        </div>
        <div class="d-none d-lg-flex align-items-center ms-auto"><a class="btn btn-sm py-3 px-5 fw-semibold me-4 btn-outline-light border-dark-light" href="#">Sign In</a><a class="btn btn-sm py-3 px-5 fw-semibold btn-light border-light" href="#"><span class="me-2">Get A Free Consultation</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 6.66667H7.33333C4.38781 6.66667 2 9.05449 2 12V13.3333M14 6.66667L10 10.6667M14 6.66667L10 2.66667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
        <button class="d-xl-none navbar-burger ms-4 me-1 text-white border-0 bg-transparent" type="button" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.19995 23.2H26.7999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M5.19995 16H26.7999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M5.19995 8.79999H26.7999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Vista

Bootstrap

Vista

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-danger-dark border-bottom border-white border-opacity-10">
    <div class="container"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo.svg" alt=""></a>
      <button class="d-lg-none navbar-burger p-1 border-0 bg-white bg-opacity-10 rounded-pill ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.19995 23.2H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 16H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 8.79999H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle">
        <ul class="navbar-nav bg-white p-1 bg-opacity-10 rounded-pill">
          <li class="nav-item me-2"><a class="nav-link bg-white bg-opacity-10 rounded-pill" href="#">Home</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Features</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Pricing</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link rounded-pill" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block ms-auto"><a class="btn btn-sm pe-3 d-flex align-items-center btn-outline-light border-0" href="#"><span class="me-1">Sign in</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Casper

Bootstrap

Casper

<section class="position-relative"><img class="position-absolute top-0 end-0" src="casper-assets/headers/circle-double-md.svg" alt=""/>
  <nav class="navbar mb-14 navbar-expand-lg navbar-light bg-transparent">
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" src="casper-assets/logos/casper-logo.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-10" id="nav01">
        <div class="ms-auto"><a class="btn me-4 btn-sm text-primary text-uppercase" href="#">SIGN IN</a><a class="btn btn-sm btn-primary text-black text-uppercase" href="#">SIGN UP</a></div>
      </div>
      <button class="navbar-burger btn border-0 p-0 text-black" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 16H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 8H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M20 24L29 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <div class="container mb-14 position-relative"><img class="d-none d-md-block position-absolute top-0 start-0 ms-n2 ms-xl-0 mt-n10 mt-xl-0 animate-spinStar" style="z-index: 10;" src="casper-assets/headers/blink.png" alt=""/>
    <div class="text-center position-relative">
      <div class="d-inline-block position-relative">
        <h1 class="d-none d-sm-inline-block font-heading display-1 fw-semibold position-relative" style="z-index: 1; letter-spacing: -3.44px;">CASPERAI</h1>
        <h1 class="d-inline-block d-sm-none font-heading position-relative" style="z-index: 1; letter-spacing: -3.44px;">CASPERAI</h1>
        <div class="position-absolute bottom-0 mb-4 start-0 w-100"><img class="img-fluid" src="casper-assets/headers/text-casper.svg" alt=""/></div>
        <div class="position-absolute top-0 start-0 w-100 py-6 py-sm-12 py-md-14 py-xl-18 bg-white"></div>
      </div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Mirga

Bootstrap

Mirga

<section class="position-relative pb-12 pb-lg-24 pt-6">
  <img class="position-absolute top-0 start-0 w-100 h-100" src="mirga-assets/images/background/bg-gradient-1.png" alt="">
  <div class="container-fluid mw-8xl position-relative">
    <nav class="navbar px-10 mb-6 navbar-expand-lg bg-white navbar-light rounded-2">
      <div class="position-relative container-fluid px-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <button class="navbar-burger p-0 me-8 bg-transparent border-0">
          <svg width="34" height="14" viewBox="0 0 34 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_231_6602)"><rect width="34" height="3" rx="1.5" fill="#19191B"></rect><rect y="11" width="34" height="3" rx="1.5" fill="#19191B"></rect></g><defs><clipPath id="clip0_231_6602"><rect width="34" height="14" fill="white"></rect></clipPath></defs></svg>
        </button>
        <a class="navbar-brand me-6" href="#">
          <img class="img-fluid" src="mirga-assets/images/logos/mirga-dark-logo.svg" alt="">
        </a>
        <div class="collapse navbar-collapse" id="nav01">
          <div class="ms-auto"><a class="btn btn-sm btn-link py-3 me-8 fw-semibold text-dark" href="#">Login</a><a class="btn btn-sm btn-outline-primary py-3" href="#">Sign up free</a></div>
        </div>
      </div>
    </nav>
    <div class="bg-white px-5 py-10 px-md-10 rounded-2">
      <div class="container position-relative">
        <div class="row">
          <div class="col-12 col-lg-7 col-xl-8 mb-12">
            <div class="py-16 py-lg-28 ps-5 ps-sm-8 ps-md-14 pe-5 border rounded-2">
              <h1 class="d-none d-sm-block font-heading mb-12">
                <span class="d-block">Join the</span>
                <span class="d-block">community, and</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section from Plain 5

Bootstrap

Plain 5

<section class="pb-5">
  <nav class="navbar navbar-expand-lg navbar-light py-4">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="bootstrap5-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#header01" aria-controls="header01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="header01">
        <ul class="navbar-nav ms-auto mt-3 mt-lg-0 mb-3 mb-lg-0 me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        </ul>
        <div><a class="btn btn-primary" href="#">Contact Us</a></div>
      </div>
    </div>
  </nav>
  <div class="container pt-5">
    <div class="row align-items-center mb-5">
      <div class="col-12 col-md-10 col-lg-5 mb-5 mb-lg-0">
        <h2 class="display-4 fw-bold mb-5">Take care of your performance every day.</h2>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

The header is the section at the very top of the page. It is not just a navigation bar, which you will find in another category. Bootstrap header component is a combination of menu and layout of the first view available to the user. It is a critical section in the viewer's interaction with the page. It determines whether the user stays and explores its content or abandons the session. That is why in Shuffle components we pay great attention to aesthetics and visibility of key information.

Choose from many variations of Bootstrap headers. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Bootstrap headers, code and our editor. Try the demo for free!

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Bootstrap 5 Hero section Components

Framework

UI Library

Components

Hero section from Saturn

Get the code for 13,400+ components

Hero section from Flaro

Get the code for 13,400+ components

Hero section from Gradia

Get the code for 13,400+ components

Hero section from Solstice

Get the code for 13,400+ components

Hero section from Basko

Get the code for 13,400+ components

Hero section from Nightsable

Get the code for 13,400+ components

Hero section from Zeus

Get the code for 13,400+ components

Hero section from Trizzle

Get the code for 13,400+ components

Hero section from Zospace

Get the code for 13,400+ components

Hero section from Wrexa

Get the code for 13,400+ components

Hero section from Flex

Get the code for 13,400+ components

Hero section from Yofte

Get the code for 13,400+ components

Hero section from Pstls.

Get the code for 13,400+ components

Hero section from Metis

Get the code for 13,400+ components

Hero section from Cronos

Get the code for 13,400+ components

Hero section from Consulty

Get the code for 13,400+ components

Hero section from Vista

Get the code for 13,400+ components

Hero section from Casper

Get the code for 13,400+ components

Hero section from Mirga

Get the code for 13,400+ components

Hero section from Plain 5

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

From one prompt to production‑ready code

Products

Extensions

UI Components

Company

Support