→ 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.3k

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

Landing Page
Simple labding page made with boottrap 5

Author:
Maria Garcia

1 year ago

943

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

Author:
Asmath

8 months ago

1k

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

10 months ago

1.9k

v.5.3
Footer
Footer de Bootstrap con enlaces rápidos, contacto y redes sociales, usando íconos para mejor navegación. Diseño limpio y responsivo. 🚀

Author:
Anonymous

6 months ago

2.1k

v.4.6
Testimonial carousel

Author:
Sofia Petrova

1 year ago

1.5k

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

11 months ago

5.9k

v.4.6
Minimal breadcrumb

Author:
Anonymous

1 year ago

873

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

1 year ago

9.8k

v.5.3
Product card component using Bootstrap 5

Author:
Mateo Rojas

8 months ago

1.6k

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

3 months ago

815

v.5.3
Simple hero section

Author:
Mateo Rojas

8 months ago

4.6k

v.5.3
Stats section
Show your product/website stats beautifully

Author:
Nguyen Minh

1 year ago

1.5k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent