→ 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

1.4k

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

1 year ago

1.2k

v.5.3
Basic landing page with bootstrap

Author:
Asmath

11 months ago

1.6k

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

1 year ago

2.5k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 year ago

11.2k

v.5.3
Boostrap Buttons
Basic Buttons - Standard button styles with different color variations Outline Buttons - Ghost buttons with colored borders that fill on hover Button Sizes - Three different size variations for different contexts Icon Buttons - Buttons with Bootstrap Icons integration Block Buttons - Full-width buttons using Bootstrap's grid system Button Groups - Grouped buttons for related actions Loading Buttons - Interactive buttons with loading spinners

Author:
Asmath

11 months ago

3k

v.5.3
Simple hero
Hero section with a linear gradient

Author:
Moana silva

1 year ago

2.1k

v.4.6
Parallax Image Gallery
An eye-catching gallery section with parallax scrolling effects and image captions.

Author:
Prajwal Hallale

1 year ago

6.1k

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

1 year ago

8k

v.4.6
Progress bars made with bootstrap 5.3

Author:
Anonymous

1 year ago

2.2k

v.5.3
Card grid
card grid for blog articles etc. it also has author's details

Author:
Anonymous

1 year ago

2k

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

Author:
karia

1 year ago

3.5k

v.5.3
Star Rating Component

Author:
Alaric Sloane

1 year ago

4.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent