→ sajid taz
→ Contact section for portfolio with JS va...

Contact section for portfolio with JS validation

This bootstrap css example is contributed by sajid taz, on 12-Jun-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Form

Author sajid taz

342

v.4.6

Fork Fullscreen

<section class="py-5 bg-light text-center">
        <div class="container">
            <h1 class="display-4 fw-bold">Contact Us</h1>
            <p class="text-muted">Let's discuss your project or answer your questions.</p>
        </div>
    </section>

<section class="py-5 bg-dark text-white">
        <div class="container">

<div class="col-lg-6">

<h3 class="fw-bold mb-4">Send a Message</h3>

</div>

<div class="col-lg-6">

<div class="mb-4">
                        <h3 class="fw-bold">Contact Information</h3>

<p class="text-secondary">
                            Feel free to reach out for web development,
                            data analytics, dashboard creation, or freelance work.
                        </p>

<ul class="list-unstyled">
                            <li class="mb-3">
                                <i class="bi bi-geo-alt-fill text-primary me-2"></i>
                                South Banasree, Dhaka, Bangladesh
                            </li>

<li class="mb-3">
                                <i class="bi bi-envelope-fill text-primary me-2"></i>
                                contact@example.com
                            </li>

<li class="mb-3">
                                <i class="bi bi-telephone-fill text-primary me-2"></i>
                                +8801XXXXXXXXX
                            </li>
                        </ul>
                    </div>

<div class="shadow rounded overflow-hidden">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d878.4417165114371!2d90.44579844811383!3d23.757540406867143!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b9e0f0760a9f%3A0x349c258a9bffb00e!2sSthapati%20Staff%20House!5e0!3m2!1sen!2sbd!4v1781120139314!5m2!1sen!2sbd"
                            width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy">
                        </iframe>
                    </div>

</div>

</div>
    </section>

More Examples

HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

2 years ago

9.3k

v.4.6
Password Reset Form
Multi-step password reset form with email verification, code validation, and password strength meter built with Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

7.9k

v.4.6
progress-steps
progress-steps

Author:
Rami AlAjo

1 year ago

2.7k

v.4.6
Agriculture Website for Live project_WDD

Author:
Anonymous

2 months ago

417

v.4.6
Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.
HTML: Form Structure: Contains fields for username and password with validation attributes (required, minlength). Feedback Messages: Placeholder div for dynamic error messages. CSS: Background Gradient: Applied to the body. Card Styling: Rounded corners and centered layout. Button Styling: Custom colors for the submit button. Validation Styling: Borders and error message styling. JavaScript: Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements. Feedback Messages: Display appropriate error or success messages based on validation.

Author:
zobaidul kaziex

2 years ago

8.7k

v.4.6
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2.2k

v.4.6
contact us custom

Author:
java stories story

1 year ago

2.3k

v.5.3
siam form validation
form validation resourse

Author:
Anonymous

3 months ago

179

v.4.6
Bootstrap Form with Javascript Validation

Author:
User

1 month ago

172

v.4.6
form-validation
form-validation

Author:
Mustaq hussin

1 month ago

169

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

1 month ago

372

v.5.3
Form validation by donald trump
form validation

Author:
Faysal

1 month ago

171

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent