Bootstrap 3 Tutorial
BS Introduction BS Getting Started BS Containers BS Typography BS Grid Basics BS Jumbotron BS Tables BS Wells BS Buttons BS Button Groups BS Alert BS Glyphicons BS Images BS Labels/Badges BS Forms BS Inputs BS Input Groups BS Dropdowns BS Tabs/Pills BS Navbar BS Pagination BS Pager BS Progress Bar BS Media Object BS List Group BS Panels BS Collapse BS Carousel BS Modal BS Popover BS Scrollspy BS Affix BS Helper Classes
Bootstrap Grid
BS Grid system BS Grid Small BS Grid Medium BS Grid Large BS Grid Examples

Bootstrap 3 Introduction

Bootstrap is the most popular mobile-first front end framework for faster and easier responsive web development. It uses HTML, CSS and Javascript.

This tutorial will help you to learn the fundamentals as well as advanced features of Bootstrap, the world's most popular front-end framework, step-by-step so that you can create a responsive, interactive and feature rich websites with much less effort.

  • Bootstrap is Easy to learn
  • Bootstrap is used for developing responsive, mobile-first web sites
  • With Bootstrap you can create an awesome good looking Web site
responsive web design

Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.


Examples in each Chapter

Every chapter in this tutorial contains lots of practice examples that you can try and test yourself using our online editor to extend your learning. The purpose of these examples is to provide you a better understanding of the usage of bootstrap.

Bootstrap example
Run code

Click the Run code button to see how it works.



What Bootstrap can do?

There are lot more things you can do with Bootstrap:

  • Bootstrap can easily create responsive websites
  • Bootstrap can quickly create multi-column layout with pre-defined classes
  • Bootstrap can quickly create different types of form layouts
  • Bootstrap can quickly create different variation of navigation bar
  • Bootstrap can easily create components like accordions, modals, etc. without writing any JS code
  • Bootstrap can easily create dynamic tabs to manage large amount of content
  • Bootstrap can easily create tooltips and popovers to show hint text
  • Bootstrap can easily create carousel or image slider to showcase your content
  • Bootstrap can quickly create different types of alert boxes

The list does not end here, there are many other interesting things that you can do with Bootstrap.


Advantages of Bootstrap

  • Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design templates and classes and concentrate on other development work.
  • Responsive features — Using Bootstrap you can easily create responsive designs. Bootstrap responsive features make your web pages to appear more appropriately on different devices and screen resolutions without any change in markup.
  • Consistent design — All Bootstrap components share the same design templates and styles through a central library, so that the designs and layouts of your web pages are consistent throughout your development.
  • Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML and CSS can start development with Bootstrap.
  • Compatible with browsers — Bootstrap is created with modern browsers in mind and it is compatible with all modern browsers such as Mozilla Firefox, Google Chrome, Safari, Internet Explorer, and Opera.
  • Open Source — It is completely free to download and use.

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness.

Bootstrap 4 has better and improvised options to create your website easily and quickly.

Go to Bootstrap 4

For more information on difference between Bootstrap 3 and Bootstrap 4, visit our Bootstrap 3 vs. Bootstrap 4 page.


Prerequisites

This tutorial will give you enough ingredients and examples so that you can easily understand every topic.

However, before learning Bootstrap you must have the basic knowledge of HTML and CSS.

You are advised to work through the following modules before starting on Bootstrap: