<section class="position-relative py-28 bg-white">
<div class="container">
<img class="position-absolute top-0 start-0 bottom-0 h-100 w-100" style="object-fit: cover;" src="pstls-assets/images/contacts/pink-shadows.png" alt="">
<div class="position-relative row mb-8 mb-md-24">
<div class="col-12 col-md-6 mb-6 mb-md-0">
<h2 class="display-4 font-heading">Contact</h2>
</div>
<div class="col-12 col-md-6">
<p class="mb-0 text-muted">Is the answer to your question missing?</p>
<p>Get in touch with us.</p>
</div>
</div>
<div class="position-relative row">
<div class="col-12 col-md-6">
<div class="row mb-12">
<div class="col-12 col-md-6 mb-12">
<p class="mb-0 text-muted">E-mail</p>
<a class="text-decoration-none text-dark" href="mailto:[email protected]">[email protected]</a>
</div>
<div class="col-12 col-md-6 mb-12">
<p class="mb-0 text-muted">Phone</p>
<p class="mb-0">+1-2020-555-109</p>
</div>
<div class="col-6">
<p class="mb-2 text-muted">Socials</p>
<div class="d-flex">
<a class="text-decoration-none" href="#">
<img src="pstls-assets/images/contacts/facebook.png" alt="">
</a>
<a class="text-decoration-none" href="#">
<img src="pstls-assets/images/contacts/twitter.png" alt="">
</a>
<a class="text-decoration-none" href="#">
<img src="pstls-assets/images/contacts/google.png" alt="">
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="p-8 bg-white shadow">
<form action="">
<div class="row mb-6">
<div class="col-12 col-md-6 mb-6 mb-md-0">
<input class="form-control border-top-0 border-start-0 border-end-0" type="text" placeholder="Name">
</div>
<div class="col-12 col-md-6">
<input class="form-control border-top-0 border-start-0 border-end-0" type="text" placeholder="Surname">
</div>
</div>
<div class="row mb-6">
<div class="col-12 col-md-6 mb-6 mb-md-0">
<input class="form-control border-top-0 border-start-0 border-end-0" type="email" placeholder="Mail address">
</div>
<div class="col-12 col-md-6">
<input class="form-control border-top-0 border-start-0 border-end-0" type="text" placeholder="Phone number">
</div>
</div>
<input class="form-control mb-6 border-top-0 border-start-0 border-end-0" type="text" placeholder="Form Topic">
<textarea class="form-control mb-6 border-top-0 border-start-0 border-end-0" style="resize: none;" name="" id="" cols="30" rows="10" placeholder="Form message"></textarea>
<button class="btn mb-6 d-flex align-items-center">
<svg class="me-3" width="19" height="19" viewbox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 8.96959L9.96279 16.5497C8.97817 17.4783 7.64274 18 6.25028 18C4.85782 18 3.52239 17.4783 2.53777 16.5497C1.55315 15.6211 1 14.3616 1 13.0483C1 11.7351 1.55315 10.4756 2.53777 9.54697L10.575 1.96687C11.2314 1.34779 12.1217 1 13.05 1C13.9783 1 14.8686 1.34779 15.525 1.96687C16.1814 2.58595 16.5502 3.4256 16.5502 4.30111C16.5502 5.17662 16.1814 6.01628 15.525 6.63535L7.47904 14.2154C7.15083 14.525 6.70569 14.6989 6.24154 14.6989C5.77738 14.6989 5.33224 14.525 5.00403 14.2154C4.67583 13.9059 4.49144 13.4861 4.49144 13.0483C4.49144 12.6106 4.67583 12.1907 5.00403 11.8812L12.429 4.88674" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="fw-normal">Attach File</span>
</button>
<button class="btn w-100 btn-primary">Send Now</button>
</form>
</div>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 5
- Application 38
- Banner 10
- Blog 43
- Call to action 75
- Contact 23
- Content 4
- Content 45
- Cookies 31
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 29
- Features 108
- Footer 27
- Footers 10
- Graphs 9
- HTTP codes 32
- Headers 75
- How it works 29
- Logo clouds 51
- Modals 3
- Navbar 40
- Navigation (horizontal) 63
- Navigation (vertical) 4
- Newsletter 31
- Portfolio 29
- Pricing 25
- Projects 9
- Reviews 5
- Sign in / Sign up 55
- Stats 45
- Tables 25
- Team 24
- Testimonials 25
- Users 8
A clear contact path is a key component of a successful website. The contact form or address data should be clearly highlighted on it.
Choose from many variations of the Bootstrap components contacts. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bootstrap website template. Each library is designed by a professional designer and coded by our team of developers.
Get access to all sections of the Bootstrap components contacts, code and our editor. Try the demo for free.
Component #1
