User:Mverma4/sandbox

Mverma4/sandbox

Original author(s)	Mark Otto, Jacob Thornton
Developer(s)	Bootstrap Core Team
Initial release	August 19, 2011 (2011-08-19)
Stable release	3.3.6 / November 24, 2015 (2015-11-24)
Preview release	4.0.0-alpha.2 / 8 December 2015
Written in	HTML, CSS, LESS, Sass and JavaScript
Platform	Web engines
Type	HTML and CSS-based design templates
License	MIT License (Apache License 2.0 prior to 3.1.0)
Website	getbootstrap.com

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

Bootstrap is the most-starred project on GitHub, with over 90K stars and more than 38K forks.

Origin

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. According to Twitter developer Mark Otto:

"A super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company."

After a few months of development by a small group, many developers at Twitter began to contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter's development team. It was renamed from Twitter Blueprint to Bootstrap, and released as an open source project on August 19, 2011. It has continued to be maintained by Mark Otto, Jacob Thornton, and a small group of core developers, as well as a large community of contributors.

Since the initial release Bootstrap has had over twenty releases, including two major rewrites with Bootstrap 2 and Bootstrap 3.

On January 31, 2012, Bootstrap 2 was announced. This release added the twelve-column grid layout and responsive design components, as well as changes to many of the existing components. The Bootstrap 3 release was announced on 19 August, 2013, moving to a mobile first approach and using a flat design.

On October 29, 2014, Mark Otto announced Bootstrap 4 was in development. The first alpha version of Bootstrap 4 was deployed on August 19, 2015.

Getting Started with Bootstrap

Bootstrap requires a single CSS file, an optional theme file and a Javascript file to use it on a web page. Additionally, jQuery is also required for Bootstrap's JavaScript plugins. These files can be included within a Web page by linking to a local copy or to one of copy available from content delivery network (CDN) hosted by MaxCDN.

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

It is also possible to include Bootstrap directly from CDNs:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Downloading Bootstrap

Bootstrap can be downloaded in two forms. Compiled and minified variations and source Code.

Precompiled Bootstrap

Precompiled bootstrap comes with Compiled and minified CSS, JavaScript, and fonts. No documentation or original source files are included in precompiled version. It can be downloaded from Bootstrap's Website.

Bootstrap Source Code

Bootstrap source code includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. Bootstrap source is available at Bootstrap's Website.

Basic Template

Below is a basic HTML template to start with bootstrap. It includes minimal CSS and Javascript resources.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>

    <!-- Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery Required for Bootstrap's JavaScript plugins -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap JS  -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Structure and Features

Example of a webpage using Bootstrap framework rendered in Mozilla Firefox

Bootstrap is modular and consists essentially of a series of LESS stylesheets that implement the various components of the toolkit. A stylesheet called bootstrap.less includes the components stylesheets. Developers can adapt the Bootstrap file itself, selecting the components they wish to use in their project.

Adjustments are possible to a limited extent through a central configuration stylesheet. More profound changes are possible by the LESS declarations.

The use of LESS stylesheet language allows the use of variables, functions and operators, nested selectors, as well as so-called mixins.

Since version 2.0, the configuration of Bootstrap also has a special "Customize" option in the documentation. Moreover, the developer chooses on a form the desired components and adjusts, if necessary, the values of various options to their needs. The subsequently generated package already includes the pre-built CSS style sheet.

Grid system and responsive design comes standard with a 1170 pixel wide, grid layout. Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns.

Responsive Web Design

Responsive Web Design is one of the key features of Bootstrap, since version 2.0 Bootstrap supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone). Starting with version 3.0, Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default.The version 4.0 alpha release added Sass and Flex box support.

Grid Layout

Grid System, Same page rendered on different devices

Grid Layout is another key feature of Bootstrap. Grid is a basic element for any layout design. The screen is split by using the  <div> tag and CSS to place elements on the webpage. Bootstrap provides its own grid layout system.

The grid system of Bootstrap consists of 12-column grid i.e. rows are horizontal groups of columns that ensure your columns are lined up properly and the column classes indicate the number of columns you’d like to use out of the possible 12 per row.

A row is expressed by using row and a column is expressed depending on the device type/size by using col-*-*. There are five grid tiers, one for each responsive breakpoint: extra small, small, medium, large, and extra large.

The col-md-4 is an example of a column defined for medium sized devices with width equal to 4 columns. Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., col-md-4 applies to medium, large, and extra large devices).

The total number of columns for one row in all devices is 12, thus for each row the col-*-* class can be expressed from col-*-1 to col-*-12. Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.

<!-- creates three equal-width columns on small, medium, large and extra large devices using predefined grid classes -->
<div class="row">
    <div class="col-sm-4">…</div>
    <div class="col-sm-4">…</div>
    <div class="col-sm-4">…</div>
</div>

Stylesheets/CSS

Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide a uniform, modern appearance for formatting text, tables and form elements. Starting with Bootstrap 2, mobile friendly styles were added for key aspects of the framework. Bootstrap 3 provides Mobile First Design. Bootstrap also usages Normalize for improved cross-browser rendering.

Re-usable Components

In addition to the regular HTML elements, Bootstrap contains other commonly used interface elements. These include buttons with advanced features (e.g. grouping of buttons or buttons with drop-down option, make and navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation, pagination, etc.), labels, advanced typographic capabilities, thumbnails, warning messages and a progress bar. The components are implemented as CSS classes, which must be applied to certain HTML elements in a page. Styling of each component follows a basic theme and can be easily customized.

