contact page

This bootstrap css example is contributed by Md. Hasibur Rahman, on 10-Jul-2026. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Get in touch, Contact form,Register, Sign in

Tags: Card Contact us Login Form

Author Md. Hasibur Rahman

171

v.5.3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Contact | Rakib - Web Designer & Developer</title>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
      <a class="navbar-brand fw-bold" href="index.html">Rakib<span class="text-primary">.</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
          <li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
          <li class="nav-item"><a class="nav-link" href="service.html">Service</a></li>
          <li class="nav-item"><a class="nav-link active" href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

<div class="page-title-banner">
    <div class="container">
      <h1 class="fw-bold">Contact Us</h1>
      <p class="mb-0">Home / Contact</p>
    </div>
  </div>

<section>
    <div class="container">
      <div class="section-title">
        <span class="eyebrow">Contact Details</span>
        <h2>Reach Me Directly</h2>
        <p>Feel free to reach out through any of these channels</p>
      </div>
      <div class="row g-5 text-center">
        <div class="col-md-4">
          <div class="card h-100 p-4">
            <i class="bi bi-geo-alt fs-1 text-primary mb-3"></i>
            <h5>Address</h5>
            <p class="small text-muted">Mirpur, Dhaka, Bangladesh</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 p-4">
            <i class="bi bi-telephone fs-1 text-primary mb-3"></i>
            <h5>Phone</h5>
            <p class="small text-muted">+880 1XXXXXXXXX</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 p-4">
            <i class="bi bi-envelope fs-1 text-primary mb-3"></i>
            <h5>Email</h5>
            <p class="small text-muted">rakib@example.com</p>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="bg-light-alt">
    <div class="container">
      <div class="section-title">
        <span class="eyebrow">Get In Touch</span>
        <h2>Send a Message</h2>
      </div>

<div id="formSuccessMsg" class="alert alert-success d-none" role="alert">
            Thank you! Your message has been submitted successfully.
          </div>

<form id="contactForm" novalidate>
            <div class="mb-3">
              <label for="name" class="form-label">Name</label>
              <input type="text" class="form-control" id="name" placeholder="Enter your full name" />
              <div class="invalid-feedback">Please enter your name.</div>
            </div>

<div class="mb-3">
              <label for="email" class="form-label">Email</label>
              <input type="email" class="form-control" id="email" placeholder="Enter your email address" />
              <div class="invalid-feedback">Please enter a valid email address.</div>
            </div>

<div class="mb-3">
              <label for="phone" class="form-label">Phone</label>
              <input type="text" class="form-control" id="phone" placeholder="Enter your phone number" />
              <div class="invalid-feedback">Please enter a valid phone number.</div>
            </div>

<div class="mb-3">
              <label for="address" class="form-label">Address</label>
              <input type="text" class="form-control" id="address" placeholder="Enter your address" />
              <div class="invalid-feedback">Please enter your address.</div>
            </div>

<div class="mb-3">
              <label for="message" class="form-label">Message</label>
              <textarea class="form-control" id="message" rows="4" placeholder="Write your message"></textarea>
              <div class="invalid-feedback">Please write a message.</div>
            </div>

<button type="submit" class="btn btn-primary">Send Message</button>
          </form>

</div>
      </div>
    </div>
  </section>

<section>
    <div class="container">
      <div class="section-title">
        <span class="eyebrow">Our Location</span>
        <h2>Find Us Here</h2>
      </div>
      <div class="ratio ratio-21x9">
        <iframe
          src="https://www.google.com/maps?q=Dhaka,Bangladesh&output=embed"
          style="border:0;"
          allowfullscreen=""
          loading="lazy"
        ></iframe>
      </div>
    </div>
  </section>

<footer class="bg-dark text-light pt-5 pb-3">
    <div class="container">
      <div class="row">
        <div class="col-md-4 mb-3">
          <h5>Rakib.</h5>
          <p class="small">Web Designer & Front-End Developer based in Dhaka, Bangladesh.</p>
        </div>
        <div class="col-md-4 mb-3">
          <h5>Quick Links</h5>
          <ul class="list-unstyled">
            <li><a href="index.html" class="footer-link">Home</a></li>
            <li><a href="about.html" class="footer-link">About</a></li>
            <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
            <li><a href="service.html" class="footer-link">Service</a></li>
            <li><a href="contact.html" class="footer-link">Contact</a></li>
          </ul>
        </div>
        <div class="col-md-4 mb-3">
          <h5>Date & Time</h5>
          <p id="liveDateTime" class="small">--</p>
        </div>
      </div>
      <hr class="border-secondary" />
      <p class="text-center mb-0 small">&copy; 2026 Rakib. All Rights Reserved.</p>
    </div>
  </footer>

More Examples

E-Commerce Contact Section

Author:
Creative Araf

1 month ago

184

v.5.3
Sign in form with bootstrap 5
Beautiful sign-in card with Bootstrap 5

Author:
Prajwal Hallale

2 years ago

9.6k

v.5.3
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

1 month ago

159

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

3 weeks ago

254

v.5.3
E-Commarce

Author:
Anonymous

3 weeks ago

125

v.5.3
E- Commarce full website

Author:
Zahid Hasan Riyad

3 weeks ago

148

v.5.3
NewsPortal Full Website

Author:
Zahid Hasan Riyad

3 weeks ago

264

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

3 weeks ago

170

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

1 year ago

8.8k

v.4.6
Form validation by donald trump
form validation

Author:
Faysal

1 month ago

132

v.4.6
vulgh

Author:
Anonymous

3 weeks ago

97

v.5.3
Cart Hero Pro

Author:
Juan Antonio González Hernández

5 months ago

939

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent