Bootstrap 101 Template

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

-- cgit v1.2.3 From 8450aa7dbfabfe59702943ef20d5e4417f29e1b2 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 13 Oct 2013 23:23:04 -0700 Subject: avoid referencing /docs-assets/ in Getting Started docs example; use CDN URL for respond.js --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index b37ad1cfe..bb81989a4 100644 --- a/getting-started.html +++ b/getting-started.html @@ -112,7 +112,7 @@ bootstrap/ -- cgit v1.2.3 From ceb7694ee325db6b85de374192ecda2407a731ea Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sun, 13 Oct 2013 23:50:20 -0700 Subject: add note to docs about Respond.js & file:// ; fixes part of #11019 --- getting-started.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 67b367c52..bbb1c1b96 100644 --- a/getting-started.html +++ b/getting-started.html @@ -176,7 +176,8 @@ bootstrap/ - + + -

- -

You're looking at the official documentation for Bootstrap (v{{ site.version }}), a front-end framework for building on the Web. Before diving in, get the background story on Bootstrap, useful tidbits about the docs, helpful community links, and more.

- -

Brief history

Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded. It served as the style guide for internal tools development at the company for over a year before its public release.

Originally released on Friday, August 19, 2011, we've had over twenty releases, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.

- -

Core team

Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.

- - -

- Mark Otto @mdo - - - -

- Jacob Thornton @fat - - - -

- Chris Rebert @cvrebert - - - -

- Julian Thilo @juthilo - -

Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for more information.

- -

Callouts

We use callouts throughout the docs to direct attention to important contextual information. These callouts can be informative and optional (blue), warnings (yellow), or dangerously important (red).

Extra information

These are helpful notes that provide background information or additional context.

Heads up

This is a warning used to highlight pertinent, though not necessarily required, information.

Potential danger ahead

Pay attention to these for potentially dangerous or tricky requirements, bugs, and more.

See something worth calling out? Let us know with an issue on GitHub.

- -

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Have a question that's not a feature request or bug report? Ask on the mailing list.
Chat with fellow Bootstrappers using IRC in the irc.freenode.net server, in the ##twitter-bootstrap channel.
Find inspiring examples of people building with Bootstrap at the Bootstrap Expo.

You can also follow @twbootstrap on Twitter for the latest gossip and awesome music videos.

- -

-- cgit v1.2.3 From 4e1808930a7ad9cbfcf76a5b05ac90bced761eb8 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 14 Oct 2013 16:23:20 -0700 Subject: add IDs to frequently-referenced parts of the docs --- getting-started.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index c088a2b2c..1c358edb4 100644 --- a/getting-started.html +++ b/getting-started.html @@ -85,7 +85,7 @@ bootstrap/ {% endhighlight %}

This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). Fonts from Glyphicons are included, as is the optional Bootstrap theme.

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

@@ -756,7 +756,7 @@ bootstrap/

Internet Explorer 8 and box-sizing

IE8 does not fully support box-sizing: border-box; when combined with min-width, max-width, min-height, or max-height. For that reason, as of v3.0.1, we no longer use max-width on .containers.

IE Compatibility modes

Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <meta> tag in your pages:

{% highlight html %} @@ -764,7 +764,7 @@ bootstrap/

This tag is included in all docs pages and examples to ensure the best rendering possible in each supported version of Internet Explorer.

See this StackOverflow question for more information.

Internet Explorer 10 in Windows 8 and Windows Phone 8

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

{% highlight css %} @-ms-viewport { width: device-width; } @@ -792,7 +792,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

As a heads up, we include this in the Bootstrap docs as an example.

Safari percent rounding

As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (see #9282) but you do have some options:

Add .pull-right to your last grid column to get the hard-right alignment

We'll keep an eye on this though and update our code if we have an easy solution.

Modals and mobile devices

Overflow and scrolling

Support for overflow: hidden on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body> content will begin to scroll.

Virtual keyboards

Also, note that if you're using inputs in your modal – iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to position: absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Browser zooming

Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.

-- cgit v1.2.3 From 9d54a42951939fc8a4765aa3d8427a4227d459f9 Mon Sep 17 00:00:00 2001 From: Case Talbot Date: Tue, 15 Oct 2013 17:02:21 -0700 Subject: Include a note about text-based form control styling fixes #8824. --- getting-started.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 1c358edb4..3eef6f795 100644 --- a/getting-started.html +++ b/getting-started.html @@ -668,7 +668,8 @@ bootstrap/

Additional notes

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

Text-based form controls are now 100% wide. Wrap inputs inside <div class="col-*"></div> to control input widths.
By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the form-control class on the element to style.
Text-based form controls with the form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
.badge no longer has contextual (-success,-primary,etc..) classes.
.btn must also use .btn-default to get the "default" button.
.container and .row are now fluid (percentage-based).

Date: Tue, 15 Oct 2013 17:25:34 -0700 Subject: add dots to class name references for consistency --- getting-started.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 3eef6f795..480ab74ff 100644 --- a/getting-started.html +++ b/getting-started.html @@ -668,8 +668,8 @@ bootstrap/

Additional notes

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the form-control class on the element to style.
Text-based form controls with the form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the .form-control class on the element to style.
Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
.badge no longer has contextual (-success,-primary,etc..) classes.
.btn must also use .btn-default to get the "default" button.
.container and .row are now fluid (percentage-based).

Date: Wed, 16 Oct 2013 15:36:14 -0700 Subject: upgrade to html5shiv v 3.7.0 --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 480ab74ff..ec3462f0e 100644 --- a/getting-started.html +++ b/getting-started.html @@ -113,7 +113,7 @@ bootstrap/ -- cgit v1.2.3 From d1dd1fcdee3a081dc2aa9874ba20ae5584652a01 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 28 Oct 2013 11:07:56 -0700 Subject: add warning about Respond.js not supporting @import; fixes #11143 --- getting-started.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index ec3462f0e..9eb820dff 100644 --- a/getting-started.html +++ b/getting-started.html @@ -713,6 +713,10 @@ bootstrap/

Respond.js and `file://`

Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

Respond.js and `@import`

Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

-- cgit v1.2.3 From 4b8c66269894b3110ca74815dff134af7713d463 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Oct 2013 21:19:09 -0700 Subject: use regular text, not callouts --- getting-started.html | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 9eb820dff..fbed75ec7 100644 --- a/getting-started.html +++ b/getting-started.html @@ -705,18 +705,6 @@ bootstrap/

Internet Explorer 8 and 9

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and `file://`

Respond.js and `@import`

Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

@@ -758,6 +746,15 @@ bootstrap/

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

Internet Explorer 8 and Respond.js

Using Respond.js does not come without some caveats. Be aware of the following when using it in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and `file://`

Respond.js and `@import`

Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

Internet Explorer 8 and box-sizing

-- cgit v1.2.3 From 96d7d4a489ef937657ba235dc384f92ef6c5a76e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Oct 2013 21:48:57 -0700 Subject: edit --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index fbed75ec7..8d26760eb 100644 --- a/getting-started.html +++ b/getting-started.html @@ -747,7 +747,7 @@ bootstrap/

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

Internet Explorer 8 and Respond.js

Using Respond.js does not come without some caveats. Be aware of the following when using it in your development and production environments for Internet Explorer 8.

Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and `file://`

-- cgit v1.2.3 From e5c3f2d9d4fc23cda184a3ec54c9055e4f188e7a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Oct 2013 21:50:05 -0700 Subject: restore IDs --- getting-started.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index 8d26760eb..cdc9e7603 100644 --- a/getting-started.html +++ b/getting-started.html @@ -748,11 +748,11 @@ bootstrap/

Internet Explorer 8 and Respond.js

Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and `file://`

Respond.js and `@import`

Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

Internet Explorer 8 and box-sizing

-- cgit v1.2.3 From 88b651012d5ccefde2088010134079c8eccc6051 Mon Sep 17 00:00:00 2001 From: Julian Thilo Date: Sat, 2 Nov 2013 13:34:31 +0100 Subject: Fix #7398 in Basic template See https://github.com/twbs/bootstrap/issues/7398#issuecomment-27617890 for details. Thanks @martinburger --- getting-started.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index cdc9e7603..da317aa84 100644 --- a/getting-started.html +++ b/getting-started.html @@ -108,7 +108,7 @@ bootstrap/ Bootstrap 101 Template - + -- cgit v1.2.3 From 05c826d67d761e09546385b8470a8fa7f26925d6 Mon Sep 17 00:00:00 2001 From: Pascal Borreli Date: Sun, 3 Nov 2013 03:08:11 +0000 Subject: Removed duplicated class change from migration instructions --- getting-started.html | 4 ---- 1 file changed, 4 deletions(-) (limited to 'getting-started.html') diff --git a/getting-started.html b/getting-started.html index da317aa84..5a735b68c 100644 --- a/getting-started.html +++ b/getting-started.html @@ -469,10 +469,6 @@ bootstrap/ - - - -

`.accordion-inner`	`.panel-body`
`.alert-error`	`.alert-danger`

Welcome!

Brief history

Core team

Callouts

Extra information

Heads up

Potential danger ahead

Community

Welcome!

Brief history

Core team

Hello, world!

Internet Explorer 8 and 9

Respond.js and cross-domain CSS

Welcome!

Brief history

Core team

Callouts

Extra information

Heads up

Potential danger ahead

Community

jQuery required

Internet Explorer 8 and box-sizing

IE Compatibility modes

IE Compatibility modes

Internet Explorer 10 in Windows 8 and Windows Phone 8

Internet Explorer 10 in Windows 8 and Windows Phone 8

Safari percent rounding

Safari percent rounding

Modals and mobile devices

Modals and mobile devices

Overflow and scrolling

Virtual keyboards

Browser zooming

Browser zooming

Additional notes

Additional notes

Respond.js and file://

Respond.js and @import

Internet Explorer 8 and 9

Respond.js and cross-domain CSS

Respond.js and file://

Respond.js and @import

Internet Explorer 8 and Respond.js

Respond.js and cross-domain CSS

Respond.js and file://

Respond.js and @import

Internet Explorer 8 and box-sizing

Internet Explorer 8 and Respond.js

Respond.js and cross-domain CSS

Respond.js and file://

Internet Explorer 8 and Respond.js

Respond.js and cross-domain CSS

Respond.js and cross-domain CSS

Respond.js and file://

Respond.js and file://

Respond.js and @import

Respond.js and @import

Internet Explorer 8 and box-sizing

What's included

jQuery required

Precompiled Bootstrap

jQuery required

Bootstrap source code

Respond.js and `file://`

Respond.js and `@import`

Respond.js and `file://`

Respond.js and `@import`

Respond.js and `file://`

Respond.js and `@import`

Respond.js and `file://`

Respond.js and `file://`

Respond.js and `file://`

Respond.js and `@import`

Respond.js and `@import`