→ Sahin Miah
→ Contact_All_Contanet

Contact_All_Contanet

This bootstrap css example is contributed by Sahin Miah, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Footer

Author Sahin Miah

378

v.4.6

Fork Fullscreen

<section class="bg-light text-center py-5">
	<div class="container pb-5 pt-5">
		<div class="pb-5 pt-5 row">
			<div class="col-lg-9 col-xl-8 ms-auto me-auto pb-5 pt-5">
				<span>Loreum ipsum</span>
				<h1 class="display-3 fw-bold mb-3">Contact me</h1>
				<p class="lead mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit tellus eu.</p><a class="btn btn-lg btn-primary" href="">Learn more</a>
			</div>
		</div>
	</div>
</section>

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-4 mb-md-5">
			<div class="col-xl-9 col-xxl-8">
				<span class="text-muted">Read More</span>
				<h2 class="display-5 fw-bold">Direct Contact</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
			</div>
		</div>
		<div class="row gy-4">
			<div class="col-md-4">
				<div class="shadow p-4">
					<div class="text-muted">
						10.10.2017
					</div>
					<h2 class="fw-semibold text-primary mt-1"><a class="text-primary text-decoration-none" href="">Call me</a></h2>
					<p class="mt-3">++88014324567</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="shadow p-4">
					<div class="text-muted">
						10.10.2017
					</div>
					<h2 class="fw-semibold text-primary mt-1"><a class="text-primary text-decoration-none" href="">Email</a></h2>
					<p class="mt-3">sahim@gmail.com</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="shadow p-4">
					<div class="text-muted">
						10.10.2017
					</div>
					<h2 class="fw-semibold text-primary mt-1"><a class="text-primary text-decoration-none" href="">Locatiom</a></h2>
					<p class="mt-3">Dhaka, Bangladesh</p>
				</div>
			</div>
		</div>
		<div class="col-md-2 d-grid mx-auto mt-5">
			<a class="btn btn-primary btn-lg" href="">Learn more</a>
		</div>
	</div>
</section>

<section class="py-5 bg-white">
  <div class="container-fluid p-0 footerDiv">
    <div class="row g-0 align-items-stretch">
      
      
      <div class="col-lg-6 d-flex align-items-center py-5">
        <div class="col-10 col-md-8 mx-auto">
          <span class="text-primary fw-bold text-uppercase small d-block mb-2">Let's Talk</span>
          <h2 class="display-5 fw-bold mb-3">Contact Us</h2>
          <p class="text-muted mb-4">Amdader sathe jogajog korte niche form-ti puron korun.</p>

<form id="contactForm" class="needs-validation" novalidate>
            <div class="row g-3">
              
              
              <div class="col-12">
                <div class="mb-1">
                  <input id="name" class="form-control bg-light border-0 py-3" placeholder="Your name" type="text" required>
                  <div class="invalid-feedback">Apnar naam oboshoy likhte hobe.</div>
                </div>
              </div>

<div class="col-12">
                <div class="mb-1">
                  <input id="email" class="form-control bg-light border-0 py-3" placeholder="Your email" type="email" required>
                  <div class="invalid-feedback">Sothik email address (example@mail.com) din.</div>
                </div>
              </div>

<div class="col-12">
                <div class="mb-1">
                  <input id="phone" class="form-control bg-light border-0 py-3" placeholder="Your phone" type="tel" required pattern="[0-9]{10,14}">
                  <div class="invalid-feedback">Sothik phone number (at least 10 digits) din.</div>
                </div>
              </div>

<div class="col-12">
                <div class="mb-1">
                  <input id="address" class="form-control bg-light border-0 py-3" placeholder="Your address" type="text" required>
                  <div class="invalid-feedback">Apnar thikana likhun.</div>
                </div>
              </div>

<div class="col-12">
                <div class="mb-3">
                  <textarea id="message" class="form-control bg-light border-0 py-3" placeholder="Your message" rows="4" required></textarea>
                  <div class="invalid-feedback">Apnar barta ba message-ti likhun.</div>
                </div>
              </div>

<div class="col-md-5">
                <div class="d-grid">
                  <button class="btn btn-primary btn-lg shadow-sm" type="submit">Send Message</button>
                </div>
              </div>

</div>
          </form>
        </div>
      </div>

<div class="col-lg-6">
        <div class="h-100" style="min-height: 450px;">
          <iframe 
            src="https://maps.google.com/maps?q=Dhaka&output=embed" 
            class="w-100 h-100 border-0" 
            allowfullscreen="" 
            loading="lazy">
          </iframe>
        </div>
      </div>

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

More Examples

footer(date-time)
footer(date-time)

Author:
Mustaq hussin

2 months ago

388

v.4.6
3213
gg

Author:
L-1485

6 months ago

354

v.4.6
Home Page

Author:
Md. Hasibur Rahman

2 months ago

207

v.4.6
Restaurant Reservation section

Author:
Creative Araf

2 months ago

159

v.5.3
E-com Home Page

Author:
Creative Araf

2 months ago

120

v.5.3
My site Exm code

Author:
Zahid Hasan Riyad

2 months ago

297

v.5.3
Restaurant Menu Page

Author:
Creative Araf

2 months ago

150

v.5.3
E-com Cart Page

Author:
Creative Araf

2 months ago

116

v.5.3
Personal Portfolio Service Section

Author:
Creative Araf

2 months ago

313

v.5.3
E-Commerce index

Author:
Creative Araf

2 months ago

296

v.5.3
E-Commerce Contact Section

Author:
Creative Araf

2 months ago

279

v.5.3
Simple Footer

Author:
Anonymous

2 years ago

4.3k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent