Stunning Bootstrap Hero Section Templates for Your Website

Bootstrap doesn’t ship a hero component. Version 5.0.0 dropped the jumbotron because utilities can replicate it, according to the official migration guide.

Bootstrap hero section templates are what people build in its place: a prebuilt page header made from the grid and utility classes, with a headline, supporting text, call-to-action buttons and an image or background. It sits at the top of landing pages and homepages, and visitors decide on that first screen whether to keep reading. The Bootstrap 5.3 docs give you six examples to start from.

Bootstrap Hero Section Templates

Each of these is a finished hero for one kind of site, which makes them useful as a starting layout even if you swap every image and line of copy.

SaaS Hero Section with Bootstrap

This hero layout puts your value proposition front and center. The orange CTA button grabs attention (because let’s be honest, subtle doesn’t convert). You get an interactive dashboard mockup that shows what your product actually does, plus those company logos at the bottom that tell visitors “hey, real businesses use this thing.”

UX/UI Portfolio Hero Section Design

Here’s a portfolio intro that doesn’t mess around. Gradients flow across the screen while animated elements float around, creating that depth everyone’s after these days. The 3D card element adds some visual punch. Navigation sits clean at the top, and the CTAs are exactly where they need to be.

Personal Coach Hero Section Design

Teal and gold work surprisingly well together here. The headline hooks visitors right away, and those stats scattered throughout? They build credibility fast.

A professional photo of the coach anchors everything, making the whole thing feel personal rather than corporate.

Photographer Portfolio Hero Section Design

Dark theme with golden highlights. That’s it, that’s the vibe.

Full-screen background imagery sets the mood immediately, while Playfair Display handles the typography (classic choice for photography sites). Floating images create layers of interest without cluttering things up.

Home Decor Hero Section Design

Full-screen lifestyle photography does the heavy lifting. White navigation bar keeps things readable against any background, and the CTAs invite people to actually explore rather than just bounce. Typography stays elegant but readable.

Digital Agency Hero Section Design

Gradient backgrounds with floating service cards that animate in. Stats display front and center because agencies need to prove themselves quickly. Fixed nav bar responds to hover states smoothly, and the whole thing pushes visitors toward engagement without feeling pushy.

Consulting Hero Section with Bootstrap

Professional gradient, floating service cards, animated statistics. The nav bar scrolls nicely, and CTAs stand out without screaming.

It’s that balance between looking credible and being approachable. The interactive elements keep things from feeling too corporate.

Startup Hero Section with Bootstrap

Fixed nav, clean layout, animations that don’t overdo it. The headline needs to work hard here (and it does), supported by a subheading that actually explains something. Floating elements add movement without distraction. Works on phones, tablets, whatever.

Real Estate Hero Section Design

Navigation maintains readability no matter what photo sits behind it. The property search form integrates directly into the hero rather than hiding somewhere below. Stats reinforce trust, and the gradient overlay keeps text legible while letting that beautiful property image shine through.

Accounting Firm Hero Section Design

Gradient background keeps things modern while staying professional. That fixed nav bar follows users down the page (helpful for sites with lots of content). Achievement stats build confidence, and the animations are subtle enough that they don’t feel gimmicky for a financial services firm.

Law Firm Hero Section Design

Blue and gold scream “trust me with your legal problems” in the best way possible. Fixed navigation, bold headline about expertise, and that free consultation CTA positioned prominently. The statistics bar showcases wins and satisfaction ratings because law firms need credibility markers more than most industries.

Beauty Brand Hero Section

Soft pink tones create that premium feel without going overboard. Typography stays clean and readable, which matters when you’re selling products people put on their faces. The product imagery gets space to breathe, and CTAs guide visitors naturally toward exploring more.

Jewelry Store Hero Section

Full-screen jewelry photography because these products need to sparkle. Fixed nav with gold accents (obviously), and that “timeless elegance” headline does exactly what it should. Featured products section includes hover animations that add polish without slowing things down. Built on Bootstrap, so it adapts to any screen size.

Graphic Design Portfolio Hero

Gradient accents with geometric shapes floating around. The portfolio showcase is interactive, stats animate in as you scroll, and typography uses that modern clean look designers expect. Hover animations feel smooth rather than janky. Everything responds properly on mobile because a broken portfolio site is embarrassing for a designer.

