Bootstrap 3 Tutorial: Learn Web Design With Twitter Bootstrap


Learn Web Design with Twitter Bootstrap

Designing a website from scratch is a difficult task. Even seasoned developers who are familiar with languages ​​such as JavaScript, HTML and CSS, face difficulties during the working process of designing/developing a website.

Fortunately, developers and designers has contributed to the solution of this problem and launched framework called Twitter Bootstrap, which is designed to simplify the lives of web designers and web developers.

In this article we look at Bootstrap and try to learn and practice some of the components in order to ensure that this framework really simplifies the work on the creation of the site. Let’s learn web design with Twitter Bootstrap

What is Bootstrap?

Bootstrap is a very powerful framework, equipped with a large arsenal of ready-made components, which are needed in almost each and every development of the site:

  • CSS grid for building adaptive web design.
  • The CSS text formatting, buttons, forms, tables and images.
  • UI elements: navigation, load percentage, pop-ups, page-splitting content “bread crumbs” and so on. All these elements are also beautifully decorated with CSS rules
  • jQuery plugin to use interactive elements for the site.

1. Download

Before downloading, make sure that you have a code editor (we recommend Sublime Text 3) and some knowledge of HTML and CSS. We shall not affect the source files, but download and study them. We will focus our attention on getting started with the compiled files of Bootstrap.

You can download the framework the official website: Bootstrap twitter

2. File Structure

In the downloaded files you will find the following structure and content logically grouped by common attributes and containing both versions: minimized and compiled.

After downloading extract the compressed folder to see the structure (compiling) Bootstrap. It should be like this:

+-- css/
¦    +-- bootstrap . css
¦    +-- bootstrap . min . css
+-- js/
¦    +-- bootstrap . js
¦    +-- bootstrap . min . js
+-- img/
¦    +-- glyphicons - halflings . png
¦    +-- glyphicons - halflings - white . png
L -- README . md

This is the main form of Bootstrap: compiled files for quick and easy use in almost any Web-project. You have been provided with the compiled CSS and JS (  bootstrap. * ), and also compiled and minimize CSS and JS ( bootstrap.min. *). Please note that all plug-ins require JavaScript jQuery.

3. What is included

Bootstrap is equipped with HTML, CSS and JS for all kinds of work. You can find all components in the this post. Keep on Reading

Supported features

Common styles for the body (body) to reset the type and background styles of links, grid patterns and two simple markup.

CSS Styles

Styles for common elements of HTML: design, code, tables, forms and buttons. Also includes Glyphicons , a magnificent set.


Basic styles for simple interface components: tabs and buttons, navigation bars, messages, page headers, etc..

JavaScript Plugins

As components, these plugins JavaScript are interactive components for tooltips, information blocks, modal components and others.

List of Bootstrap Components

All together the components and plugins JavaScript contain the following interface elements:

  • Button groups
  • Drop-down lists buttons
  • Navigational tabs, buttons and lists
  • The navigation bar
  • Shortcuts
  • Badges
  • Page titles and element hero
  • Thumbnails
  • Messages
  • Process indicators
  • Modal elements
  • Drop-down lists
  • Tooltips
  • Information blocks
  • Element “accordion”
  • Element of “Carousel”
  • Leading keyboard input

In our learn web design with Twitter Bootstrap tutorial series, we will address in more detail each component. Until that time, get yourself familiarized with them.

4.CSS Buttons

In the Bootstrap CSS rules are laid down to style HTML elements, including <button>. This item is used very often, so the Bootstrap for it created a special class of btn:
<button type = "button" class = "btn"> Default Button </ button>

Result display you can see below:


We can also use other classes for buttons to indicate their role:
<button type = "button" class = "btn btn-success"> Button </ button>
<button type = "button" class = "btn btn-warning"> Button </ button>
<button type = "button" class = "btn btn-danger"> Button </ button>

Depending on the role of the key, it will be painted in different colors:


If you want to somehow change the default appearance of the buttons, then consider this.

For example, if we want to change the color of buttons with the class btn-success, simply adjust the corresponding variable, then pass the code through LESS.

btnSuccessBackground: # bce895; // # 62c462;
btnSuccessBackgroundHighlight: # a0cd78; // # 51a351;

Elements such as shadow, gradient, will be automatically configured to the new conditions:


