How to Use a Bootstrap 5 Hero Image with Text

Using a hero image with text in Bootstrap 5 involves a few steps. Here’s a simple guide to help you get started:

Create Hero Section: Use a div element to create a hero section. You can use Bootstrap classes like bg-image to add a background image.

<div class="bg-image"
  style="background-image: url(''); height: 40vh;">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col-12 text-center">
        <h1>Your Hero Title</h1>
        <p class="lead ">Your inspiring text goes here.</p>
hero section image with text

Customize Styles: If you need to customize the styles further, you can add your CSS.

.bg-image {
    background-size: cover;
    background-position: center;

Full-width Hero with Overlay and Call-to-action Button

<!doctype html>
<html lang="en">

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5</title>
  <link href="" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    .hero-image {
      background-image: url('');
      background-size: cover;
      background-position: center;
      height: 100vh;
      position: relative;

    .hero-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: center;

  <div class="hero-image">
    <div class="hero-text">
      <h1>Welcome to My Website</h1>
      <p>Some inspiring text goes here.</p>
      <a href="#" class="btn btn-primary">Learn More</a>
  <script src=""

 Bootstrap 5 Hero Image with Text

Hero with Left-aligned Text and Image

<div class="container-fluid px-0">
  <div class="row gx-0">
    <div class="col-lg-6 bg-primary text-white d-flex align-items-center">
      <div class="p-5">
        <h1 class="fw-bold">Explore Our Services</h1>
        <p class="lead">We offer a wide range of solutions for your needs.</p>
        <a href="#" class="btn btn-light btn-lg">Get Started</a>
        background-image: url('');
        background-size: cover;
        background-position: center;
        height: 48vh;"
Left-aligned Text and Image
Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,

Share link