Bootstrap hero layouts and which page each one suits

The official Bootstrap Heroes example covers a centered hero, a centered one with a screenshot, a left-aligned one with an image, a vertically centered sign-up form, a bordered hero with a cropped image, and a dark color hero. Six layouts in all (Bootstrap v5.3 documentation).

Template libraries add carousels and background media (image or video) on top of those.

Heroes that need more than utility classes

Carousel heroes are the heaviest option. They reuse the Bootstrap carousel component and load the JavaScript bundle.

Background images and video need a few lines of custom CSS or an inline style, plus a poster image for video.

A background image wants an overlay so the headline stays readable. Video should stay small, with a sharp poster image. And on a carousel, write every slide headline as if it were the only one, because plenty of visitors never see slide two.

Choosing a layout by page type

If you have a product with a screen to show, go with the split layout and put the image on the right from the lg breakpoint up. A single offer with nothing to show works as a centered hero. Short headline, one button.

Lead capture is the form hero, and two or three fields is the ceiling. For a place or an event, use a background image with a dark overlay.

Whatever the layout, make the call to action the only large button in view (it is the one thing the hero exists to do), and let the layout follow from that.

Where to find free and paid Bootstrap hero section templates

Start with the official Heroes example. Move to a free library only when the layout you need is missing there, and pay only for a license without a credit link or for a visual editor.

Free sources

Start Bootstrap publishes full page templates on GitHub under the MIT license, which covers commercial projects, according to its repository READMEs.

Colorlib offers 12 free hero sections in plain HTML and CSS with live demos. FreeFrontend collects hero pens hosted on CodePen, and a pen is only as current as its author kept it.

MDB hero blocks look like Bootstrap but copy into an MDB project, not a plain Bootstrap one.

Paid sources

The Bootstrap team said in its 5.3.8 release post (August 25, 2025) that it would sunset the Bootstrap Themes marketplace, and store pages now carry a banner saying checkout is disabled.

Older roundups still send readers there. Skip those entries.

CodeCanyon lists single-purpose Bootstrap 5 hero templates, HeroXtra among them. Shuffle sells editor access with Bootstrap hero components on a lifetime-license plan.

Free or paid

Free means no cost, MIT options that allow commercial use, and live demos before you copy anything. The downsides are real, though. Some licenses require a credit link or rule out client work. Bootstrap versions are mixed across libraries, and popular layouts get reused everywhere.

Paid gets you the credit link removed, plus support and updates. What you give up is money: licenses are often per developer seat, and you end up paying for a section that takes under an hour to build yourself.

For one hero on one site, free wins. I’d start there almost every time. Agencies reusing templates across clients are the case for paying.

Checking the license before you copy code

MIT lets you use and modify the code commercially as long as you keep the license notice. CC BY 3.0 requires credit. Bootstrap’s docs use it, and so do some free templates, such as GetTemplate’s.

Credit-link licenses are a different story. BootstrapMade’s license page says the free tier keeps the footer line and excludes client websites and paid work. The paid tier removes the credit link, and BootstrapMade licenses cover a single developer.

Read the license file inside the download, not the marketing page.

Which Bootstrap version should a hero template target?

Bootstrap 5.3. The official docs list v5.3.8 as the current release, and the jumbotron component was dropped in v5.0.0, so a template built on .jumbotron was written for Bootstrap 4 or older (Bootstrap migration guide).

The replacement is utility classes. Some padding and a background color rebuild most of the old look, and rounded corners cover the rest. The official Jumbotron example shows the pattern.

Paste Bootstrap 4 markup into a Bootstrap 5 page and things break in a few predictable ways.

• data-toggle becomes data-bs-toggle, so old modals and collapses stop responding
• .btn-block is gone, replaced by .d-grid with a .gap-* utility
• .ml-* and .mr-* are now .ms-* and .me-*
• .float-left and .float-right are now .float-start and .float-end
• jQuery was dropped, so jQuery-based hero sliders and parallax scripts need rewriting

Colorlib’s own roundup notes that many of its 22 classic CodePen jumbotrons were written for Bootstrap 4, and one uses Bulma. A gallery listing is no proof of version.

Stable 5.3.0 landed on May 30, 2023 (Bootstrap blog). Color modes came with it, so data-bs-theme=”dark” on a section flips a hero to dark without custom CSS.

The same release added object-fit utilities, a responsive alternative to a CSS background image.

Before you copy a template, look at what the markup shows. A CDN link or file name with 5.x in it is a good sign, and so is the absence of a jQuery script tag. Attributes should read data-bs-*, not plain data-*. If a .jumbotron class turns up, the template is older than it claims.

The Bootstrap blog said in August 2025 that 5.3.8 was planned as the last patch before v5.4.0. As of October 2026 that release has not shipped. Version 5.3.8 is still the latest stable version, and Bootstrap 6 reached its first alpha (6.0.0-alpha.1) on October 8, 2026. That alpha renames responsive classes from an infix to a prefix, so .d-md-none becomes .md:d-none, which means the hero markup in this guide is for Bootstrap 5 only. Check the docs for a newer minor before you pin a version.

How to build a Bootstrap hero section step by step

A hero comes down to a padded container, a row that splits text and image, a display heading, a lead paragraph and a button group. Column widths come from the grid system, and spacing comes from utilities such as py-5.

1. Load Bootstrap 5.3. Add the CSS with a pinned version in the CDN link, and add the JS bundle only when the page uses a carousel, navbar toggler, or another plugin.
2. Wrap the hero. Use a section with .py-5, and inside it .container for a boxed width or .container-fluid for edge to edge.
3. Add the row. .row with .align-items-center (a flexbox utility) and a gutter class such as .g-5 centers the text against the image.
4. Build the text column. .col-lg-6 holds an h1 with .display-5 and .fw-bold, then a p with .lead.
5. Add the buttons. Wrap .btn .btn-primary .btn-lg and a secondary button in .d-grid .gap-2 .d-sm-flex.
6. Add the image column. A second .col-lg-6 holds an img with .img-fluid, alt text, and explicit width and height attributes.
7. Set the phone order. Columns stack below 992px. Keep the text column first in the HTML, and use .order-lg-1 and .order-lg-2 to swap sides on desktop only.

Place the navbar above the hero section. Version 5 navbars need their own container inside.

<section class="py-5">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<h1 class="display-5 fw-bold">Headline that states the offer</h1>
<p class="lead">One or two sentences that back it up.</p>
<div class="d-grid gap-2 d-sm-flex">
<a href="#" class="btn btn-primary btn-lg">Get started</a>
<a href="#" class="btn btn-outline-secondary btn-lg">Learn more</a>
</div>
</div>
<div class="col-lg-6">
<img src="hero.jpg" class="img-fluid" alt="Product dashboard" width="700" height="500">
</div>
</div>
</div>
</section>

Sizes, outline styles, and states are covered in the guide to Bootstrap button variants.

One thing catches people out here. Columns lost position: relative in v5, so an overlay positioned absolutely inside a column needs .position-relative added (Bootstrap migration guide).

Hero background images, overlays and video in Bootstrap

Bootstrap has no background-image utility, so the image needs a few lines of custom CSS. The overlay, stacking and sizing can all stay in utility classes.

Background image with a dark overlay

Put the image on the section, then add an absolutely positioned layer with bg-black and bg-opacity-50 before the content. The content container gets position-relative so it paints above that layer.

.hero-bg {
background: url("hero.jpg") center / cover no-repeat;
min-height: 100vh;
min-height: 100svh;
}

<section class="hero-bg position-relative text-white">
<div class="position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-50"></div>
<div class="container position-relative py-5">
<h1 class="display-5 fw-bold">Headline here</h1>
</div>
</section>

Pick a hero image with a calm, darker area behind the headline. An overlay can only fix so much.

Opacity matters more than most people expect. Using the WCAG luminance formula, white text over a pure white patch of a photo under a 50% black overlay lands at 3.98:1. That passes for large text only, and body-size text needs roughly 54% to reach 4.5:1.

Real photos rarely hit pure white, but a bright sky or a studio backdrop comes close. A custom linear-gradient in the same CSS rule can darken only the text side and leave the rest of the photo clear.

Background video

1. Add a video element with autoplay, muted, loop and playsinline. Browsers block autoplay with sound, so muted is required.
2. Set a poster image so something shows before the file arrives.
3. Add object-fit-cover plus position-absolute top-0 start-0 w-100 h-100, the same classes the overlay layer uses.
4. Place the overlay after the video and the content container after the overlay.

The object-fit utilities arrived in Bootstrap 5.3 and work on video as well as img. The poster image can become the LCP element, so compress it like any other hero image.

Be considerate about it, too. Skip the video on small screens to save mobile data, and show only the poster to visitors who set prefers-reduced-motion.

Full-height heroes on phones

The vh-100 and min-vh-100 utilities in Bootstrap 5.3.8 compile to 100vh and nothing else. On phones that can cut off the bottom of the hero while the browser bars are visible.

The fix is custom CSS with newer units. The full set of CSS viewport units is worth a read, and going by MDN’s definitions, these are the ones that count for a hero.

Plain vh equals lvh, the large viewport with the browser bars retracted. svh is the small viewport, measured with the bars expanded, which makes it the safe choice for a hero that has to fit the first screen. dvh follows the bars as they move, so it can resize the hero while someone scrolls.

I’d write min-height: 100vh and then min-height: 100svh on the next line, so older browsers keep the fallback.

There is one measurement catch. Chrome’s LCP heuristic ignores elements that fill the whole viewport, since they are probably backgrounds, and a url() background counts as a candidate while a CSS gradient does not. A clean LCP score on a full-height hero does not prove the image loaded quickly, so judge it on a throttled connection too.

Making a Bootstrap hero responsive across breakpoints

Bootstrap breakpoints use min-width media queries. A class with an infix like md applies at that width and everything wider, so a hero needs only a handful of switches.

Mobile-first rules that trip people up

Bootstrap follows mobile-first design, so unprefixed classes are the phone styles and prefixed ones add changes upward. Writing text-lg-start means left-aligned from lg up, not only on lg.

Max-width queries (media-breakpoint-down in Sass) subtract .02px, so down(md) compiles to max-width: 767.98px. That avoids overlap at fractional widths on high-density screens.

CSS variables like –bs-breakpoint-md exist, but they cannot be used inside a media query condition. Custom hero queries need literal values or Sass.

Hiding or swapping the hero image

d-none d-lg-block is the usual way to drop the side image on phones. The catch is that an img with display: none still downloads in most browsers, so mobile visitors pay for a picture they never see.

Better options are a smaller file through srcset and sizes, or a CSS background on the hidden element, which most browsers skip while it is hidden.

The Web Almanac 2025 also points out that when a hero image is hidden or removed on small screens, text can become the LCP element. That is fine if you planned for it, and a surprise in your reports if you did not.

Scaling hero text

Bootstrap’s responsive typography comes from RFS, which is on by default. The display-1 to display-6 sizes shrink on narrow screens without extra classes.

Display classes have no breakpoint variants, though. Changing the step per breakpoint takes a small custom media query.

How to customize a Bootstrap hero template without rewriting it

Work from the lightest change to the heaviest and stop when one works. Most hero edits never reach Sass, and in my experience the first row of this table covers a surprising amount.

Scoping CSS variables to the hero

Give the section its own class, such as hero-brand, and set –bs-* values under it. Nothing else on the site changes.

Button colors are defined on .btn-primary itself, so the selector needs equal weight, for example .hero-brand .btn-primary with –bs-btn-bg inside it. A separate walkthrough covers how to override Bootstrap CSS across more cases.

Sass overrides and import order

1. Import Bootstrap’s functions.
2. Set your own variable values.
3. Import the variables and maps, then the rest of Bootstrap.

Bootstrap’s variables carry !default, which is why your values must come first. You also need the sass CLI to compile, and the Dart Sass deprecation warnings about @import can be ignored for now, per the Bootstrap docs.

Color modes inside a hero

Set data-bs-theme=”dark” on the hero section and components inside follow it. That replaces the deprecated .navbar-dark and .carousel-dark classes, and it removes per-component switching.

