Bootstrap
- Bootstrap is a free front-end framework for faster and easier web development
- Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as optional
JavaScript plugins
- Bootstrap also gives you the ability to easily create responsive designs
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.
Bootstrap History
- Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as
an open source product in August 2011 on GitHub.
- In June 2014 Bootstrap was the No.1 project on GitHub!
Why Use Bootstrap?
Advantages of Bootstrap:
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox,
Internet Explorer, Safari, and Opera)
In creating your bootstrap website, you must consider the following:
1. Add the HTML5 doctype
- Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.
- Always include the HTML5 doctype at the beginning of the page, along with the
lang attribute and the correct character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html
2. Bootstrap 3 is mobile-first
- Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part
of the core framework.
- To ensure proper rendering and touch zooming, add the following <meta> tag inside
the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
- The width=device-width part sets the width of the page to follow the screen-width of the
device (which will vary depending on the device).
- The initial-scale=1 part sets the initial zoom level when the page is first loaded by the
browser.
3. Containers
- Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
1. The .container class provides a responsive fixed width container
2. The .container-fluid class provides a full width container, spanning the entire width
of the viewport
Note: Containers are not nestable (you cannot put a container inside another container).
Installing Bootstrap
- To install the customized bootstrap, just copy the following folders(bootstrap CSS and
JavaScript) under C:\xampp\htdocs\websitefolder
- data
- dist
- js
- less
- vendor
Customized Bootstrap has the following CORE CSS.
1. Bootstrap Core CSS
vendor/bootstrap/css/bootstrap.min.css
2. MetisMenu CSS
vendor/metisMenu/metisMenu.min.css
3. Social Buttons CSS
vendor/bootstrap-social/bootstrap-social.css
4. Customized CSS
dist/css/customized.css
5. Customized Fonts
vendor/font-awesome/css/font-awesome.min.css
Note: All this CSS files must be link after the </title> tag.
Example:
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="vendor/bootstrap-social/bootstrap-social.css" rel="stylesheet">
<link href="dist/css/customized.css" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
Customized Bootstrap has the following CORE JavaScript.
1. Jquery Library
vendor/jquery/jquery.min.js
2. Bootstrap Core JavaScript
vendor/bootstrap/js/bootstrap.min.js
3. Metis Menu Plugin JavaScript
vendor/metisMenu/metisMenu.min.js
4. Custom Theme JavaScript
dist/js/customized.js
Note: All this CSS files must be link after the </body> tag.
Example:
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/metisMenu/metisMenu.min.js"></script>
<script src="dist/js/customized.js"></script>
Bootstrap Grid System
- Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to
12 columns (col-md-1 to col-md-12) as the device or viewport size increases. It includes
predefined classes for easy layout options, as well as powerful mixins for generating
more semantic layouts.
- Grid systems are used for creating page layouts through a series of rows and columns
that house your content.
The Bootstrap grid system has four
classes: xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
Note:
- First; create a row (<div class="row">). Then, add the desired number of columns (tags with
appropriate .col-*-* classes).
- Numbers in .col-*-* should always add up to 12 for each row.
Bootstrap Important Elements
Bootstrap Panels
- A panel in bootstrap is a bordered box with some padding around its content. It is looks like
a form in some Windows Applications.
- Panels are created with the .panel class
- Use .panel-heading class to easily add a heading container to your panel and
content inside the panel has a .panel-body class:
- The .panel-footer class adds a footer to the panel:
Example:
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Body
</div>
<div class="panel-footer">Panel Footer</div>
</div>
Panels with Contextual Classes
To color the panel, use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-
info, .panel-warning, .panel-danger, .panel-green, .panel-yellow, or .panel-red):
Bootstrap Button
- Anything that is given a class of .btn will inherit the default look of a gray button with
rounded corners. However, Bootstrap provides some options to style buttons, which are
summarized in the following picture.
Normal Buttons classes.
Class Description
btn-default Default/ Standard button.
btn-primary Provides extra visual weight and identifies the primary action in a set of
buttons.
btn-success Indicates a successful or positive action.
btn-info Contextual button for informational alert messages.
btn-warning Indicates caution should be taken with this action.
btn-danger Indicates a dangerous or potentially negative action.
btn-link Deemphasize a button by making it look like a link while maintaining
button behavior.
Example:
- <button type="button" class="btn btn-default">Default</button>
- <button type="button" class="btn btn-primary">Primary</button>
- <button type="button" class="btn btn-success">Success</button>
- <button type="button" class="btn btn-info">Info</button>
- <button type="button" class="btn btn-warning">Warning</button>
- <button type="button" class="btn btn-danger">Danger</button>
- <button type="button" class="btn btn-link">Link</button>
Disabled Buttons
- When you disable a button, it will fade in color by 50%, and lose the gradient.
- Add the disabled attribute to <button> buttons.
- btn-default disabled
- btn-primary disabled
- btn-success disabled
- btn-info disabled
- btn-warning disabled
- btn-danger disabled
- btn-link disabled
Example
- <button type="button" class="btn btn-default disabled">Default</button>
- <button type="button" class="btn btn-primary disabled">Primary</button>
- <button type="button" class="btn btn-success disabled">Success</button>
- <button type="button" class="btn btn-info disabled">Info</button>
- <button type="button" class="btn btn-warning disabled">Warning</button>
- <button type="button" class="btn btn-danger disabled">Danger</button>
- <button type="button" class="btn btn-link disabled">Link</button>
Button Sizes
Class Description
.btn-lg This makes the button size large.
.btn-sm This makes the button size small.
.btn-xs This makes the button size extra small.
.btn-block This creates block level buttons—those that span the full width of a
parent.
Example:
- <button type="button" class="btn btn-primary btn-lg">Large button</button>
- <button type="button" class="btn btn-primary btn-sm">Small button</button>
- <button type="button" class="btn btn-primary btn-xs">Mini button</button>
- <button type="button" class="btn btn-primary btn-block">Block Level button</button>
Outline Buttons Class
- Just include btn-outline class of a button
Example:
<button type="button" class="btn btn-outline btn-default">Default</button>
<button type="button" class="btn btn-outline btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-success">Success</button>
<button type="button" class="btn btn-outline btn-info">Info</button>
<button type="button" class="btn btn-outline btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-link">Link</button>
Circle Button
- btn-circle class will make the button circular in shape.
Example:
<button type="button" class="btn btn-primary btn-circle">B</button>
<button type="button" class="btn btn-success btn-circle">C</button>
<button type="button" class="btn btn-info btn-circle">D</button>
<button type="button" class="btn btn-warning btn-circle">E</button>
<button type="button" class="btn btn-danger btn-circle">F</button>
Button with Icons
- to create a Button with icon, just include <i class="icon class"></i> tag before the </button>
tag.
- icon class (please refer to http://irwincansejo.com/TTLM/icons.php)
Example:
<button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i></button>
<button type="button" class="btn btn-success btn-circle"><i class="fa fa-link"></i></button>
<button type="button" class="btn btn-info btn-circle"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-warning btn-circle"><i class="fa fa-times"></i></button>
<button type="button" class="btn btn-danger btn-circle"><i class="fa fa-heart"></i></button>
Social Buttons
- btn-social class is usually used to link to the different Social Networking sites like
Facebook, Twitter and others.
Example:
<button type="button" class="btn btn-block btn-social btn-bitbucket"><i class="fa fa-bitbucket"></i> Sign in with
Bitbucket</button>
<button type="button" class="btn btn-block btn-social btn-dropbox"><i class="fa fa-dropbox"></i> Sign in with
Dropbox</button>
<button type="button" class="btn btn-block btn-social btn-facebook"><i class="fa fa-facebook"></i> Sign in with
Facebook</button>
<button type="button" class="btn btn-block btn-social btn-flickr"><i class="fa fa-flickr"></i> Sign in with Flickr</button>
<button type="button" class="btn btn-block btn-social btn-github"><i class="fa fa-github"></i> Sign in with
GitHub</button>
<button type="button" class="btn btn-block btn-social btn-google-plus"><i class="fa fa-google-plus"></i> Sign in with
Google</button>
<button type="button" class="btn btn-block btn-social btn-instagram"><i class="fa fa-instagram"></i> Sign in with
Instagram</button>
<button type="button" class="btn btn-block btn-social btn-linkedin"><i class="fa fa-linkedin"></i> Sign in with
LinkedIn</button>
<button type="button" class="btn btn-block btn-social btn-pinterest"><i class="fa fa-pinterest"></i> Sign in with Pinterest
</button>
<button type="button" class="btn btn-block btn-social btn-tumblr"><i class="fa fa-tumblr"></i> Sign in with Tumblr
</button>
<button type="button" class="btn btn-block btn-social btn-twitter"><i class="fa fa-twitter"></i> Sign in with Twitter
</button>
<button type="button" class="btn btn-block btn-social btn-vk"><i class="fa fa-vk"></i> Sign in with VK </button>
<button type="button" class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
<button type="button" class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></button>
<button type="button" class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></button>
<button type="button" class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></button>
<button type="button" class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></button>
<button type="button" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></button>
<button type="button" class="btn btn-social-icon btn-pinterest"><i class="fa fa-pinterest"></i></button>
<button type="button" class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></button>
<button type="button" class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></button>
