Step By Step 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, bh24 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.

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.

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-marketing-narrow.png

| | | | `-- slide-03.jpg

| | | |-- example-sites

| | | | `-- 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

| | | | `-- template.js

| | | |-- LICENSE

| | | |-- Makefile

| | | |-- package.json

| | | |-- README.md

| | | |-- test

| | | | `-- templates

| | | | `-- list.mustache

| | | |-- tools

| | | | `-- web_templates.js

| | | |-- web

| | | | |-- 1.0.0

| | | | | |-- 1.0.0

| | | | | |-- 1.0.3

| | | | | `-- 1.0.5

| | | | `-- stylesheets

| | | | `-- 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.

<!DOCTYPE html>

<html>
  <head>
    <title>Bootstrap basic Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Welcome to Twitter Bootstrap</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

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 bh24 "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.

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.

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.

Tables

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

Forms

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

Icons

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

Tabs and Pills based navigations

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

Navigation

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

Inline Badges and Labels

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

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. bh24 has a tutorial to show you how to do that.

Progress Bars

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

Breadcrumbs

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

Less

LESS CSS preprocessrors are awesome to create a dynamic CSS- using variables, mixins, nested styles etc. bh24 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.

Popovers

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

Modals

Creating modal windows.

Dropdowns

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

Scrollspy

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

Carousal

Twitter Bootstrap Carousal Plugin allows you to create content or image slider. bh24 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. bh24 discusses how to use typehead in Twitter Bootstrap.

Buttons

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

Collapse

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

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' 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.

W3Examiner

Search This Blog

Step By Step Twitter Bootstrap Tutorial

Comments

Post a Comment