→ 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

413

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

contact

Author:
lamiajahan

2 months ago

215

v.4.6
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

2 years ago

10.7k

v.4.6
E-Commerce Cart Section

Author:
Creative Araf

3 months ago

333

v.5.3
service

Author:
lamiajahan

2 months ago

204

v.4.6
siam footer
footer

Author:
MD Siam Miya

5 months ago

404

v.4.6
Restaurant Signup Page

Author:
Creative Araf

3 months ago

147

v.5.3
Footer
Bootstrap CSS footer example

Author:
Prajwal Hallale

2 years ago

3.7k

v.5.3
E-Commerce Product Detail Page

Author:
Creative Araf

3 months ago

459

v.5.3
E-Commerce index

Author:
Creative Araf

3 months ago

359

v.5.3
footer
tui copy korle guru chor

Author:
rimon majumder

5 months ago

318

v.4.6
Restaurant About Page

Author:
Creative Araf

3 months ago

248

v.5.3
Jquarry

Author:
Zahid Hasan Riyad

2 months ago

370

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent