→ Asmath
→ Mobile App Landing Fage template

Mobile App Landing Fage template

Free mobile app landing page template 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

705

v.5.3

Fork Fullscreen

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
    <div class="container">
        <a class="navbar-brand fw-bold" href="#">AppName</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="#features">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#screenshots">Screenshots</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#pricing">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#download">Download</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 hero-text">
                <h1>Transform Your Life with AppName</h1>
                <p>Experience the next generation of mobile productivity. Download now and join millions of
                    satisfied users.</p>
                <div class="d-flex flex-wrap">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Download_on_the_App_Store_RGB_blk.svg" alt="Download on App Store" class="app-badge">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="Get it on Google Play" class="app-badge">
                </div>
            </div>
            <div class="col-lg-6 text-center pt-4">
                <img src="https://www.apple.com/v/iphone-16/c/images/overview/apple-intelligence/apple_intelligence_endframe__ewm1810mnb0i_xlarge.jpg" alt="Phone Mockup" class="phone-mockup img-fluid">
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-number">1M+</div>
                    <div>Active Users</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-number">4.8</div>
                    <div>App Rating</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-number">50+</div>
                    <div>Countries</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-number">24/7</div>
                    <div>Support</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="features" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold">Amazing Features</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card">
                    <i class="fas fa-bolt feature-icon"></i>
                    <h3>Lightning Fast</h3>
                    <p>Experience blazing-fast performance with our optimized app architecture.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <i class="fas fa-shield-alt feature-icon"></i>
                    <h3>Secure</h3>
                    <p>Your data is protected with military-grade encryption and security measures.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <i class="fas fa-magic feature-icon"></i>
                    <h3>Intuitive Design</h3>
                    <p>Beautiful, user-friendly interface that makes navigation a breeze.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="screenshots" class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold">App Screenshots</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <img src="https://m.media-amazon.com/images/I/51jK5w+ndeL.png" alt="Screenshot 1" class="img-fluid screenshot">
            </div>
            <div class="col-md-4">
                <img src="https://m.media-amazon.com/images/I/51jK5w+ndeL.png" alt="Screenshot 2" class="img-fluid screenshot">
            </div>
            <div class="col-md-4">
                <img src="https://m.media-amazon.com/images/I/51jK5w+ndeL.png" alt="Screenshot 3" class="img-fluid screenshot">
            </div>
        </div>
    </div>
</section>

<section id="pricing" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold">Choose Your Plan</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="pricing-card card">
                    <div class="card-body">
                        <h3 class="card-title">Basic</h3>
                        <h2 class="card-subtitle mb-3">Free</h2>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Basic Features</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>2 Projects</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Community Support</li>
                        </ul>
                        <button class="btn btn-outline-primary w-100">Get Started</button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="pricing-card card featured">
                    <div class="card-body">
                        <h3 class="card-title">Pro</h3>
                        <h2 class="card-subtitle mb-3">$9.99/mo</h2>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check me-2"></i>All Basic Features</li>
                            <li class="mb-2"><i class="fas fa-check me-2"></i>Unlimited Projects</li>
                            <li class="mb-2"><i class="fas fa-check me-2"></i>Priority Support</li>
                        </ul>
                        <button class="btn download-btn w-100">Choose Pro</button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="pricing-card card">
                    <div class="card-body">
                        <h3 class="card-title">Enterprise</h3>
                        <h2 class="card-subtitle mb-3">Custom</h2>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>All Pro Features</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Custom Integration</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>24/7 Support</li>
                        </ul>
                        <button class="btn btn-outline-primary w-100">Contact Us</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold">What Users Say</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="testimonial-card">
                    <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User 1" class="testimonial-img">
                    <p class="mb-3">"This app has completely transformed how I manage my daily tasks. Couldn't be
                        happier!"</p>
                    <h5 class="mb-1">Sarah Johnson</h5>
                    <p class="text-muted">Marketing Director</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="testimonial-card">
                    <img src="https://randomuser.me/api/portraits/men/64.jpg" alt="User 2" class="testimonial-img">
                    <p class="mb-3">"The best app I've used for productivity. Simple yet powerful!"</p>
                    <h5 class="mb-1">Mike Chen</h5>
                    <p class="text-muted">Software Engineer</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="testimonial-card">
                    <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User 3" class="testimonial-img">
                    <p class="mb-3">"Outstanding user experience and fantastic customer support."</p>
                    <h5 class="mb-1">Emily Davis <p class="text-muted">Entrepreneur</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="download" class="cta-section text-center">
    <div class="container">
        <h2 class="text-white fw-bold mb-4">Download AppName Today</h2>
        <p class="text-white mb-5">Take the first step towards a more productive life. It's fast, secure, and free
            to try!</p>
        <div class="d-flex justify-content-center">
            <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Download_on_the_App_Store_RGB_blk.svg" alt="Download on App Store" class="app-badge me-3">
            <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="Get it on Google Play" class="app-badge">
        </div>
    </div>
</section>

<footer class="py-4 bg-dark text-white">
    <div class="container text-center">
        <p class="mb-0">© 2024 AppName. All rights reserved.</p>
        <p class="mb-0">Follow us on
            <a href="#" class="text-white mx-2"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="text-white mx-2"><i class="fab fa-twitter"></i></a>
            <a href="#" class="text-white mx-2"><i class="fab fa-instagram"></i></a>
            <a href="#" class="text-white mx-2"><i class="fab fa-linkedin-in"></i></a>
        </p>
    </div>
</footer>

More Examples

Landing Page
Simple labding page made with boottrap 5

Author:
Maria Garcia

9 months ago

594

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

7 months ago

1.3k

v.5.3
Basic landing page with bootstrap

Author:
Asmath

4 months ago

928

v.5.3
Call to Action Block

Author:
Kemaya m

1 year ago

498

v.4.6
Typewriter Effect

Author:
Anonymous

9 months ago

1.1k

v.4.6
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

8 months ago

617

v.4.6
Login form with social login buttons

Author:
Juan Martinez

9 months ago

4.6k

v.5.3
Buttons with Icons

Author:
Prajwal Hallale

1 year ago

1.3k

v.5.3
Elegant Product Showcase Component

Author:
Anonymous

6 months ago

887

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

8 months ago

2.9k

v.4.6
Bootstrap Login Modal
Elegant Login Form

Author:
Mateo Rojas

4 months ago

3.8k

v.5.3
Beautiful Rating Component
Take user ratings with this form card

Author:
Mateo Rojas

4 months ago

780

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent