→ lamiajahan
→ contact

contact

This bootstrap css example is contributed by lamiajahan, on 24-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Footer Header Card Banner

Author lamiajahan

v.4.6

Fork Fullscreen

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">Its Tithy</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav m-auto mb-2 mb-lg-0">
        <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" href="contact.html">Contact</a>
        </li>   
    </div>
  </div>
</nav>
   
    
    <div class="container mt-5">
  <form id="registrationForm" novalidate>
    
    <div class="mb-3">
      <label for="inputName" class="form-label">Enter your name</label>
      <input type="text" class="form-control" id="inputName" name="name" aria-describedby="nameHelp">
      <div class="text-danger small mt-1" id="nameError"></div>
    </div>

<div class="mb-3">
      <label for="inputEmail" class="form-label">Email address</label>
      <input type="email" class="form-control" id="inputEmail" name="email" aria-describedby="emailHelp">
      <div class="text-danger small mt-1" id="emailError"></div>
    </div>

<div class="mb-3">
      <label for="inputAddress" class="form-label">Address</label>
      <input type="text" class="form-control" id="inputAddress" name="address" aria-describedby="addressHelp">
      <div class="text-danger small mt-1" id="addressError"></div>
    </div>

<div class="mb-3">
      <label for="inputPhone" class="form-label">Enter your phone number</label>
      <input type="tel" class="form-control" id="inputPhone" name="phone" aria-describedby="numberHelp">
      <div class="text-danger small mt-1" id="phoneError"></div>
    </div>

<button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
     
     
      <div class="Container text-center mt-5">
        <h1>API Section</h1>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3650.3959550836084!2d90.36679197605233!3d23.804515086695226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c1f2a4049aeb%3A0xcffebf50a8b322f!2sCreative%20IT%20Institute%20-%20Mirpur%20Campus!5e0!3m2!1sen!2sbd!4v1783758189114!5m2!1sen!2sbd" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>

</div>

<footer class="bg-dark text-light py-5 my-5">
    <div class="container">
        <div class="row g-4">
            
            <div class="col-lg-4 col-md-6">
                <h5 class="mb-4">About Us</h5>
                <p class="mb-4">We are dedicated to providing innovative solutions that help businesses grow and succeed
                    in the digital age.</p>
                <div class="social-links">
                    <a href="#" class="social-icon bg-primary"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-icon bg-info"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-icon bg-danger"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-icon bg-primary"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>

<div class="col-lg-2 col-md-6">
                <h5 class="mb-4">Quick Links</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="footer-link">Home</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">About</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Services</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Portfolio</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Contact</a></li>
                </ul>
            </div>

<div class="col-lg-2 col-md-6">
                <h5 class="mb-4">Services</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="footer-link">Web Design</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Development</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Marketing</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Consulting</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Analytics</a></li>
                </ul>
            </div>

<div class="col-lg-4 col-md-6">
                <h5 class="mb-4">Contact Info</h5>
                <ul class="list-unstyled">
                    <li class="mb-3">
                        <i class="fas fa-map-marker-alt me-2"></i>
                        123 Business Street, New York, NY 10001
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-phone me-2"></i>
                        <a href="tel:+1234567890" class="footer-link">+1 (234) 567-890</a>
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-envelope me-2"></i>
                        <a href="mailto:contact@example.com" class="footer-link">contact@example.com</a>
                    </li>
                </ul>
            </div>
        </div>

<div class="row mt-5">
            <div class="col-12">
                <hr class="mb-4">
                <div class="text-center">
                    <p class="mb-0">&copy; 2024 Your Company. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
</footer>

More Examples