5.  UI elements

Bootstrap also contains elements for the user interface: navigation, load percentage, pop-ups, page-splitting content “bread crumbs” and so on. Adding these elements is as simple as clicking and placing. Let’s take the previous example and put all the buttons in the group:

<div class = "btn-group">
<button type = "button" class = "btn btn-success"> Button </ button>
<button type = "button" class = "btn btn-warning"> Button </ button>
<button type = "button" class = "btn btn-danger"> Button </ button>
</ div>

Now our buttons wrapped in a div with the class btn-group:


We can also use other classes to change the positioning of a group of buttons. For example, line them up vertically. To do this, add the class btn-group-vertical:
<div class = "btn-group btn-group-vertical">
<button type = "button" class = "btn btn-success"> Button </ button>
<button type = "button" class = "btn btn-warning"> Button </ button>
<button type = "button" class = "btn btn-danger"> Button </ button>
</ div>

6. jQuery Plugins

I still remember the time when my websites were static, and I’ve been looking for some kind of plug-ins for adding interactive elements. Now, in the Bootstrap we have a bunch of jQuery plugins for creating accordions, tooltips, modal and pop-up windows, tabs, and other things.

In the following example, we use the plugin Tooltip:
<P id = "container"> eiusmod eiusmod eiusmod
<a href="#" rel="tooltip" title="a Lolipop Tiramissu?"> lollipop eiusmod </a>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”. </ P>

Please pay attention to the fact that we have added the link rel attribute and title. To activate the plug-in, write a script:

$ ('# Container'). Tooltip ({
selector: "a [rel = tooltip]"

This script will convert all links that have rel attribute is tooltip in the element with id = container.

That’s so simple nowadays. :) Previously, the connection of different plug-ins may cause errors, conflicted variables and so on. Now, when using the Bootstrap jQuery plugins that will not happen.


7. Customization

In fact Bootstrap has really huge library, and maybe your needs do not get filled up. That is why the creators offer a special page where we can choose only those components that we need.


Of course, in the Bootstrap many more components are there. In the next lesson we will gradually learn them. Below you’ll find a short list of sites that use Bootstrap. I hope someone will be impressed!

Free Bootstrap 3 Responsive Landing Template

First Landing Template (FLT) is the first responsive landing template under Magic Landing Templates developed using Twitter Bootstrap 3.

FLT is a robust landing page Bootstrap3 template which provides a simple, clean cut way of presenting information. It is a good starting point to quickly have a web presence for your product. It combines beautiful design & the perfect marketing approach to get better click through rate.

Free Bootstrap 3 Responsive Landing Template

Responsive WordPress Theme: Agency


Agency is a powerful multi-purpose html5 responsive WordPress theme perfect for business and portfolio sites. It follows a clean, eye catching and minimal approach to showcase contents.

This responsive WordPress theme is built using Bootstrap – the awesome framework by Twitter guys.

Features 1/ Clean and Responsive 2/ 15 Color Schemes 3/ Two Sliders (Parallax and Flex Sliders) 4/ Lots of Shortcodes 5/ Potfolio and Testimonial Post Tpes 6/ 3-in-One Contact Form 7/ Easy to Use Theme Options 8/ Built on Twitter Bootstrap 9/ Well Documented (Included)

Thank you so much for coming this down. While giving your feedback and rating please provide us with the best feedback and rating, as we will really appreciate your positive feedback and ratings.

A Free HTML Coming Soon Website Template with jQuery Counter

A Free HTML Coming Soon Website Bootstrap Template (jQuery Counter)

Kareeb Coming Soon Template is a responsive, SEO friendly and carefully designed template. It is developed using Bootstrap 3 – a popular front end framework from Twitter. It contains many features in it’s minimal and clean design.

It is a modern, minimal, creative fully responsive Under Construction/Coming Soon Template that suits for any creative and business company needs.

Multi-Purpose HTML5 Responsive Template: Agency

Agency HTML5 Responsive Template by Themesforce

Agency is a powerful multi-purpose html5 responsive template perfect for business and portfolio sites. It follows a clean, eye catching and minimal approach to showcase contents.

This responsive template built using Bootstrap – the awesome framework by Twitter guys.


  1. Pingback: Web Design Tips |

Leave a Comment.

× 4 = sixteen