Bootstrap 3

*To better illustrate how we'll be developing in the future, we're using this pull request for Bootstrap 3. In the future, this will be feature-specific (e.g., a branch like `3.1.0-modal-revamp` instead of `n.n.n-wip`).*

While our last major version bump (2.0) was a complete rewrite of the docs, CSS, and JavaScript, the move to 3.0 is equally ambitious, but for a different reason: **Bootstrap 3 will be mobile-first.** This is an ongoing document to identify the changes we'll be making along the way.



## Docs

![Screen Shot 2013-03-29 at 2 26 52 PM](https://f.cloud.github.com/assets/98681/319244/6f1846e4-98b7-11e2-98a7-c9804916d418.png)
![Screen Shot 2013-03-29 at 2 26 59 PM](https://f.cloud.github.com/assets/98681/319243/6f1961e6-98b7-11e2-854f-20216b5533e5.png)
![Screen Shot 2013-03-29 at 11 41 24 PM](https://f.cloud.github.com/assets/98681/320059/0cbad7d6-9912-11e2-89b5-e5d71c31e93f.png)

We'll be working to simplify the content of the docs once again. Key changes are around the organization of the pages and the tools powering them.

#### General docs changes
- [x] **Convert docs to Jekyll.** 
  - Instead of Mustache, docs templates are built with [Jekyll](http://jekyllrb.com).
  - This greatly simplifies deploying docs changes, isolates our docs from CSS and JavaScript changes, and drastically decreases the amount of code being tracked in the repo.
  - It also provides better URLs, page title variables, partials, and code highlighting.
- [x] **Consolidate all docs pages into single page.**
  - Instead of separate pages and two levels of separate nav, we have a single page.
  - Scrollspy still works and takes folks through the entire docs content with ease, including a nested navigation that is automatically toggled by section.
  - Massively simpler for finding content via Cmd/Ctrl+F for those new to and familiar with the project.
- [x] **Remove all i18n tags from Mustache templates.** No more `{{_i}}` and `{{/i}}` in the docs templates, just raw HTML in our Mustache files.
- [x] **Remove Extend page** because it's content was not directly applicable to Bootstrap and out of date with info in the readme and Getting Started page.

#### Readme updates
- [x] **Started list of "Bootstrap elsewhere" links** for documenting popular implementations of Bootstrap within other services, e.g. Roots starter WordPress theme.
- [x] Reordered readme to punt the license file text and simply link to the license file.

#### Homepage
- [x] Point link to the new [Bootstrap Expo](http://expo.getbootstrap.com).
- [x] Swap examples for newer sites, linked from the Expo.
- [ ] Redo illustrations.

#### Getting started
- [x] Add Bower installation instructions to guide.
- [ ] Add new Customization best practices section. Draft here: https://gist.github.com/mdo/3ceb9f4f8b5c65d5c25b.

#### Example templates
- [ ] Update all examples to reflect changes in markup and mobile-first push.



## Global JavaScript

- [ ] Overhaul CSS transitions and reinforce with JavaScript transitions as necessary.
- [ ] Improve noConflict throughout plugins.
- [ ] Namespace events to reduce conflict issues.



## Global CSS

At a high level, we're dropping IE7 and FF3.6 support, combining standard and responsive CSS into a single file, and consolidating additional code as appropriate.

### Browser support
- [x] **Drop support for IE7.** Removed all `*` hacks, such as `*zoom: 1;`, and other IE7-specific lines of CSS.
- [x] **Drop support for Firefox 3.6.** Removed `-moz-box-shadow` instances and related hacks.

### LESS changes
- [x] **Rename variables to use dashes** instead of camelCase. For example, it's now `@body-background` instead of `@bodyBackground`.
- [x] **Replace existing color variables with more semantic ones.**
  - No more `@blue`, `@orange`, and the like, which we weren't using them much anyway.
  - They've been replaced with `@brand-primary`, `@brand-success`, and others. These are then assigned on a per-component basis (e.g., `@state-warning-text`, `@btn-background-primary`, etc).
  - Also removed `@black` and `@white` because `#000` and `#fff` are 20% shorter and not something that should be controlled via variable.
- [x] **Remove `.border-radius()` and `.border-*-*-radius` mixins.** 
  - As only Android 2.1, iOS 3.2, and older desktop browsers [require a prefixed version](http://caniuse.com/#feat=border-radius), we've removed the base mixin. Since we no longer require prefixes for independent corners, we've dropped those mixins as well. Mixins for a single side, like `.border-left-radius`, are still available.
- [x] **Use decimal values in `.opacity()` mixin instead of whole numbers** to match default CSS patterns. 
  - For example, write `.opacity(.5)` instead of `.opacity(50)`.
- [x] **Add retina image mixin.** Declare a standard and 2x image path and set the size for easy retina images anywhere.
- [x] **Add new global `@component-active-bg` variable.**
  - Instead of assigning `@link-color` to multiple variables for backgrounds, we have dedicated a new variable to that.
  - Change `@component-active-bg` and customize the active states of nav pills, dropdowns, and more.

### Miscellaneous
- [x] **Go mobile first.** Responsive CSS is no longer separate and all responsive features are now compiled into the core `bootstrap.css` file near. Separate files are no longer required, and have thus been removed.
- [x] **Upgrade to latest Normalize, and removed reset.less.** 
  - This includes removing reset.less in favor of a dedicated normalize.less file. 
  - Print styles and responsive image CSS (the only meaningful modifications from the previous reset file) have been moved to print.less and scaffolding.less, respectfully.
- [x] **Moved print styles to separate print.less file.**
  - Previously print styles were bundled with the scaffolding.less page.
  - Now within a separate file for easy removal via the Customizer.
- [x] **Remove layouts.less.** 
  - Since it only held a couple layout styles and the fluid container has been removed (see next section), this file is superfluous. 
  - We've moved the default `.container` styles to `grid.less`.
- [x] **Add `!important` to `.hide` and `.show`.** 
  - For these classes to work on every element, the specificity either needed to be higher or we needed the `!important` flag. We opted for the latter for fewer lines of code.
- [x] **Drop `*-important` for `.*-danger`.** 
  - Some elements had red variations that came from different class naming schemes, so we standardized that by switching all red variations to `*-danger`. 
  - Includes buttons, labels, badges, text, alerts. and progress bars.
- [ ] Refactor responsive utility classes to match new media queries.
- [ ] Confirm no lingering "TODO" comments in the source code.
  - [ ] Refactor `.dropup` and bottom navbars for a single class?
  - [ ] Double check height of `<select>` elements in IE8
  - [ ] Consider `!important` on float utility classes



## Grid system

The grid is drastically simpler, yet more powerful, in BS3. We're transitions back to a single grid system, but with all the awesomeness that was present in the old grids. On top of that, we've also added some new features.

- [x] **Overhaul grid systems: everything's fluid and mobile first.**
  - Removed the separate fluid grid system, container, and layout as we're down to one grid.
  - New single grid system (still uses `.row`) utilizes percentages over pixels, `padding` instead of `margin`, and `box-sizing: border-box` for easy math.
  - The grid is mobile first, meaning it starts out stacked and scales up as necessary to become horizontal via media queries. Previously the grid was built for 940px layouts and scaled up and down.
  - Nesting is still 100% supported, but columns will be proportionately sized to their parent, just as the old fluid grid behaved.
  - Offsets are still 100% supported.
- [x] **More specific grid classes.**
  - Instead of `.span*` and `.offset*`, we're now using `.col-span-*` and `.col-offset-*`.
- [x] **Simplify required grid variables.**
  - The `@grid-row-width` and `@grid-column-width` variables have been removed. We didn't use the row width (`@gridRowWidth` as of v2.3.1) variable anywhere in the source and column widths are now derived via simple calculations in our LESS.
  - We've added a new `@grid-float-breakpoint` variable to customize the point at which the floats and widths kick in for our new mobile-first grid.
- [x] **New and improved grid mixins.**
  - Changed `.makeRow()` to `.make-row()`.
  - Changed `.makeColumn()` to `.make-column()`. In addition, it includes a media query to apply the `float` and `width` when above the `@grid-float-breakpoint` value.
  - Added `.make-column-offset()` to generate column gaps, similar to the predefined grid classes.
- [x] **Add `.push*` and `.pull*` modifier classes** for easy column source ordering.
- [x] **Remove dedicated table grid classes.**
  - They are no longer necessary given the new grid.
  - However, we are still removing the float on `.col-span-*` classes when used within `.table` elements.
- [x] **Remove dedicated input grid classes.**
  - Remove input grid mixin and input span classes.
  - Given new grid system, inputs are always `width: 100%;` to start.
  - Best practices now are to place 100% wide inputs *within* grid columns as opposed to using classes directly on input elements.
- [x] Use `max-width` instead of `width` on all `.container` instances to help prevent some issues with containers in components like navbars.



## Type

Typography in Bootstrap 3 isn't seeing much change, just a decent amount of cleanup and some small improvements.

- [x] Add support for headings classes (e.g., `h1, .h1 { … }`).
- [x] Remove all `#font` mixins.
  - We only used these in one place and they honestly just complicated things.
  - Instead of using mixins, just make use of the `@font-family-` variables.
- [x] Drop the `@altFontFamily` variable.
- [x] **Changed `.muted` to `.text-muted`** to match the other contextual text colors.
- [x] **Now scaling `font-size` for jumbotron** in responsive views.
- [x] Fixed bug with text alignment utility classes and tables.

We explored the use of rem units over pixels, but found little benefit to offset the implications of their use. IE8 would still need a pixel fallback, and that's a lot of duplicate lines of code. Moreover, using rems everywhere instead of pixels would exacerbate that problem. Mixing rems and pixels doesn't seem to make sense either right now. However, we can and will continue to evaluate this in future releases.



## Tables

- [x] Remove `table.info` from table state classes.
- [x] Added global `text-align: left;` for `<th>` elements (to undo the default center alignment) and removed `font-weight: bold;` from them (bold is a browser default).
- [ ] Consider narrowing scope of table classes for better nesting support.



## Images

- [x] **Consolidate image thumbnail styles.** No more `.img-polaroid` as it duplicated the same styles as `.thumbnail`. Now you can use `.img-thumbnail` for regular inline(-block) images, or `.thumbnail` for composite components.



## Buttons

Fewer, but better buttons. They're redesigned and we're removing some from the mix because they have no clear and universal semantic purpose.

- [x] **Drop `.btn-inverse`** as there *really* is no semantic reasoning for adding it.
- [x] Revamp some of the aesthetics of the buttons (no more outer box-shadow) by default.
- [x] **Simplify button mixins and pseudo states.**
  - Removed the `.buttonBackground()` mixin since it was no longer in use.
  - Added the `.btn-pseudo-states()` mixin for setting button `background-color` and `border-color` for the default and `:hover`, `:focus`, `:active`, and various `disabled` states.
- [x] **Add justified button group option for link buttons.** This feature is only available for buttons with link tags, e.g. `<a href="#" class="btn">Button</a>`, and is not compatible with the `<button>` element due to some browser lame-itude that keeps buttons from accepting auto widths on `table-cell` buttons.

We know folks have used `.btn-inverse`, but there is honestly no reason for it to be part of the core repo as it serves very little purpose other than "to be different." Including something for that reason isn't what we want to reinforce moving forward, so it's been nuked.

We had previously removed `.btn-info` for a couple weeks, but it has since been fully restored.



## Forms

Form controls are now 100% width by default, input groups have been overhauled, and form states simplified.

- [x] **Update box model for inputs.** 
  - Switched to `box-sizing: border-box;` and `width: 100%;` by default for all textual inputs.
  - This means you'll need to specify a size for inputs, whereas before 3.0 inputs had a set pixel width (around 220px) to start.
- [x] **Remove `input-prepend` and `input-append` for singular `.input-group`.** The classes have changed for the elements within, and require a bit more markup to use buttons.
  - Use `.input-group` as the parent class around the input and addon.
  - For text based prepends/appends, use `.input-group-addon`  instead of `.addon`.
  - For button prepends/appends, use `.input-group-btn` and place your `.btn` **within** that element.
- [x] **Drop `.form-search`.**
- [x] **Add support for `fieldset[disabled]`.** All form controls within a `<fieldset>` with the `disabled` attribute will be styled appropriately.
- [x] **Drop `.controls-row` for grid inputs.** 
  - Given input elements in 3.0 are set to `width: 100%` by default, and since we don't want to implement a separate input grid, we've opted to drop the `.controls-row` functionality.
  - Instead, folks should wrap inputs in standard grid markup: with a wrapping `.row` and individual `.span*` columns around each input.
- [x] **Drop `.input-block-level` mixin and class.** 
  - Since inputs are already `width: 100%;`, this is redundant. 
  - **Note:** inputs are still `display: inline-block`, so if you absolutely need them to be block level, you'll need to independently set that yourself.
- [x] **Drop the `.uneditable-input` control.** Instead, use a read-only input if you must.
- [x] **Horizontal forms are now mobile-first**, meaning at <768px, elements are stacked. Above that, elements are floated and appear side-by-side.
- [x] **Checkboxes and radios now require an extra `<div>`.** 
  - Instead of `label.checkbox`, you'll need `div.checkbox` with a `<label>` within. 
  - This was done to tighten up the clickable area around labels and avoid potential misclicks.
- [x] **New classes for inline radios and checkboxes.** 
  - Instead of `.radio.inline`, you now need a single class, `.radio-inline`, for direct use on a `<label>` element. 
  - To be clear, inline radios and checkboxes do not need a wrapping `<div>`, but the default stacked ones do.
- [x] Added new placeholder syntax to the `.placeholder()` mixin for Firefox 19+.
- [ ] Allow form field states to apply to individual inputs.
- [ ] Separate single button dropdowns from segmented button dropdowns with unique classes.
- [ ] Still need to make button groups work within the new input groups (got some border-radius issues right now).
- [ ] Refactor `.help-inline` and `.help-block` for better support.
- [ ] Figure out form control margins in a better way. Right now we do a lot of overriding and perhaps form controls should have no margin to start.



## Icons

- [x] **Font icons!** Converted to Glyphicons v1.7 @font-face, dropping the old PNGs.
- [x] **New required base class.** 
  - Instead of using an attribute selector, like `[class^="glyphicon-"]`, we now require a base class, `.glyphicon`.
  - This improves general performance for larger pages while also increasing the durability of our code (as it doesn't enforce a specific order of classes). 
  - This is in addition to the prefix class (which has also been udpated).
- [x] **Updated class prefix** for all icons: `.glyphicon-` instead of `.icon-`. 
  - We changed this for a more unique class, but also for consistency with the newly required base class as noted above.



## Responsive utilities

- [ ] Refactor responsive-utilities.less to account for new mobile-first approach.
- [ ] Update the docs to reflect the changes in media queries used.



## Button groups

- [ ] Refactor to allow dropdowns within button groups.
- [ ] Separate classes for regular button dropdown and segmented button dropdown. 
- [ ] Update checkbox and radio variations to use actual checkbox and radio markup.



## Labels and badges

We have differentiated the labels and badges with v3. The gist is that badges no longer have modifier classes and are purely meant as unread counters.

- [x] Dropped all modifier variations on badges, making it as neutral as possible, much like those of Mail.app on OS X.
- [x] Dropped the `.label-inverse` variation (in conjunction with the inverse button being removed).
- [x] Refactor labels to scale with their parent's `font-size`.



## Jumbotron (formly hero unit)

- [x] **Class changed** from `.hero-unit` to `.jumbotron`. Associated variables have also been updated to match.
- [x] **Lighter `font-weight` for headings**. Uses semibold instead of bold for headings.
- [x] Now full-width without rounded corners to in mobile viewports.
- [x] Improved type styles—now it starts with normal heading sizes and scales to larger sizes given a larger viewport.



## Breadcrumbs

- [x] Remove the trailing `/` from the last item.



## Navigation

#### Navs
- [x] **Remove `.nav-list` option**. Replaced by the new `.list-group` component.
- [x] **Remove tabs on left, right, and bottom.** 
  - Tabs on the left and right, while occasionally useful, have been removed from our CSS.
  - You can still use the JavaScript plugin and custom CSS to make left/right tabs, but we will no longer include those in the core.
- [x] **Removed parent `<div>` in the pagination component** and **dropped center and right alignment options**. See #6562 for context.

#### Navbars
- [x] **Drop support for `.navbar-search`.** We dropped the `.navbar-search` form layout, so it doesn't make sense to have this anymore. Also, this is just a *slightly* fancier `.navbar-form`, which we plan on keeping.
- [x] **Overhaul styles of default navbar** and its sub-components:
  - Dropdown menu carets (those attached to the actual menu, not the indicators) have been removed so that dropdown menus sit flat against the edge of the navbar.
  - Navbar vertical dividers have been brought in a smidge, meaning they do not extend the full height of the navbar.
  - No more box-shadow or gradients on the navbars.
  - Height of navbar has increased from 44px to 62px for mobile devices, and 50px for desktops.
- [x] **Removed `.navbar-inner`** and moved relevant styles to `.navbar`. The inner div is no longer required, greatly simplifying our shit.
- [x] **Change `.btn-navbar` to `.navbar-toggle`.**
  - More consistent naming schema
  - Redesigned it a bit, lightening the styles and widening it, while also positioning it absolutely to the top right.
- [x] **Updated navbar brand component:**
  - Changed `.brand` to `.navbar-brand` for a more consistent naming schema.
  - Center aligned `.navbar-brand` in mobile views, with a `max-width: 200px;` to limit hit area given a likely navbar toggle will be very near by.
- [x] **Refactor navbar dividers** to use `.nav-divider()` mixin to start.
  - Dividers will now be horizontal to start, then become vertical with the nav above 768px wide viewports.
- [x] **Added support for disabled nav links.**
  - Includes new variables like `@navbar-link-color-disabled` and `@navbar-link-bg-disabled`, along with the inverse options.
- [ ] Update active state of nav links for mobile view.
- [ ] Improve non-nav links support in navbar. To date, we require `.navbar-link` and that's just bullshit.
- [ ] Improve forms and buttons support in navbar. There are lots of overrides, extra styles, and more, and that just sucks ass, too. Let's improve that.



## Progress bars

- [x] **Add variables for background colors.** Instead of hard-coded (and different) green, red, yellow, and blue colors, we use the new (more semantic) global colors.
- [x] **Refactor progress bar classes** for simpler CSS.
  - New structure is now `.progress` on the outer `<div>` and `.progress-bar` on the inner `<div>`.
  - Instead of placing modifier classes on the parent, they are placed directly on the bars (e.g., `.progress-bar-info`) in addition to the required `.progress-bar` class.



## Modals

- [x] **No longer require use of `.hide`.** We updated the utility classes to use `!important` and to avoid clashing, removed the `.hide` class from modals. Now `display: none;` is set directly in the modals.less file. **When upgrading, be sure to remove the `.hide` class from existing modals.**
- [x] **Redesign the modals to be mobile-first.**
  - As BS3 is mobile-first, this new modal also starts at the mobile level and scales up via media queries.
  - Reintroduces `.modal-open` on the body (so we can nuke the scroll there)
  - Adds a couple extra levels of markup (namely `.modal-dialog` and `.modal-content`) so we can scroll the entire modal rather than overflow a section within the modal.
  - Related, `.modal` is now the wrapper, and `.modal-content` is the modal itself. This is so we can still use `position: fixed;`, but make the modal relatively positioned so that scrolling moves the entire modal, not something with it.
  - Added a `.modal-title` for more consistent and useful targeting of the heading content (previously this was just an `<h3>` and selector performance wise that sucked).
- [ ] Explore adding two new sizing options, `.modal-small` and `.modal-large`.
- [ ] **Test on iOS5.** Not sure if we need to go older, but I want to check here to see how well fixed is supported.
- [ ] **Test on Android devices** (including native browser and Chrome). I only have a year-old Nexus lying around, so might need help tracking down bugs on older devices.
- [ ] Explore removing `position: relative;` from `.modal-body` to avoid some tooltip/dropdown/popover issues.
- [ ] Explore option to set width of the modal programmatically (instead of sizing options).
- [ ] Explore alternatives to stacking modals—perhaps a modal back button for piping in new content?
- [ ] Explore full-width modals for mobile with fixed modal headers for easier access to dismiss button.
- [ ] Check on body scrollbar and shifting content with `overflow: hidden;`.



## Thumbnails

- [x] **Drop the `.thumbnails` meta component.** Instead of special HTML and CSS for grid sizing, just use the grid system itself. Individual `.thumbnail` styles are still available, but for sizing, require a parent with a set `width` (e.g., grid columns).


## Alerts

- [x] `<hr>` elements within any `.alert` component will now be styled to match the border color of the alert.
- [x] Immediate children links within default alerts, and within paragraph text, are now styled for improved readability. Links are automatically bolded and appear as a slightly darker color than the alert text.


## New: List groups

Added a new component, the list group, for creating simple and complex series of components. Perfect for more complex implementations like email inboxes, or simple ones like a list of options.

- Requires `.list-group` as a parent base class (on a `<ul>`, `<ol>`, or `<div>`)
- Requires  `.list-group-item` for individual list items
- List items can also be easily linked—just change from `<ul class="list-group">` and `<li class="list-group-item">` to `<div class="list-group">` and `<a class="list-group-item">`.
- Option: include a badge, chevron, or both to any list item for automatic placement.
- Option: use `.list-group-item-heading` and `.list-group-item-text` for custom content implementations.

**Linked list groups replace the nav list component.**

List groups can also be used within panels with the `.list-group-flush` class to take them the full width of the parent panel.

![Screen Shot 2013-03-30 at 4 14 18 PM](https://f.cloud.github.com/assets/98681/321097/90304f7e-998f-11e2-83e6-3c4ca4183830.png)
![Screen Shot 2013-03-30 at 4 08 53 PM](https://f.cloud.github.com/assets/98681/321094/0229c9e4-998f-11e2-8b5b-0d580156a3d0.png)


## New: Panels

Added a new component, the panel, for easily containing content within a box with an optional heading. Also included are contextual state classes for success, warning, danger, and info.

![Screen Shot 2013-03-30 at 2 14 02 PM](https://f.cloud.github.com/assets/98681/321015/a0e9352a-9984-11e2-9e34-9f28e55df6a3.png)


## Carousel

![Screen Shot 2013-02-17 at 10 24 30 PM](https://f.cloud.github.com/assets/98681/166249/fe0be8da-7993-11e2-8178-6cbaf37086c8.png)

- [x] **Redesign!** Lighter styles for the previous and next controls, as well as the carousel captions.
- [x] **Update required markup for carousel controls.** The `.carousel-control` class now requires another element within it for the previous/next characters. Those characters are now Glyhpicons icons for improved styling and positioning across browsers and devices.
- [x] **Indicators are now bottom-middle aligned.**
- [x] **Captions are reinforced as optional** and, by default, are hidden on mobile views, then shown for >768px viewports.



## Customizer

- [ ] Redesign the entire thing.
- [ ] Highlight dependencies between components and assets.
- [ ] Figure out how to load and download the same customizations.



## Makefile

Updated and simplified to better reflect the changes to the docs build process (namely Jekyll). It has also be redesigned (in as much as text can be). "Done" messages are also more real-time, showing only after the step has been completed (see #6968).

![makefile-output](https://f.cloud.github.com/assets/98681/174395/b7c564e4-7b0c-11e2-8a48-6ac8d662e169.png)