→ 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

285

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

progress-steps
progress-steps

Author:
Rami AlAjo

1 year ago

2.6k

v.4.6
HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.
HTML: Bootstrap Integration: Linked to Bootstrap CDN for styling. Form Structure: Contains input fields for name, email, and message, all within a card component. CSS: Background Gradient: Applied to the body for a visually appealing background. Card Styling: Rounded corners and padding for the card. Button Styling: Custom colors for the submit button, including hover effects. How to Use: Create an index.html file and copy the above code into it. Open the HTML file in your web browser to view the Contact Us form.

Author:
zobaidul kaziex

1 year ago

3.2k

v.4.6
new-validation-form
new-validation-form

Author:
Anonymous

5 days ago

51

v.4.6
Agriculture Website for Live project_WDD

Author:
Anonymous

1 month ago

323

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

2 days ago

54

v.5.3
yash from
amr from ta keow copy korbe nha .korle tui morog chor

Author:
rimon majumder

2 months ago

133

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

1 year ago

9k

v.4.6
Simple login form

Author:
Prajwal Hallale

2 years ago

8.6k

v.4.6
Form Section

Author:
Tanvir fahad

2 months ago

808

v.4.6
Portfolio

Author:
Code Bro io

1 week ago

79

v.5.3
E-Commerece Log In

Author:
Code Bro io

1 week ago

31

v.5.3
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent