→ Ankit khedkar
→ Hero section with an image

Hero section with an image

Forked from> @ankit/mobile-app-landing-page-with-bootstrap-5

This bootstrap css example is contributed by Ankit khedkar, on 01-Oct-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Hero

Author Ankit khedkar

6.2k

v.5.3

Fork Fullscreen

<header class="hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-3">Experience the Future of Mobile Apps</h1>
                <p class="lead mb-4">Download our revolutionary app today and transform the way you interact with your
                    mobile device.</p>
                <a href="#" class="btn btn-light btn-lg me-2">
                    <i class="fab fa-apple me-2"></i>App Store
                </a>
                <a href="#" class="btn btn-outline-light btn-lg">
                    <i class="fab fa-google-play me-2"></i>Google Play
                </a>
            </div>
            <div class="col-lg-6 py-4">
                <img class="rounded" src="https://images.unsplash.com/photo-1592323360850-e317605f0526?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8YXBwJTIwc2NyZWVuc2hvdHxlbnwwfDB8fHwxNzI3NzgzMDE1fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="App Screenshot">
            </div>
        </div>
    </div>
</header>

More Examples

Simple hero section

Author:
Mateo Rojas

6 months ago

3.3k

v.5.3
Basic hero
Hero section with background image

Author:
Prajwal Hallale

1 year ago

2k

v.4.6
Clean hero section with image

Author:
Prajwal Hallale

1 year ago

1.5k

v.5.3
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

7 months ago

4k

v.5.3
Simple hero
Hero section with a linear gradient

Author:
Moana silva

11 months ago

1k

v.4.6
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

9 months ago

1.5k

v.4.6
Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

1 year ago

2.7k

v.5.3
Animated hero section

Author:
Anonymous

1 year ago

4.1k

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

9 months ago

5.4k

v.5.3
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

3 months ago

1.1k

v.4.6
Default progress bar designs by boostrap css

Author:
Omar Khaled

9 months ago

1.6k

v.5.3
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

6 months ago

2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent