DocsAllOver Clean Bootstrap 5 Contact Form and Contact Details Layout Snippets

Clean Bootstrap 5 Contact Form and Contact Details Layout

May 31, 2025

Bootstrap, Bootstrap 5, Card, Form, Contact Us

Full Screen

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Clean Bootstrap 5 Contact Form And Contact Details Layout</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
  </head>
  <body>
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center text-center mb-3">
                <div class="col-lg-8 col-xxl-7">
                    <span class="text-muted">Let's Talk</span>
                    <h2 class="display-5 fw-bold mb-3">Contact Us</h2>
                    <p class="lead">We're here to help. Reach out with any questions, feedback, or collaboration inquiries. Our team will get back to you as soon as possible.</p>
                </div>
            </div>
            <div class="row justify-content-between">
                <div class="col-lg-6">
                    <h5 class="fw-semibold mb-3">Send us a message</h5>
                    <form>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <input class="form-control bg-light" placeholder="First name" type="text">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <input class="form-control bg-light" placeholder="Last name" type="text">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <input class="form-control bg-light" placeholder="Email address" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <textarea class="form-control bg-light" placeholder="Your message" rows="4"></textarea>
                        </div>
                        <div class="col-md-4 ms-auto">
                            <div class="d-grid">
                                <button class="btn btn-primary" type="submit">Send message</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-lg-5 mt-5 mt-lg-0">
                    <div class="mb-4">
                        <h5>Address</h5>
                        <p>123 Mountain View, California, United States.</p>
                    </div>
                    <div class="mb-4">
                        <h5>Phone</h5>
                        <p>+1 123-456-7890</p>
                    </div>
                    <div class="mb-4">
                        <h5>Email</h5>
                        <p>hello@yourdomain.com</p>
                    </div>
                    <div class="mb-4">
                        <h5>Socials</h5><a class="me-2" href=""><svg class="bi bi-pinterest text-primary" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0z"></path></svg></a> <a class="me-2" href=""><svg class="bi bi-twitter text-primary" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path></svg></a> <a class="me-2" href=""><svg class="bi bi-facebook text-primary" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path></svg></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
  </body>
</html>

/* Doesn't require any CSS. */

//Doesn't require any JS.

This Bootstrap 5 snippet showcases a clean and comprehensive contact form integrated with essential contact details, providing a complete "Get in Touch" section for your website. The layout is designed to be fully responsive, ensuring a seamless and user-friendly experience across various screen sizes.

Key Features:

Responsive Design: The entire contact section, including both the form and contact details, adapts smoothly to different screen sizes, providing optimal viewing and interaction on desktops, tablets, and mobile devices.
Integrated Layout: Combines a functional contact form with important contact information (e.g., address, phone, email, social links) in a single, organized structure.
Clear Input Fields: The form features well-defined input fields for name, email, subject, and message, guiding users through the inquiry process.
Bootstrap 5 Integration: Leverages Bootstrap 5's grid system, form components, and utility classes for consistent styling, efficient layout, and quick implementation.

Implementation:

Include Bootstrap 5: Ensure Bootstrap 5 CSS and JS files are included in your project.
Create the HTML Structure: Set up the basic HTML structure for the contact section, typically using Bootstrap's grid system to divide the form area from the contact details area. Include elements for form fields (<input>, <textarea>), labels, a submit button, and paragraphs or lists for contact information.
Apply Bootstrap Classes: Use Bootstrap's form classes (e.g., form-control, form-label, btn) and grid classes (e.g., col-md-6, row, container) to style and lay out the elements.

By following these steps, you can create a responsive and user-friendly contact form and details layout within your Bootstrap 5 projects, facilitating clear communication and enhancing the user experience on your website.

Latest Snippets

View All