User:Mverma4/sandbox

Mverma4/sandbox
Original author(s)	Mark Otto, Jacob Thornton
Developer(s)	Bootstrap Core Team
Initial release	August 19, 2011; 13 years ago
Stable release	3.3.6 / November 24, 2015
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

This is a user sandbox of Mverma4. You can use it for testing or practicing edits.
This is not the sandbox where you should draft your assigned article for a dashboard.wikiedu.org course.
To find the right sandbox for your assignment, visit your Dashboard course page and follow the Sandbox Draft link for your assigned article in the My Articles section.

Get Help

This is the user sandbox of Mverma4. A user sandbox is a subpage of the user's user page. It serves as a testing spot and page development space for the user and is not an encyclopedia article. Create or edit your own sandbox here.

Other sandboxes: Main sandbox | Template sandbox

Finished writing a draft article? Are you ready to request review of it by an experienced editor for possible inclusion in Wikipedia? Submit your draft for review!

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.^[2]

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

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."^[4]

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.^[5] 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.^[2]

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

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.^[6] The Bootstrap 3 release was announced on 19 August, 2013, moving to a mobile first approach and using a flat design.^[7]

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

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^[10]

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

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.^[11]

Grid Layout^[12]

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^[12] 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.^[12]

<!-- 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^[13]

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

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.

JavaScript Components^[14]

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^[15]

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^[15]

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.^[16]

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.^[17]

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.^[18]

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

Browser Support^[19]

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.^[19]

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^[20]

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^[21]

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

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

References

^ "Bootstrap 3.3.6 Released". Retrieved 2 December 2015.
^ ^a ^b ^c ^d "About". Bootstrap.
^ "Search · stars:>1". GitHub. Retrieved 14 December 2015.
^ Otto, Mark (17 January 2012). "Bootstrap in A List Apart No. 342". Mark Otto.
^ Otto, Mark (19 August 2011). "Bootstrap from Twitter". Developer Blog. Twitter.
^ Otto, Mark (31 January 2012). "Say hello to Bootstrap 2.0". Developer Blog. Twitter.
^ "Bootstrap 3 released". The Official Bootstrap Blog. 19 August 2013.
^ Otto, Mark. "Bootstrap 3.3.0 released". Bootstrap Blog. Retrieved 21 August 2015.
^ Otto, Mark. "Bootstrap 4 alpha". Bootstrap Blog. Retrieved 20 August 2015.
^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Getting started · Bootstrap". getbootstrap.com. Retrieved 2016-02-06. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)
^ "Bootstrap 4 alpha". Bootstrap.
^ ^a ^b ^c contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Grid system · Bootstrap". v4-alpha.getbootstrap.com. Retrieved 2016-02-08. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)
^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Components · Bootstrap". getbootstrap.com. Retrieved 2016-02-15. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)
^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "JavaScript · Bootstrap". getbootstrap.com. Retrieved 2016-02-15. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)
^ ^a ^b "Hey everyone!". Bootstrap Themes. Retrieved 2016-02-06.
^ "Dashboard". Bootstrap Themes. Retrieved 2016-02-06.
^ "Marketing". Bootstrap Themes. Retrieved 2016-02-06.
^ "Application". Bootstrap Themes. Retrieved 2016-02-06.
^ ^a ^b "Supported browsers". Bootstrap.
^ contributors, Mark Otto, Jacob Thornton, and Bootstrap. "Wall of browser bugs · Bootstrap". v4-alpha.getbootstrap.com. Retrieved 2016-02-15. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)
^ "twbs/bootstrap". GitHub. Retrieved 2016-02-06.

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

[334release-1] "Bootstrap 3.3.6 Released". Retrieved 2 December 2015.

[about-2] "About". Bootstrap.

[moststarred-3] "Search · stars:>1". GitHub. Retrieved 14 December 2015.

[bootstrap_a_list_apart-4] Otto, Mark (17 January 2012). "Bootstrap in A List Apart No. 342". Mark Otto.

[release-announcement-5] Otto, Mark (19 August 2011). "Bootstrap from Twitter". Developer Blog. Twitter.

[bootstrap2-6] Otto, Mark (31 January 2012). "Say hello to Bootstrap 2.0". Developer Blog. Twitter.

[bootstrap3-7] "Bootstrap 3 released". The Official Bootstrap Blog. 19 August 2013.

[bs4dev-8] Otto, Mark. "Bootstrap 3.3.0 released". Bootstrap Blog. Retrieved 21 August 2015.

[bs4alpha-9] Otto, Mark. "Bootstrap 4 alpha". Bootstrap Blog. Retrieved 20 August 2015.

[:1-10] tributors, Mark Otto, Jacob Thornton, and Bootstrap. "Getting started · Bootstrap". getbootstrap.com. Retrieved 2016-02-06. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)

[11] "Bootstrap 4 alpha". Bootstrap.

[:2-12] tributors, Mark Otto, Jacob Thornton, and Bootstrap. "Grid system · Bootstrap". v4-alpha.getbootstrap.com. Retrieved 2016-02-08. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)

[13] tributors, Mark Otto, Jacob Thornton, and Bootstrap. "Components · Bootstrap". getbootstrap.com. Retrieved 2016-02-15. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)

[14] tributors, Mark Otto, Jacob Thornton, and Bootstrap. "JavaScript · Bootstrap". getbootstrap.com. Retrieved 2016-02-15. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)

[:3-15] "Hey everyone!". Bootstrap Themes. Retrieved 2016-02-06.

[16] "Dashboard". Bootstrap Themes. Retrieved 2016-02-06.

[17] "Marketing". Bootstrap Themes. Retrieved 2016-02-06.

[18] "Application". Bootstrap Themes. Retrieved 2016-02-06.

[:0-19] "Supported browsers". Bootstrap.

[20] tributors, Mark Otto, Jacob Thornton, and Bootstrap. "Wall of browser bugs · Bootstrap". v4-alpha.getbootstrap.com. Retrieved 2016-02-15. {{cite web}}: |last= has generic name (help)CS1 maint: multiple names: authors list (link)

[21] "twbs/bootstrap". GitHub. Retrieved 2016-02-06.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]