3 Twitter Bootstrap Forms Tutorials

Forms will be on the mind of every Bootstrap developer sooner or later. So today, we’ve compiled a list of 3 excellent Twitter Bootstrap Forms tutorials. The three Bootstrap forms tutorials we’ve curated for you in a progression, from beginning, to intermediate to advanced. If you already have some experience with Bootstrap forms, you may want to skip straight to tutorial #3, which details how to create a Bootstrap contact form using PHP with validation.

#1 Bootstrap Forms Tutorial (

This tutorial covers the three types of Bootstrap form:

  • Vertical form (the Bootstrap default)
  • Horizontal form
  • Inline form

To take this Bootstrap forms tutorial visit W3Schools here.

#2 Creating Forms with Bootstrap (Tutorial Republic)

Tutorial Republic has Bootstrap forms tutorial that includes all the topics covered in W3School’s (shown above), but extends with the following topics/modules:

  • Static Form Control
  • Height Sizing of Inputs and Select Boxes
  • Column Sizing of Inputs, Textareas and Select Boxes
  • Extending Form Controls with Bootstrap
  • Height Sizing of Form and Input Groups
  • Bootstrap Form Validation States
  • Supported Form Controls in Bootstrap

To take this Bootstrap forms tutorial visit Tutorial Republic here.

#3 Twitter Bootstrap Contact Form Tutorial using PHP with Validations

Koding Made Simple has a great tutorial on how to build a Bootstrap contact form using PHP along with form validations. In the tutorial they do not use any java script library for validations, but rather perform all the validations server side for maximum security.

To take the Bootstrap Contact Form tutorial visit Koding Made Simple here.


Integrating Rails (4.2) with Twitter Bootstrap (3.3) Tutorial

Looking for a quick lesson or tutorial on integrating Rails with Twitter Bootstrap? Ruby Plus has just the tutorial you’re looking for, and it seems fairly straightforward.

Included in this tutorial on integrating Rails (v4.2) with Bootstrap (v3.3) are the following steps/modules:

  • Adding gem ‘bootstrap-sass’, ‘~> 3.3.1’
  • Adding gem ‘sass-rails’, github: ‘rails/sass-rails’
  • Adding bootstrap-sprocket
  • Ensure the file has .css.scss extension for Sass syntax
  • Require Bootstrap Javascripts in app/assets/javascripts/application.js
  • Update the application.html.erb with the minimal Bootstrap document
  • Create app/views/shared/navigationbar.html.erb
  • Add <%= render ‘shared/navigation_bar’ %> to the app/views/application.html.erb
  • Adding the Login and Logout links to the navigation
  • Editing the application.html.erb file to wrap the `yield’ with div tag with class container
  • Adding the Register and Edit Registration link to the navigation bar. Change the application.html.erb
  • Changing the button to use Twitter Bootstrap button for login page. Edit the app/views/devise/sessions/new.html.erb
  • Changing the navigation bar in app/views/shared/navigationbar.html.erb

To learn more about this tutorial on integrating Rails with Twitter Bootstrap simply click on the button go to the Ruby Plus site.
Bootstrap Pricing Tables with Less

How to Create Bootstrap Pricing Tables with Less

You’ll find many great bootstrap tutorials over on, but if you are building a business site or your first Bootstrap theme or template you’ll want to check their lesson on creating Bootstrap pricing tables with Less.

Here’s a synopsis of what you’ll be learning in this Bootstrap pricing tables tutorial (table of contents):

  • Project setup
  • HTML file with pricing table
  • Pricing Table.LESS
    • Variables
    • Mixins
    • Basic Table Styling
    • Body Section Styling
    • Head Section
    • Save, Compile, Check
    • Box Shadow
    • Styling cells with special characters
    • Price Rows
    • Buttons

This particular tutorial is recommended for those with advanced Bootstrap skills, particular those that are already familiar with LESS. To start learning how to create Bootstrap Pricing Tables with Less click on the button below.

Boostrap Pricing Tables Tutorial

How to add Google Map to Bootstrap 3 Contact Page

Do you want to know all the ins and out of adding a Google map to Bootstrap Contact Page. If you said yes, then you aren’t alone. However, don’t worry…Theo at tutsme-webdesign.ifo have you covered with a very well written and comprehensive tutorial on just this subject.

This bootstrap tutorial contain the following how-to sections:

  • Google Map Basics
  • Adding Containers for the Google Map
  • Setting a Height for the Map
  • Loading the Google Map API
  • Script for a Basic Map
    • Location
    • Map Options
    • The Marker
    • Create a New Map
    • Loading the Map
  • Inserting Google Map into a Bootstrap Contact Page
  • Script to Receive Input from the Contact Form

To take the Add A Google Map To a Bootstrap 3 Contact Page tutorial head over to


Navbar Bootstrap Tutorial

Bootstrap Navbar Tutorial – Default, Static and Fixed Navbars

The publishers of the Bootstrap framework,, have a new tutorial on creating a fixed top navbar. This is very quick tutorial which breaks down how the default, static and fixed top navbar functions work. Also, highlighted in the example tutorial is the inclusion of both responsive CSS and HTML, so the navbar will adapt to both fullscreen and mobile viewports.

This is an interactive Bootstrap tutorial that allows you to see the difference between static and fixed top navbars simply by scrolling through the examples. To view the tutorial simply click on the button below.

View Navbar Tutorial

Free Bootstrap Tutorial – “The Joy of Bootstrap”

There’s no doubt that the bootstrap framework has won over the web development community with free, powerful, open-source framework. It doesn’t matter if you are web development pro or novice, this free bootstrap tutorial, “The Joy of Bootstrap”, will have you building well-designed, responsive webpages in no time at all.The free Joy of Bootstrap tutorial or course contains the following:

  • Over 24 lectures & 1.5 hours of Bootstrap tutorial content
  • Go from knowing nothing about Bootstrap to a full understanding
  • Build responsive webpages that automatically resize for the specific device display
  • Make your page interesting w/ glyphicons & typography
  • Learn how Bootstrap & jQuery work together
  • Understand the Bootstrap grid system
  • Utilize the included source code for future projects

To learn more about “The Joy of Bootstrap” tutorial visit TNW at

How to create a Responsive WordPress theme with Bootstrap

How to build a responsive WordPress theme with Bootstrap

The folks over at Treehouse and written an excellent tutorial on how to build a responsive WordPress theme with Bootstrap.

In this tutorial, Zac Gordon teaches you how to make your very own WordPress theme using the Bootstrap framework. The theme you will build in this tutorial is modeled site examples on the Bootstrap examples.

In this tutorial you’ll create templates/themes for the following pages and functionality:

  • Custom homepage design
  • About page
  • Contact page
  • News section with comments
  • A widgetized sidebar

To start the tutorial on how to build a responsive WordPress theme with Bootstrap click on the button below.

Take the Tutorial
Advanced Bootstrap Web Development

Bootstrap 3: Advanced Web Development Tutorial

Lynda offers some of finest tutorials for web developers you’ll find, and the Bootstrap 3: Advanced Web Development tutorial by Ray Villalobos is no exception. In this tutorial you’ll learn how to Generate your own interactive website from scratch using the Bootstrap 3 web framework.

This advanced Bootstrap development tutorial starts out by having you plan and prototype an interface. Then, you’ll be downloading the Bootstrap 3 framework,  and you’ll jump right into organizing your site’s structure with Bootstrap’s scaffolding. You’ll then learn how to build interactive carousels, modals, forms, and control these  with JavaScript. Lastly, you’ll independently style your site with LESS.

The modules in the Advanced Bootstrap 3 Web Development tutorial include:

  • Prototyping
  • Baslining your website template with Git
  • Scaffolding your sites’ primary columns
  • Modularizing your site with PHP includes
  • Navigation
  • Carousels, buttons, tabs and other similar features
  • Using LESS for styling

To more about this advanced Bootstrap 3 web development tutorial click on the button below.

Learn more about the tutorial
Advanced bootstrap tutorial - grid

Advanced Bootstrap Grid Tutorial

The folks over at HappyFunCorp have written an outstanding advanced Bootstrap grid tutorial for those looking to go beyond the Bootstrap basics and design a unique site, template or theme.

The tutorials first describes the three major complaints developers have when using the bootstrap framework:

  • Site created with bootstrap all look the same (cookie-cutter)
  • There are too many classes in the HTML
  • There are too many other things that you simply don’t need, and that seem to get in the way

However, you can easily overcome these issues by using LESS or SASS, which will allow you to customize things using variables, getting things to look and behave the way you want, all without struggle with the bootstrap framework.

This topics covered in this advanced bootstrap tutorial are:

  • SASS
  • The Twelve Column Grid and how it works
  • How col- classes are defined
  • Using semantic classes
  • Mixins
  • Redefining grid-columns
  • Ordering includes

Click on the link below to take the advanced bootstrap grid tutorial.

Go to the Advanced Bootstrap Grid Tutorial

Bootstrap 3 Tutorial – Ultimate Beginner’s Guide

Tutorial Republic has a great Bootstrap tutorial for beginners. The tutorial cover everything someone new to Bootstrap would need to cover to become fully immersed in the world of the bootstrap framework.

Included in the Bootstrap 3 Ultimate Beginner’s Guide Tutorial are the following lessons and modules:

  • Bootstrap Basics
    • Grid System
    • Layouts (Fixed, Fluid and Responsive)
    • Typography
    • Lists
    • Images
    • Icons
    • Progress Bars
    • and more…
  • Bootstrap Advanced
    • Buttons
    • Dropdowns
    • Modals
    • Accordion
    • Carousel
    • and more…
  • Bootstrap Examples
    • Practice Examples
    • Example FAQs

To get started on Tutorial Republics Ultimate Beginners Guide Tutorial for Bootstrap 3 click on the button below.

Get Started with the Tutorial