Bootstrap has following components available:

• Glyphicons

Sample Glyphicons

Bootstrap Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are not available for free, but their creator has made them available for Bootstrap free of cost.

• Dropdowns
• Button groups
• Button dropdowns
• Input groups
• Navs
• Navbar
• Breadcrumbs
• Pagination
• Labels
• Badges
• Jumbotron
• Page header
• Thumbnails
• Alerts
• Progress bars
• Media object
• List group
• Panels
• Responsive embed
• Wells

JavaScript Components

Bootstrap comes with several JavaScript components in the form of jQuery plugins. They provide additional user interface elements such as dialog boxes, tooltips, and carousels. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields. In version 2.0, the following JavaScript plugins are supported: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse , Affix & Carousel.

Themes

Currently Bootstrap team has released three themes, one for each of the most popular types of Bootstrapped sites — dashboards, applications, and marketing sites.

Each theme includes:

• Beautiful example pages
• Custom documentation
• Several brand new, custom components
• Source Less and JavaScript files
• Easy build tools with Gulp

The themes are designed as toolkits, just like Bootstrap, to provide the user with a highly functional, visually consistent, and beautiful set of components.

While Bootstrap is free for everyone, these themes are only available for purchase

Dashboard Theme

Designed to be the perfect starting point for any dashboard or admin site. It includes charts, graphs, sortable tables, and more than a dozen other components.

A basic glimpse of the Dashboard Theme can be found here.

Marketing Theme

Designed to help build marketing sites. It includes over 15 different CSS and JS components that can adapt to any brand or style.

A basic glimpse of the Marketing Theme can be found here.

Application Theme

Designed to build robust web apps with timelines, profiles, notifications, messages, activity, and new utility classes.

A basic glimpse of the Dashboard Theme can be found here.

Browser Support

Bootstrap is compatible with the latest versions of the Google Chrome, Firefox, Internet Explorer and Safari browsers, although some of these browsers are not supported on all platforms.

Mobile Devices

Generally, Bootstrap supports the latest versions of most of the major platform’s default browsers.

	Google Chrome	Mozilla Firefox	Opera	Safari	Android Browser & WebView
Android	Supported	Supported	Not Supported	N/A	Android v5.0+ supported
iOS	Supported	N/A	Not Supported	Supported	N/A

Desktop Browsers

Similarly, the latest versions of most of the desktop browsers are supported.

	Google Chrome	Mozilla Firefox	Opera	Safari	Internet Explorer	Microsoft Edge
Mac OS X	Supported	Supported	Supported	Supported	N/A	N/A
Windows	Supported	Supported	Supported	Not Supported	Supported	Supported

Linux and IE7

Although Bootstrap is not officially supported for Linux and Internet Explorer 7, Bootstrap works well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7.

Internet Explorer 8 and 9

Bootstrap supported Internet Explorer 8 and 9, however, there are few CSS3 properties and HTML5 elements which are not fully supported by these browsers. In addition, Internet Explorer 8 requires Respond.js in order to enable media query support.

Feature	Internet Explorer 8	Internet Explorer 9
border-radius	Not supported	Supported
box-shadow	Not supported	Supported
transform	Not supported	Supported, with -ms prefix
transition	Not supported
placeholder	Not supported

Bugs

Although Bootstrap works around several outstanding browser bugs in major browsers. However there are some bugs which cannot be solved by bootstrap. List of these bugs can be found here.

Release History

Since the initial release Bootstrap has had over twenty releases, including two major rewrites with Bootstrap 2 and Bootstrap 3.

The following table includes links to each release where you can find the release notes and documentation of that release.

Version Number	Release Date
1.0.0	August 18, 2011
1.1.0	August 22, 2011
1.1.1	August 26, 2011
1.2.0	September 3, 2011
1.3.0	September 16, 2011
1.4.0	November 3, 2011
2.0.0	January 31, 2012
2.0.1	February 17, 2012
2.0.2	March 12, 2012
2.0.3	April 24, 2012
2.0.4	June 1, 2012
2.1.0	August 20, 2012
2.1.1	September 4, 2012
2.2.0	October 30, 2012
2.2.1	October 31, 2012
2.2.2	December 8, 2012
2.3.0	February 8, 2013
2.3.1	March 1, 2013
2.3.2	July 27, 2013
3.0.0 rc1	July 27, 2013
3.0.0 rc2	August 13, 2013
3.0.0	August 19, 2013
3.0.1	October 30, 2013
3.0.2	November 6, 2013
3.0.3	December 5, 2013
3.1.0	January 30, 2014
3.1.1	February 13, 2014
3.2.0	June 26, 2014
3.3.0	October 29, 2014
3.3.1	November 12, 2014
3.3.2	January 19, 2015
3.3.4	March 16, 2015
3.3.5	June 16, 2015
4.0.0 alpha	August 19, 2015
3.3.6	November 24, 2015
4.0.0 alpha2	December 8, 2015

See also

• Bootstrap - The official website, contains documentation and downloads
• Bootstrap Blog - The official Bootstrap blog maintained by the developer, Mark Otto
• Bootstrap Github- The Github Repository of Bootstrap
• Bootstrap 3 Tutorial - w3schools.com
• CSS frameworks
• CSS
• JavaScript
• LESS stylesheets

References

Category:HTML Category:Cascading Style Sheets Category:JavaScript libraries Category:Web design Category:CSS frameworks Category:Software using the MIT license Category:Free software projects