Twitter Bootstrap Part 3: Design a Responsive Contact Page

Twitter Bootstrap is a cutting-edge front end framework designed to make the lives of developers and designers a little easier, as it provides a semantic and responsive starting point for real world projects. Today we are going to take a bit of time to focus on a very real world project, the always important contact page. Contact pages should be simple and easy for a visitor to understand. Therefore, we make use of good visual hierarchy practices to add both balance and flow to the page.

If you are new to Bootstrap, it may be a good idea to get an understanding of what Bootstrap is and how you can use it, as featured in part 1 and part 2 of our series.

---

Check Out The Whole Series!

Twitter Bootstrap Part 1: What is Bootstrap Anyway?

Twitter Bootstrap Part 2: Design a Responsive Homepage

Twitter Bootstrap Part 3: Design a Responsive Contact Page

---

View The Demo

Let’s Get Started

Let’s take a look at what we will be building today.

Download the Source

The idea is rather simple. We begin using the Bootstrap Hero Unit to anchor the page and convey our initial message and purpose of the page. Next, we split the page into two sections, offering a Bootstrap powered contact form in the left hand side, while we offer our embedded google map on the right hand side.

Bing maps work just as well, if preferred. Simply use the same technique as featured in the video.

Our “Contact Us” page is filled with bootstrap functionality:

Hero Unit:

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

Bootstrap Forms:

Individual form controls receive styling, but without any required base class on the < form > or large changes in markup. This results in stacked, left-aligned labels on top of form controls. Bootstrap doesn’t supply form functionality as much as it nearly perfects the User Experience or UX. Valuable hover states and built in validation are a huge help when coding a site.

Bootstrap icons:

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons. If you need a bit more functionality you could also use the incredible Icon Fonts provided by Font Awesome

Well:

Control padding and rounded corners with two optional modifier classes (“well-large and well-small”).

Bootstrap Buttons:

Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only “a” and “<button>” elements for best rendering

---

Thanks for checking out our tutorial on how to get the most out of Bootstrap for your website. We have some exciting Bootstrap-related projects coming up here at Untame so stay tuned for future updates!