You can also define a custom mode with [data-bs-theme=”hero”] and set your own variables there. One gap: the .bg-* classes built from $theme-colors do not respond to color modes yet, so use the .bg-*-subtle classes or CSS variables.

The utilities API handles the full-height problem from earlier. Add a min-height utility with svh values and you get classes like min-svh-75 without writing one-off CSS.

When Bootstrap hero section templates cause problems

Templates save time, and they also ship with habits that hurt speed and readability. These are the failures I’d check first.

Lazy-loaded hero images

Bootstrap’s own Heroes examples, in the v5.3.8 docs source, put loading=”lazy” on the screenshot and left-aligned image heroes. Copy those snippets and the lazy attribute comes along.

The HTTP Archive Web Almanac 2025 found that about 16 to 17 percent of pages lazy-load their LCP image. Google’s web.dev defines a good LCP as 2.5 seconds or less at the 75th percentile.

Anything above the fold should load eagerly. Remove loading=”lazy” from the hero image and add fetchpriority=”high” to that one image only.

Text over photos

WCAG 2.2 success criterion 1.4.3 asks for 4.5:1 on normal text and 3:1 on large text, and failure F83 covers background images that fall short. Poor color contrast is also the most common issue found at scale. WebAIM’s Million report for 2025 found low-contrast text on 79.1% of home pages.

Bootstrap defaults can trip you too. text-secondary on bg-dark works out to 3.29:1, which fails for body-size copy. Use full-strength text colors on dark heroes.

Autoplay carousels

Bootstrap’s docs recommend avoiding autoplay, and WCAG 2.2.2 requires a way to pause moving content that runs longer than five seconds. If you keep a carousel, add a visible pause control.

Web.dev’s carousel guidance also says to keep every slide the same intrinsic size to hold LCP down, and to load slides through HTML rather than JavaScript.

Quick diagnosis

When a template is the wrong choice

If your design departs heavily from the layout, the overrides can outweigh the work of building from the grid. Bootstrap hero section templates fit best when the structure stays close to the original and you change content, color and spacing.

Bootstrap Hero Section Templates FAQ

Can I use Bootstrap hero section templates on a commercial site?

Yes for Bootstrap itself, which is MIT licensed. Third-party templates carry their own terms, so read the license file or listing first. Some free ones require a credit link, and paid ones often restrict resale.

Does a Bootstrap hero need JavaScript?

No. A hero built from grid, utilities and buttons runs on the CSS file alone.

You only load the JavaScript bundle when the hero includes a carousel, a collapsing navbar or another interactive component.

How do I center hero content vertically?

Add d-flex align-items-center and min-vh-100 to the section. The container inside stays horizontally centered through its auto margins.

On phones, replace the height with a custom svh value if the bottom edge gets clipped.

Should the hero headline be an h1?

Usually yes. The hero headline states the main topic of the page, and the official Bootstrap Heroes examples mark theirs up as h1 with display-4 or display-5.

Change the size with display classes instead of dropping to a lower heading level.

Can I place a transparent navbar over the hero?

Yes. Make the hero position-relative, then give the navbar position-absolute top-0 start-0 w-100 z-3 and no background color.

Add extra top padding to the hero so the headline does not sit under the menu. The collapsed mobile menu still needs a solid background to stay readable.

Do Bootstrap hero section templates work in React?

Yes, because a hero is only markup and CSS. Rename class to className and close every tag in JSX.

React-Bootstrap offers Container, Row and Col components if you prefer components over raw class names.

Picking the Right Bootstrap Hero Template

Bootstrap hero section templates from the official 5.3 docs make the safest starting point, because they are free and kept current with the framework.

Fix problems in this order, since defects that reach every visitor outrank taste. Image loading and dimensions come first, then text contrast over the background, and brand colors and spacing last.

The trade-off is a plain look. A third-party template arrives more polished but brings its own CSS to audit before launch.

This advice was checked in October 2026 against the 5.3.8 docs. A stable Bootstrap 6 release would call for a recheck of class names and color-mode behavior.

With the hero settled, the Bootstrap navbar above it is the next piece to build.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• How to Insert Image in Figma With Ease - November 3, 2026
• How to Download Figma Files Fast and Free - October 30, 2026
• Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026