→ 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>
   
    
     <section>
        <div class="container">
            
<section class="mb-4">

<h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
  
  <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
      a matter of hours to help you.</p>

<div class="col-md-9 mb-md-0 mb-5">
          <form id="contact-form" name="contact-form" action="mail.php" method="POST">

<div class="row">

<div class="col-md-6">
                      <div class="md-form mb-0">
                        <label for="name" class="">Your name</label>
                          <input type="text" id="name" name="name" class="form-control">
                          
                      </div>
                  </div>

<div class="col-md-6">
                      <div class="md-form mb-0">
                        <label for="email" class="">Your email</label>
                          <input type="text" id="email" name="email" class="form-control">
                          
                      </div>
                  </div>

</div>

<div class="row">
                  <div class="col-md-12">
                      <div class="md-form mb-0">
                        <label for="subject" class="">Subject</label>
                          <input type="text" id="subject" name="subject" class="form-control">
                          
                      </div>
                  </div>
              </div>

<div class="row">

<div class="col-md-12">

<div class="md-form">
                        <label for="message">Your message</label>
                          <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
                          
                      </div>

</div>
              </div>

</form>

<div class="col-md-3 text-center">
          <ul class="list-unstyled mb-0">
              <li><i class="fas fa-map-marker-alt fa-2x"></i>
                  <p>Mirpur-10 Dhaka,Bangladesh</p>
              </li>

<li><i class="fas fa-envelope mt-4 fa-2x"></i>
                  <p>contact@lamiajahan</p>
              </li>
          </ul>
      </div>

</div>

</section>

        </div>
     </section>

<div class="container bg-warning mt-5">

<div class="row">
		<div class="col-12">
			<h4 class="display-4 text-center">Give you information</h4>
			<hr class="my-4">
		</div>

<div class="form-group">
					<label for="exampleFormControlInput2">Name</label>
					<input type="name" class="form-control" id="exampleFormControlInput2" placeholder="Enter your Name">
				</div>
				<div class="form-group">
					<label for="exampleFormControlInput1">Email</label>
					<input type="email" class="form-control" id="exampleFormControlInput1"
                        placeholder="Enter your e-mail">
				</div>
                <div class="form-group">
					<label for="exampleFormControlInput1">Adress</label>
					<input type="email" class="form-control" id="exampleFormControlInput1"
                        placeholder="enter your adress">
				</div>
                <div class="form-group">
					<label for="exampleFormControlInput1">Enter you phone number</label>
					<input type="email" class="form-control" id="exampleFormControlInput1"
                        placeholder="Enter your number">
				</div>

<div class="form-group">
					<label for="exampleFormControlTextarea1">Message</label>
					<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
				</div>
				<button type="submit" class="btn btn-info">Submit</button>
			</form>

</div>

</div>

</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

Carrousel banner product
It's a carousel; clicking on its categories opens a banner with the product.

Author:
Juan Antonio González Hernández

4 months ago

1k

v.5.3
Home Page of portfolio (WDD)

Author:
sajid taz

1 month ago

443

v.4.6
Agriculture Website for Live project_WDD

Author:
Anonymous

1 month ago

296

v.4.6
Liberation war Archive WDD

Author:
Anonymous

1 month ago

400

v.4.6
E-commarce index file

Author:
Zahid Hasan Riyad

3 weeks ago

129

v.5.3
E-commarce Product-page

Author:
Zahid Hasan Riyad

3 weeks ago

94

v.5.3
E-commarce Product-details page

Author:
Zahid Hasan Riyad

3 weeks ago

109

v.5.3
E-commarce Cart- PAge

Author:
Zahid Hasan Riyad

3 weeks ago

82

v.5.3
E-commarce Contact-Page

Author:
Zahid Hasan Riyad

3 weeks ago

118

v.5.3
E-Commerce index

Author:
Creative Araf

3 weeks ago

111

v.5.3
Portfolio index.html

Author:
Zahid Hasan Riyad

3 weeks ago

118

v.5.3
Portfolio About Section

Author:
Zahid Hasan Riyad

3 weeks ago

136

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent