Twitter Bootstrap tutorial


What is twitter bootstrap

Twitter Bootstrap is a frontend framework to develop web apps and sites fast. It includes basic CSS and HTML for creating Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts, Popovers etc. And along with that, comes a host of Jquery plugins to create awesome UI components like Transitions, Modal, Dropdown, Scrollspy, Tooltip, Tab, Popover, Alert, Button, Collapse, Carousel, Typeahead, Affix.

In this and consequent pages, w3resource covers Twitter Bootstrap tool in detail, which will equip you to build web apps and sites using the tool.

At the end of this page, we have created a simple Twitter Botstrap powered HTML Template. You can view a live demo, download the code and play around.

twitter bootstarp

Browser Support

Twitter Bootstrap is created with modern browsers in mind. So, you will find it working perfectly with all the modern versions of Chrome, Firefox, Safari, Opera and Internet Explorer.

twitter bootstarp browser support

Download and understand file structure

As per Bootstrap v2.3.2, there are two ways to download Twitter Bootstrap. One is a compiled version which includes compiled and minified versions of CSS, JS, and images. You may download it from “http://twitter.github.io/bootstrap/assets/bootstrap.zip”. Once you get this zip file, unzip it and following is the file structure you will end up with.

.
|-- css
|   |-- bootstrap.css
|   |-- bootstrap.min.css
|   |-- bootstrap-responsive.css
|   `-- bootstrap-responsive.min.css
|-- img
|   |-- glyphicons-halflings.png
|   `-- glyphicons-halflings-white.png
`-- js
    |-- bootstrap.js
    `-- bootstrap.min.js

3 directories, 8 files

So it contains three folders – CSS, which contains bootstrap.css, the minified version of bootstrap.css bootstarp.min.css, bootstrap-responsive.css and minified version of it – bootstrap-responsive.min.css.

There is an image folder comprising the image files. One is glyphicons-halflings.png and another one is glyphicons-halflings-white.png.

And the last one is the folder. This folder contains bootstrap.js which contains all the JavaScript stuff for Bootstrap and another file is the minified version of it bootstrap.min.js.

If you want to obtain the original source files instaed of the compiled versions, you can dwonload it from “https://github.com/twitter/bootstrap/zipball/master”. Once you download and unzip, following is the file structure you will obtain.

.
|-- CHANGELOG.md
|-- component.json
|-- composer.json
|-- CONTRIBUTING.md
|-- docs
|   |-- assets
|   |   |-- css
|   |   |   |-- bootstrap.css
|   |   |   |-- bootstrap-responsive.css
|   |   |   `-- docs.css
|   |   |-- ico
|   |   |   |-- apple-touch-icon-114-precomposed.png
|   |   |   |-- apple-touch-icon-144-precomposed.png
|   |   |   |-- apple-touch-icon-57-precomposed.png
|   |   |   |-- apple-touch-icon-72-precomposed.png
|   |   |   |-- favicon.ico
|   |   |   `-- favicon.png
|   |   |-- img
|   |   |   |-- bootstrap-docs-readme.png
|   |   |   |-- bootstrap-mdo-sfmoma-01.jpg
|   |   |   |-- bootstrap-mdo-sfmoma-02.jpg
|   |   |   |-- bootstrap-mdo-sfmoma-03.jpg
|   |   |   |-- bs-docs-bootstrap-features.png
|   |   |   |-- bs-docs-masthead-pattern.png
|   |   |   |-- bs-docs-responsive-illustrations.png
|   |   |   |-- bs-docs-twitter-github.png
|   |   |   |-- examples
|   |   |   |   |-- bootstrap-example-carousel.png
|   |   |   |   |-- bootstrap-example-fluid.png
|   |   |   |   |-- bootstrap-example-justified-nav.png
|   |   |   |   |-- bootstrap-example-marketing-narrow.png
|   |   |   |   |-- bootstrap-example-marketing.png
|   |   |   |   |-- bootstrap-example-signin.png
|   |   |   |   |-- bootstrap-example-starter.png
|   |   |   |   |-- bootstrap-example-sticky-footer.png
|   |   |   |   |-- browser-icon-chrome.png
|   |   |   |   |-- browser-icon-firefox.png
|   |   |   |   |-- browser-icon-safari.png
|   |   |   |   |-- slide-01.jpg
|   |   |   |   |-- slide-02.jpg
|   |   |   |   `-- slide-03.jpg
|   |   |   |-- example-sites
|   |   |   |   |-- 8020select.png
|   |   |   |   |-- adoptahydrant.png
|   |   |   |   |-- breakingnews.png
|   |   |   |   |-- fleetio.png
|   |   |   |   |-- gathercontent.png
|   |   |   |   |-- jshint.png
|   |   |   |   |-- kippt.png
|   |   |   |   `-- soundready.png
|   |   |   |-- glyphicons-halflings.png
|   |   |   |-- glyphicons-halflings-white.png
|   |   |   |-- grid-baseline-20px.png
|   |   |   |-- less-logo-large.png
|   |   |   `-- responsive-illustrations.png
|   |   `-- js
|   |       |-- application.js
|   |       |-- bootstrap-affix.js
|   |       |-- bootstrap-alert.js
|   |       |-- bootstrap-button.js
|   |       |-- bootstrap-carousel.js
|   |       |-- bootstrap-collapse.js
|   |       |-- bootstrap-dropdown.js
|   |       |-- bootstrap.js
|   |       |-- bootstrap.min.js
|   |       |-- bootstrap-modal.js
|   |       |-- bootstrap-popover.js
|   |       |-- bootstrap-scrollspy.js
|   |       |-- bootstrap-tab.js
|   |       |-- bootstrap-tooltip.js
|   |       |-- bootstrap-transition.js
|   |       |-- bootstrap-typeahead.js
|   |       |-- google-code-prettify
|   |       |   |-- prettify.css
|   |       |   `-- prettify.js
|   |       |-- holder
|   |       |   `-- holder.js
|   |       |-- html5shiv.js
|   |       |-- jquery.js
|   |       `-- README.md
|   |-- base-css.html
|   |-- build
|   |   |-- index.js
|   |   |-- node_modules
|   |   |   `-- hogan.js
|   |   |       |-- bin
|   |   |       |   `-- hulk
|   |   |       |-- lib
|   |   |       |   |-- compiler.js
|   |   |       |   |-- hogan.js
|   |   |       |   `-- template.js
|   |   |       |-- LICENSE
|   |   |       |-- Makefile
|   |   |       |-- package.json
|   |   |       |-- README.md
|   |   |       |-- test
|   |   |       |   |-- html
|   |   |       |   |   `-- list.html
|   |   |       |   |-- index.html
|   |   |       |   |-- index.js
|   |   |       |   |-- mustache.js
|   |   |       |   |-- spec
|   |   |       |   |   |-- Changes
|   |   |       |   |   |-- Rakefile
|   |   |       |   |   |-- README.md
|   |   |       |   |   |-- specs
|   |   |       |   |   |   |-- comments.json
|   |   |       |   |   |   |-- comments.yml
|   |   |       |   |   |   |-- delimiters.json
|   |   |       |   |   |   |-- delimiters.yml
|   |   |       |   |   |   |-- interpolation.json
|   |   |       |   |   |   |-- interpolation.yml
|   |   |       |   |   |   |-- inverted.json
|   |   |       |   |   |   |-- inverted.yml
|   |   |       |   |   |   |-- ~lambdas.json
|   |   |       |   |   |   |-- ~lambdas.yml
|   |   |       |   |   |   |-- partials.json
|   |   |       |   |   |   |-- partials.yml
|   |   |       |   |   |   |-- sections.json
|   |   |       |   |   |   `-- sections.yml
|   |   |       |   |   `-- TESTING.md
|   |   |       |   |-- spec.js
|   |   |       |   `-- templates
|   |   |       |       `-- list.mustache
|   |   |       |-- tools
|   |   |       |   |-- release.js
|   |   |       |   `-- web_templates.js
|   |   |       |-- web
|   |   |       |   |-- 1.0.0
|   |   |       |   |   |-- hogan.js
|   |   |       |   |   `-- hogan.min.js
|   |   |       |   |-- builds
|   |   |       |   |   |-- 1.0.0
|   |   |       |   |   |   |-- hogan.js
|   |   |       |   |   |   `-- hogan.min.js
|   |   |       |   |   |-- 1.0.3
|   |   |       |   |   |   |-- hogan.js
|   |   |       |   |   |   `-- hogan.min.js
|   |   |       |   |   `-- 1.0.5
|   |   |       |   |       |-- hogan-1.0.5.amd.js
|   |   |       |   |       |-- hogan-1.0.5.common.js
|   |   |       |   |       |-- hogan-1.0.5.js
|   |   |       |   |       |-- hogan-1.0.5.min.amd.js
|   |   |       |   |       |-- hogan-1.0.5.min.common.js
|   |   |       |   |       |-- hogan-1.0.5.min.js
|   |   |       |   |       |-- hogan-1.0.5.min.mustache.js
|   |   |       |   |       |-- hogan-1.0.5.mustache.js
|   |   |       |   |       |-- template-1.0.5.js
|   |   |       |   |       `-- template-1.0.5.min.js
|   |   |       |   |-- favicon.ico
|   |   |       |   |-- images
|   |   |       |   |   |-- logo.png
|   |   |       |   |   |-- noise.png
|   |   |       |   |   |-- small-hogan-icon.png
|   |   |       |   |   `-- stripes.png
|   |   |       |   |-- index.html.mustache
|   |   |       |   `-- stylesheets
|   |   |       |       |-- layout.css
|   |   |       |       `-- skeleton.css
|   |   |       `-- wrappers
|   |   |           |-- amd.js.mustache
|   |   |           |-- common.js.mustache
|   |   |           |-- js.mustache
|   |   |           `-- mustache.js.mustache
|   |   `-- package.json
|   |-- components.html
|   |-- customize.html
|   |-- examples
|   |   |-- carousel.html
|   |   |-- fluid.html
|   |   |-- hero.html
|   |   |-- justified-nav.html
|   |   |-- marketing-narrow.html
|   |   |-- signin.html
|   |   |-- starter-template.html
|   |   |-- sticky-footer.html
|   |   `-- sticky-footer-navbar.html
|   |-- extend.html
|   |-- getting-started.html
|   |-- index.html
|   |-- javascript.html
|   |-- scaffolding.html
|   `-- templates
|       |-- layout.mustache
|       `-- pages
|           |-- base-css.mustache
|           |-- components.mustache
|           |-- customize.mustache
|           |-- extend.mustache
|           |-- getting-started.mustache
|           |-- index.mustache
|           |-- javascript.mustache
|           `-- scaffolding.mustache
|-- img
|   |-- glyphicons-halflings.png
|   `-- glyphicons-halflings-white.png
|-- js
|   |-- bootstrap-affix.js
|   |-- bootstrap-alert.js
|   |-- bootstrap-button.js
|   |-- bootstrap-carousel.js
|   |-- bootstrap-collapse.js
|   |-- bootstrap-dropdown.js
|   |-- bootstrap-modal.js
|   |-- bootstrap-popover.js
|   |-- bootstrap-scrollspy.js
|   |-- bootstrap-tab.js
|   |-- bootstrap-tooltip.js
|   |-- bootstrap-transition.js
|   |-- bootstrap-typeahead.js
|   `-- tests
|       |-- index.html
|       |-- phantom.js
|       |-- server.js
|       |-- unit
|       |   |-- bootstrap-affix.js
|       |   |-- bootstrap-alert.js
|       |   |-- bootstrap-button.js
|       |   |-- bootstrap-carousel.js
|       |   |-- bootstrap-collapse.js
|       |   |-- bootstrap-dropdown.js
|       |   |-- bootstrap-modal.js
|       |   |-- bootstrap-phantom.js
|       |   |-- bootstrap-popover.js
|       |   |-- bootstrap-scrollspy.js
|       |   |-- bootstrap-tab.js
|       |   |-- bootstrap-tooltip.js
|       |   |-- bootstrap-transition.js
|       |   `-- bootstrap-typeahead.js
|       `-- vendor
|           |-- jquery.js
|           |-- qunit.css
|           `-- qunit.js
|-- less
|   |-- accordion.less
|   |-- alerts.less
|   |-- bootstrap.less
|   |-- breadcrumbs.less
|   |-- button-groups.less
|   |-- buttons.less
|   |-- carousel.less
|   |-- close.less
|   |-- code.less
|   |-- component-animations.less
|   |-- dropdowns.less
|   |-- forms.less
|   |-- grid.less
|   |-- hero-unit.less
|   |-- labels-badges.less
|   |-- layouts.less
|   |-- media.less
|   |-- mixins.less
|   |-- modals.less
|   |-- navbar.less
|   |-- navs.less
|   |-- pager.less
|   |-- pagination.less
|   |-- popovers.less
|   |-- progress-bars.less
|   |-- reset.less
|   |-- responsive-1200px-min.less
|   |-- responsive-767px-max.less
|   |-- responsive-768px-979px.less
|   |-- responsive.less
|   |-- responsive-navbar.less
|   |-- responsive-utilities.less
|   |-- scaffolding.less
|   |-- sprites.less
|   |-- tables.less
|   |-- tests
|   |   |-- buttons.html
|   |   |-- css-tests.css
|   |   |-- css-tests.html
|   |   |-- forms.html
|   |   |-- forms-responsive.html
|   |   |-- navbar-fixed-top.html
|   |   |-- navbar.html
|   |   `-- navbar-static-top.html
|   |-- thumbnails.less
|   |-- tooltip.less
|   |-- type.less
|   |-- utilities.less
|   |-- variables.less
|   `-- wells.less
|-- LICENSE
|-- Makefile
|-- package.json
`-- README.md

40 directories, 248 files

Original folder name where all the files were extracted by default looked like ‘twitter-bootstrap-d991ef2’, we renamed it to twitter-bootstrap.

Getting started with Twitter Bootstrap

We will see now how we can develop a basic HTML Template powered by Twitter Bootstrap.

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Bootstrap basic Template</title>
  5.     <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  6.     <!– Bootstrap –>
  7.     <link href=”bootstrap/css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
  8.   </head>
  9.   <body>
  10.     <h1>Welcome to Twitter Bootstrap</h1>
  11.     <script src=”http://code.jquery.com/jquery.js”></script&gt;
  12.     <script src=”bootstrap/js/bootstrap.min.js”></script>
  13.   </body>
  14. </html>

You may have a live demo of this basic template.

While creating this template, we have placed the ‘bootstrap’ folder, which is obtained from the download of the compiled and minified version of Twitter Bootstrap (version 2.3.2) in the root folder of localhost. If you are working on a *NIX based system, make sure that this folder with all it’s subfolders and files have proper permission set to be run and executed.

You may use bootstrapcdn’s CDN to load Twitter Bootstrap. For that, replace “bootstrap/css/bootstrap.min.css” with “//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css” and “bootstrap/js/bootstrap.min.js” with “//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js”.

What you will learn

In w3resource “Twitter Bootstrap Tutorial” you will learn the following.

Grid system

You will see how to create Grid System using Twitter Bootstrap. It supports 940px wide 12 column Grid as default and many variations of it.

Grid Demo

Layouts

You will see how to create 940px wide fixed Layout and how to create Fluid layouts. This will help you to build HTML templates easily.

Fluid Layout

Responsive Design

Twitter Bootstrap offers a Responsive Design. We have a tutorial for creating responsive design with twitter Bootstrap.

Typography

You will see how to build Headings, paragraphs, lists, and other inline type elements.

Typography

Tables

You will see how to build tables for containing tabular data.

Tables

Forms

You will see how to build stylish forms, including textbox, radio button, textarea, various kind of buttons in your HTML page.

Form

Icons

Twitter Bootstrap uses Glyphicons to create awesome icons. w3resource has a tutorial to show you how to embed those awesome icons in a Twitter Bootsatrap powered web site/app.

Creating Twitter Bootstrap Icons

Tabs and Pills based navigations

w3resource has a detail tutorial on how to create Tabs and Pills based navigation in your web project.

Tabs and pills based navigation

Navigation

You will see how to build stylish modern navigation. And also Pagination.

Navbar

Inline Badges and Labels

Inline badges and labels can spice your design up for sure. Twitter Bootastrap offers you those UI components. w3resource shows how you can do that.

Inline badges and labels

Thumbnails

Thumbnails are so useful for creating grids and image and video specially. Twitter Bootstrap allows you to create thumbnails for holding video. image etc. w3resource has a tutorial to show you how to do that.

thumbnails

Progress Bars

Twitter Bootstrap allows you to create progress bars for loading, redirecting, or action status. w3resource has a tutorial to show you how to do that.

progress bars

Breadcrumbs

Twitter Bootstrap allows you to create Breadcrumbs. w3resource has a tutorial to show you how to do that.

Breadcrumbs

Less

LESS CSS preprocessrors are awesome to create a dynamic CSS- using variables, mixins, nested styles etc. w3resource offers a tutorial to how to use LESS with Twitter Bootstrap.

Alerts & Error

As a web designer / developer you often need to create alerts for errors, warnings etc. In this tutorial you will learn how to build those using Twitter Bootstrap.

Alerts

Popovers

You will learn to use the toolkit to build modal windows, tooltips and popovers.

popover

Modals

Creating modal windows.

Modal

Dropdowns

w3resource has a tutorial to discuss how to create dropdowns using Twitter Bootstrap.

Dropdowns

Scrollspy

Twitter Bootstrap ScrollSpy Plugin allows you to automatically update nav targets based on scroll position.w3resource has a tutorial to discuss how to use scrollspy using Twitter Bootstrap to create awesome user experience.

Scrollspy

Carousal

Twitter Bootstrap Carousal Plugin allows you to create content or image slider. w3resource has a tutorial to discuss how to use carousal using Twitter Bootstrap to create content / image slider.

Typehead

Once your user starts typing it comes with the predefined options for a better user experience. w3resource discusses how to use typehead in Twitter Bootstrap.

Buttons

Twitter Bootstrap has JavaScript Plugin to create Buttons. w3resource tutorial shows how to do that.

Button

Collapse

Expanding and collapsing content onlcick may add a better user experience. w3resource has a tutorial to show you how to do that using twitter Bootstrap.

collapse

Customizing

Often, you may want to build your own style on top of the vanilla styles available with Twitter Bootstrap. Depending upon the magnitude of the customization required, you may choose various ways to do that.

If you need customizations at a not that granular level, and if it is trivial mostly, you may create a stylesheet of your own comprising those styles and use that on top of the default css of the Twitter Bootstrap.

If you need more customization than that, you shall go for a entirely custom build. In that case, using ‘http://twitter.github.io/bootstrap/customize.html&#8217; you can choose components you want, select Jquery plugins you want to keep, use LESS variables to change look and feel of the project in question and then download that build.

There is an issue with the second case though. When Twitter Bootstrap is updated to a new version, since you build is a combination of the original styles form Bootstrap and your Custom addons, it may be impossible for you to separately update only the native part of Bootstrap.

To avoid this problem, you may keep the original LESS files unaltered, create a separate folder and build your own LESS files there, which imports the original LESS files from Bootstrap. This way, you can modularize and separate the native part part and when updated, you can update that part only.

Free starter template

We have created a simple starter template which may found useful. The template consists of many features of Twitter Bootstrap.

free templateYou may have a live demo of the template here.

You can download the template here. In addition to the files used in the template, you have to download the compiled and minified version of Twitter Bootstrap to get the template working.

Copy from http://www.w3resource.com/twitter-bootstrap/tutorial.php

Advertisements

One comment on “Twitter Bootstrap tutorial

  1. Pingback: Fix Compiler.js Errors - Windows XP, Vista, 7 & 8

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s