→ Maria Garcia
→ Coming Soon Page

Coming Soon Page

Coming Soon landing page example made with Bootstrap 5

This bootstrap css example is contributed by Maria Garcia, on 17-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page

Tags: Coming Soon Page

Author Maria Garcia

968

v.5.3

Fork Fullscreen

<section class="coming-soon vh-100 d-flex align-items-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 text-center">
        <h1 class="display-1 fw-bold mb-4">Coming Soon</h1>
        <p class="lead mb-5">We're working hard to bring you something amazing. Stay tuned!</p>
        
        <div class="countdown d-flex justify-content-center mb-5">
          <div class="px-3">
            <h2 id="days" class="display-4 fw-bold">00</h2>
            <p>Days</p>
          </div>
          <div class="px-3">
            <h2 id="hours" class="display-4 fw-bold">00</h2>
            <p>Hours</p>
          </div>
          <div class="px-3">
            <h2 id="minutes" class="display-4 fw-bold">00</h2>
            <p>Minutes</p>
          </div>
          <div class="px-3">
            <h2 id="seconds" class="display-4 fw-bold">00</h2>
            <p>Seconds</p>
          </div>
        </div>
        
        <form class="d-flex justify-content-center">
          <div class="input-group mb-3 w-75">
            <input type="email" class="form-control" placeholder="Enter your email" aria-label="Email" aria-describedby="button-addon2">
            <button class="btn btn-primary" type="button" id="button-addon2">Notify Me</button>
          </div>
        </form>
        
        <div class="social-icons mt-5">
          <a href="#" class="text-dark mx-2"><i class="bi bi-facebook fs-4"></i></a>
          <a href="#" class="text-dark mx-2"><i class="bi bi-twitter fs-4"></i></a>
          <a href="#" class="text-dark mx-2"><i class="bi bi-instagram fs-4"></i></a>
          <a href="#" class="text-dark mx-2"><i class="bi bi-linkedin fs-4"></i></a>
        </div>
      </div>
    </div>
  </div>
</section>

More Examples

Coming Soon Landing Page

Author:
Anonymous

11 months ago

2.4k

v.5.3
Coming Soon Page
Coming Soon Landing page

Author:
Juan Martinez

1 year ago

1.1k

v.5.3
Coming Soon Landing Page

Author:
Anonymous

4 months ago

584

v.5.3
Contact us section with Image

Author:
Anonymous

1 year ago

7.3k

v.4.6
Bootstrap Footer example
dark footer

Author:
Anonymous

1 year ago

2.8k

v.3.4
Music speakers status

Author:
Jonathan

4 months ago

601

v.5.3
bootstrap-dashboard

Author:
Joey "Manny" Torres

1 year ago

830

v.5.3
Products Grid
E-commerce product grid

Author:
Juan Martinez

1 year ago

3.8k

v.5.3
bootstrap 5 confirm modal

Author:
Anonymous

8 months ago

6k

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

6.3k

v.4.6
Bootstrap 5.3 Accordion
Modern Bootstrap 5.3 Accordion

Author:
Prajwal Hallale

8 months ago

2.6k

v.5.3
Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.

Author:
zobaidul kaziex

1 year ago

2.8k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent