→ Maria Garcia
→ Landing Page

Landing Page

Simple labding page made with boottrap 5

This bootstrap css example is contributed by Maria Garcia, on 16-Jul-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 Maria Garcia

1.1k

v.5.3

Fork Fullscreen

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">MyStartup</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <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="#pricing">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section id="home" class="hero">
    <div class="container text-center">
        <h1 class="display-4">Welcome to MyStartup</h1>
        <p class="lead">We're revolutionizing the way you work</p>
        <a href="#" class="btn btn-primary btn-lg mt-3">Get Started</a>
    </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 text-center">
                <i class="fas fa-rocket feature-icon text-primary"></i>
                <h3>Fast</h3>
                <p>Lightning-quick performance for all your needs.</p>
            </div>
            <div class="col-md-4 text-center">
                <i class="fas fa-lock feature-icon text-primary"></i>
                <h3>Secure</h3>
                <p>Your data is safe with our top-notch security.</p>
            </div>
            <div class="col-md-4 text-center">
                <i class="fas fa-cogs feature-icon text-primary"></i>
                <h3>Customizable</h3>
                <p>Tailor our product to fit your specific requirements.</p>
            </div>
        </div>
    </div>
</section>

<section id="pricing" class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5">Pricing Plans</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="text-center">Basic</h3>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title text-center">$9.99/month</h4>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success"></i> Feature 1</li>
                            <li><i class="fas fa-check text-success"></i> Feature 2</li>
                            <li><i class="fas fa-times text-danger"></i> Feature 3</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-block">Choose Plan</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3 class="text-center">Pro</h3>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title text-center">$19.99/month</h4>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success"></i> Feature 1</li>
                            <li><i class="fas fa-check text-success"></i> Feature 2</li>
                            <li><i class="fas fa-check text-success"></i> Feature 3</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-block">Choose Plan</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="text-center">Enterprise</h3>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title text-center">$49.99/month</h4>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success"></i> Feature 1</li>
                            <li><i class="fas fa-check text-success"></i> Feature 2</li>
                            <li><i class="fas fa-check text-success"></i> Feature 3</li>
                            <li><i class="fas fa-check text-success"></i> Feature 4</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-block">Choose Plan</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">Contact Us</h2>
        <div class="row">
            <div class="col-md-6 mx-auto">
                <form>
                    <div class="mb-3">
                        <input type="text" class="form-control" placeholder="Your Name" required>
                    </div>
                    <div class="mb-3">
                        <input type="email" class="form-control" placeholder="Your Email" required>
                    </div>
                    <div class="mb-3">
                        <textarea class="form-control" rows="5" placeholder="Your Message" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</section>

More Examples

Basic landing page with bootstrap

Author:
Asmath

10 months ago

1.5k

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

Author:
Asmath

10 months ago

1.2k

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

1 year ago

2.3k

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

3 months ago

759

v.5.3
Sticky Table Headings Example

Author:
Anonymous

5 months ago

1.9k

v.5.3
Gallery carousel

Author:
java stories story

1 month ago

491

v.5.3
Progress bars
Progress bar variations

Author:
Reza Farhadi

1 year ago

842

v.5.3
Clean hero section with image

Author:
Prajwal Hallale

1 year ago

2.5k

v.5.3
Spinner buttons
Loading spinner buttons

Author:
Mishti

1 year ago

1.9k

v.5.3
Gradient Pagination

Author:
Levi Treadwell

10 months ago

1k

v.5.3
Search section

Author:
Ankit khedkar

11 months ago

2k

v.5.3
Notification alert
notification alert bootstrapt 5.3 # alert-imessage Alert message custom on bootstrap 5.3 # Example calls JS // imessage.show("Default Success!", "success"); // imessage.show("Top Center Message!", "info", "top-center"); // imessage.show("Bottom Right Warning!", "warning", "bottom-right"); // imessage.show("Bottom Left Error!", "fail", "bottom-left"); // imessage.show("Centered Notification!", "info", "center");

Author:
StarCode Kh

7 months ago

1.9k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent