→ Asmath
→ Basic landing page with bootstrap

Basic landing page with bootstrap

This bootstrap css example is contributed by Asmath, on 26-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Front page

Tags: Landing Page

Author Asmath

1.1k

v.5.3

Fork Fullscreen

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">YourBrand</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">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#features">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#testimonials">Testimonials</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section id="home" class="hero-section d-flex align-items-center">
    <div class="container text-center">
        <h1 class="display-1 mb-4">Welcome to YourBrand</h1>
        <p class="lead mb-4">Transform your business with our innovative solutions</p>
        <div class="d-flex justify-content-center gap-3">
            <button class="btn btn-primary btn-lg">Get Started</button>
            <button class="btn btn-outline-light btn-lg">Learn More</button>
        </div>
    </div>
</section>

<section id="features" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">Our Features</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="text-center">
                    <i class="fas fa-rocket feature-icon"></i>
                    <h3>Fast Performance</h3>
                    <p>Lightning-fast solutions that keep your business running efficiently.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="text-center">
                    <i class="fas fa-shield-alt feature-icon"></i>
                    <h3>Secure & Reliable</h3>
                    <p>Bank-grade security to protect your valuable data and assets.</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="text-center">
                    <i class="fas fa-headset feature-icon"></i>
                    <h3>24/7 Support</h3>
                    <p>Round-the-clock customer support to assist you anytime.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="about" class="py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <img src="https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8cGVvcGxlfGVufDB8MHx8fDE3MzUyMTA4NDd8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="About Us" class="img-fluid rounded">
            </div>
            <div class="col-md-6">
                <h2>About Us</h2>
                <p class="lead">We're passionate about delivering excellence</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                <button class="btn btn-primary">Learn More About Us</button>
            </div>
        </div>
    </div>
</section>

<section id="testimonials" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">What Our Clients Say</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body text-center">
                        <img src="https://randomuser.me/api/portraits/men/64.jpg" class="testimonial-img mb-3" alt="Client 1">
                        <p class="card-text">"Outstanding service! The team went above and beyond our expectations."</p>
                        <h5 class="card-title">John Doe</h5>
                        <p class="card-subtitle text-muted">CEO, Tech Corp</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body text-center">
                        <img src="https://randomuser.me/api/portraits/women/24.jpg" class="testimonial-img mb-3" alt="Client 2">
                        <p class="card-text">"The best decision we made for our business growth."</p>
                        <h5 class="card-title">Jane Smith</h5>
                        <p class="card-subtitle text-muted">Founder, StartUp Inc</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body text-center">
                        <img src="https://randomuser.me/api/portraits/women/43.jpg" class="testimonial-img mb-3" alt="Client 3">
                        <p class="card-text">"Incredible results and professional support throughout."</p>
                        <h5 class="card-title">Mike Johnson</h5>
                        <p class="card-subtitle text-muted">Director, Global Solutions</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5">Get In Touch</h2>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form>
                    <div class="mb-3">
                        <input type="text" class="form-control" placeholder="Your Name">
                    </div>
                    <div class="mb-3">
                        <input type="email" class="form-control" placeholder="Your Email">
                    </div>
                    <div class="mb-3">
                        <textarea class="form-control" rows="5" placeholder="Your Message"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</section>

<footer class="bg-dark text-light py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-3">
                <h5>About Us</h5>
                <p>Your trusted partner in business solutions, dedicated to your success.</p>
            </div>
            <div class="col-md-4 mb-3">
                <h5>Quick Links</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-light">Home</a></li>
                    <li><a href="#" class="text-light">Services</a></li>
                    <li><a href="#" class="text-light">About</a></li>
                    <li><a href="#" class="text-light">Contact</a></li>
                </ul>
            </div>
            <div class="col-md-4 mb-3">
                <h5>Connect With Us</h5>
                <div class="d-flex gap-3">
                    <a href="#" class="text-light"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="text-light"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="text-light"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#" class="text-light"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
        <hr class="bg-light">
        <div class="text-center">
            <p class="mb-0">&copy; 2024 YourBrand. All rights reserved.</p>
        </div>
    </div>
</footer>

More Examples

Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

9 months ago

1.7k

v.5.3
Landing Page
Simple labding page made with boottrap 5

Author:
Maria Garcia

1 year ago

795

v.5.3
Mobile App Landing Fage template
Free mobile app landing page template with Bootstrap

Author:
Asmath

6 months ago

911

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

7 months ago

1.2k

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

10 months ago

4.8k

v.4.6
Form Wave
Form Wave

Author:
Rami AlAjo

4 months ago

676

v.4.6
Error Page, you can use HTML, CSS, and Bootstrap.
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects.

Author:
zobaidul kaziex

10 months ago

1.3k

v.4.6
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

10 months ago

1.3k

v.4.6
Feature Cards
showcases three key features with a clean, minimal design.

Author:
Alaric Sloane

8 months ago

1.5k

v.5.3
Simple pricing plan cards
3 pricing plan cards

Author:
Anonymous

1 year ago

818

v.4.6
Features Section
with icons

Author:
Anonymous

10 months ago

1.2k

v.5.3
Bootstrap Login Modal
Elegant Login Form

Author:
César Ferreira

6 months ago

3.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent