Javascript-Bootstrap v4.6.1: Bootstrap The most popular HTML, CSS, and JavaScript framework

icon
Latest Release: v4.6.1

What's changed

  • Replace Sass division with multiplication and custom divide() function by @mdo in https://github.com/twbs/bootstrap/pull/34571
  • Update RFS to v8.1.0 by @XhmikosR in https://github.com/twbs/bootstrap/pull/34571
  • fix(forms): input-group and validation icons by @ffoodd in https://github.com/twbs/bootstrap/pull/32968
  • Fix minor visual bug in Firefox caused by moz-focusring by @kremit in https://github.com/twbs/bootstrap/pull/32821
  • Adjust SAFE_URL_PATTERN regex for use with test method of regexes by @nikonthethird in https://github.com/twbs/bootstrap/pull/33153
  • Add sms in the SAFE_URL_PATTERN for sanitizer by @XhmikosR in https://github.com/twbs/bootstrap/pull/35074
  • Adjust feedback icon position and padding for select.form-control by @mdo in https://github.com/twbs/bootstrap/pull/33206
  • Carousel: use buttons, not links, for prev/next controls by @patrickhlauke in https://github.com/twbs/bootstrap/pull/33165
  • v4: Sass docs for default variables by @mdo in https://github.com/twbs/bootstrap/pull/33392
  • Handle complex expressions in add() & subtract() by @ffoodd in https://github.com/twbs/bootstrap/pull/34047
  • More concise improvements for add() and subtract() by @ffoodd in https://github.com/twbs/bootstrap/pull/34432
  • Remove aria-haspopup from dropdowns by @patrickhlauke in https://github.com/twbs/bootstrap/pull/33624
  • Dropdown: support .dropdown-item wrapped in <li> tags by @cpsievert in https://github.com/twbs/bootstrap/pull/33649
  • Update Node versions in JS tests (drop Node 10, add Node 16), update docs JS assets and add variables for vertical-align in spinners by @XhmikosR in https://github.com/twbs/bootstrap/pull/33807
  • Replace Freenode with Libera IRC server by @midzer https://github.com/twbs/bootstrap/pull/34050
  • Fix repetition in the Navbar docs description by @coliff in https://github.com/twbs/bootstrap/pull/34208
  • Enable 0.x with negative margins in utilities by @k-utsumi in https://github.com/twbs/bootstrap/pull/33593
  • Remove print thead rule by @coliff in https://github.com/twbs/bootstrap/pull/34426
  • Fix prevented show event disabling modals with fade class from being displayed again by @alpadev in https://github.com/twbs/bootstrap/pull/34087
  • Input group validation with custom-file input by @ffoodd in https://github.com/twbs/bootstrap/pull/33239
  • Add eslint-plugin-qunit and tighten JS tests by @XhmikosR in https://github.com/twbs/bootstrap/pull/32270
  • Update our tests to Node 16 and npm 8 by @XhmikosR in https://github.com/twbs/bootstrap/pull/35142
  • Disabled link cleanup by @patrickhlauke in https://github.com/twbs/bootstrap/pull/34924
  • Updated our devDependencies including terser; also enabled two passes for terser by @XhmikosR

Full changelog

https://github.com/twbs/bootstrap/compare/v4.6.0...v4.6.1

Source code(tar.gz)
Source code(zip)
bootstrap-4.6.1-dist.zip(715.79 KB)
bootstrap-4.6.1-examples.zip(284.54 KB)

Bootstrap logo

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.
Explore Bootstrap docs »

Report bug · Request feature · Themes · Blog

Bootstrap 4

Our default branch is for development of our upcoming Bootstrap 5 release. Head to the v4-dev branch to view the readme, documentation, and source code for Bootstrap 4.

Table of contents

Quick start

Several quick start options are available:

Read the Getting started page for information on the framework contents, templates and examples, and more.

Status

Slack Build Status npm version Gem version Meteor Atmosphere Packagist Prerelease NuGet peerDependencies Status devDependency Status Coverage Status CSS gzip size JS gzip size BrowserStack Status Backers on Open Collective Sponsors on Open Collective

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

bootstrap/
└── dist/
    ├── css/
    │   ├── bootstrap-grid.css
    │   ├── bootstrap-grid.css.map
    │   ├── bootstrap-grid.min.css
    │   ├── bootstrap-grid.min.css.map
    │   ├── bootstrap-reboot.css
    │   ├── bootstrap-reboot.css.map
    │   ├── bootstrap-reboot.min.css
    │   ├── bootstrap-reboot.min.css.map
    │   ├── bootstrap-utilities.css
    │   ├── bootstrap-utilities.css.map
    │   ├── bootstrap-utilities.min.css
    │   ├── bootstrap-utilities.min.css.map
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   └── bootstrap.min.css.map
    └── js/
        ├── bootstrap.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.esm.js
        ├── bootstrap.esm.js.map
        ├── bootstrap.esm.min.js
        ├── bootstrap.esm.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map

We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). source maps (bootstrap.*.map) are available for use with certain browsers' developer tools. Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper.

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

Bootstrap's documentation, included in this repo in the root directory, is built with Hugo and publicly hosted on GitHub Pages at https://v5.getbootstrap.com/. The docs may also be run locally.

Documentation search is powered by Algolia's DocSearch. Working on our search? Be sure to set debug: true in site/assets/js/src/search.js file.

Running documentation locally

  1. Run npm install to install the Node.js dependencies, including Hugo (the site builder).
  2. Run npm run test (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
  3. From the root /bootstrap directory, run npm run docs-serve in the command line.
  4. Open http://localhost:9001/ in your browser, and voilà.

Learn more about using Hugo by reading its documentation.

Documentation for previous releases

You can find all our previous releases docs on https://v5.getbootstrap.com/docs/versions/.

Previous releases and their documentation are also available for download.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the Code Guide, maintained by Mark Otto.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Community

Get updates on Bootstrap's development and chat with the project maintainers and community members.

  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Join the official Slack room.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Implementation help may be found at Stack Overflow (tagged bootstrap-4).
  • Developers should use the keyword bootstrap on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we adhere to those rules whenever possible.

See the Releases section of our GitHub project for changelogs for each release version of Bootstrap. Release announcement posts on the official Bootstrap blog contain summaries of the most noteworthy changes made in each release.

Creators

Mark Otto

Jacob Thornton

Thanks

BrowserStack Logo

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

OC sponsor 0 OC sponsor 1 OC sponsor 2 OC sponsor 3 OC sponsor 4 OC sponsor 5 OC sponsor 6 OC sponsor 7 OC sponsor 8 OC sponsor 9

Backers

Thank you to all our backers! ? [Become a backer]

Backers

Copyright and license

Code and documentation copyright 2011–2020 the Bootstrap Authors and Twitter, Inc. Code released under the MIT License. Docs released under Creative Commons.

Comments

  • form-select-plaintext
    form-select-plaintext

    Jan 14, 2022

    Prerequisites

    Proposal

    I'd like to style a select element (or any element, really) such that it has the same padding, margins, flow, etc, but appears as plaintext (meaning no border, no dropdown chevron, etc). Effectively like form-control-plaintext, but for selects.

    Motivation and context

    I have some text in a table, and when its not editable, I want it to look like plain text. When the user clicks the edit button, I want the select dropdown to appear "around" the existing text, without shifting anything else on the page.

    I've tried doing this with some complex calc()s for padding, but I can't seem to get it just right...

    feature 
    Reply
  • Fix `.form-control-plaintext` for select, textarea
    Fix `.form-control-plaintext` for select, textarea

    Jan 15, 2022

    hide select "arrow" (icon at right center) and textarea "resizer" (icon at right bottom)

    Reply
  • Optimize jQueryInterface in collapse.js
    Optimize jQueryInterface in collapse.js

    Jan 15, 2022

    extracts config initialization from cycle

    js v5 
    Reply
  • Collapse.js: Tweak active children selector, to search only `.collapsing` & `.collapse.show`
    Collapse.js: Tweak active children selector, to search only `.collapsing` & `.collapse.show`

    Jan 17, 2022

    Tweak active children selector, to search only .collapsing as for ui reasons, during show/hide, we toggle .collapse class too

    Explanation: Seems like that in order to achieve smooth transitions during toggling, we toggle .collapse class too. So the activeChildren selection fails to include transitioning instances, between quick switching

    closes #35685

    js v5 
    Reply
  • Docs - Remove duplicate Octicons entry in icons list
    Docs - Remove duplicate Octicons entry in icons list

    Jan 18, 2022

    Removed duplicate Octicons entry in icons list and updated Octicons website

    Reply
  • Docs: replace CSS by utilities in examples
    Docs: replace CSS by utilities in examples

    Jan 19, 2022

    Description

    :warning: This PR is a WIP.

    • 890506513fe02c1d10b5dfddc0fba61fcad36008: Drop .opacity-50 and .opacity-75 definition since those utilities already exist
    • 146c5963546e6181a2bc5b09c84c1e5560282091: Remove unused .card-img-right.
    • b3421e152c4daf57b985064fe6ed6378838ee64d: Use .lh-1 and .lh-sm when possible.
    • 1ece9c4c3300d6a5d926ccdcc8e600962b4b1c3a: Move .rounded-4, .rounded-5 and .rounded-6 rules directly within site/layouts/_default/examples.html so that several examples can use those extended rounded utilities. Remove border-radius definitions when possible in CSS files and replace them by .rounded-*.

    Checklist

    • [ ] blog.css / blog.rtl.css
    • [ ] carousel.css / carousel.rtl.css
    • [ ] cheatsheet.css / cheatsheet.rtl.css
    • [ ] form-validation.css
    • [ ] cover.css
    • [ ] dashboard.css / dashboard.rtl.css
    • [ ] dropdowns.css
    • [ ] features.css
    • [ ] grid.css
    • [ ] headers.css
    • [x] heroes.css
    • [ ] list-groups.css
    • [ ] modals.css
    • [x] navbar-top-fixed.css
    • [x] navbar-top.css
    • [x] navbar.css
    • [ ] offcanvas.css
    • [x] pricing.css
    • [ ] product.css
    • [ ] sidebars.css
    • [ ] signin.css
    • [ ] starter-template.css
    • [x] sticky-footer.css
    • [x] sticky-footer-navbar.css

    Motivation & Context

    Following this comment, this change will reduce the amount of specific CSS used by Bootstrap examples.

    Types of changes

    • Refactoring (non-breaking change)

    Checklist

    • [x] I have read the contributing guidelines
    • [x] My code follows the code style of the project (using npm run lint)

    Related issues

    Live previews

    For non-regression testing:

    • TODO
    Reply
  • Multiple Select layout does not show current selections
    Multiple Select layout does not show current selections

    Jan 19, 2022

    Prerequisites

    Describe the issue

    Multiple Select layout does not show current selections: on the BS documentation and examples page Link

    When clicking on more than one option, only the last one remains blue (Selected):

    click first option: image

    after clicking a second option:

    image

    the first option lost the blue color or the gray color (when it is out of focus).

    In the multiple selection version, you cannot visually determine which of the 4 options have been selected because the previous one always loses the color that highlights the selection!

    Reduced test cases

    tested in bootstrap doc site Link.

    What operating system(s) are you seeing the problem on?

    Windows

    What browser(s) are you seeing the problem on?

    Chrome

    What version of Bootstrap are you using?

    5.1.X

    Reply
  • feat#35412: Added possibility to make accordion card disabled
    feat#35412: Added possibility to make accordion card disabled

    Jan 20, 2022

    This is a response to https://github.com/twbs/bootstrap/issues/35412. It introduces the .disabled class on .accordion > .card to make it not clickable until the class has been removed.

    Reply
  • Fix spelling mistake in footer example
    Fix spelling mistake in footer example

    Jan 21, 2022

    null

                                                                                                                                                                                                           
    Reply
  • Provide a general summary of the issue
    Provide a general summary of the issue

    Jan 22, 2022

    Prerequisites

    Describe the issue

    Hi,

    I'm using Symfony with WebpackEncore, and when i'm using MODALS with bootstrap, with the last update 5.1.3 of Bootstrap (installed with npm install bootstrap) i have a issue with modal :

    bootstrap.esm.js:3131 Uncaught TypeError: Cannot read properties of null (reading 'hide')
        at HTMLButtonElement.<anonymous> (bootstrap.esm.js:3131:1)
        at HTMLDocument.handler (bootstrap.esm.js:387:1)
    

    I tried to revert the version to 5.1.0 and this worked back. What happen with the 5.1.3 ? Something changed ?

    My js file is compiled with webpack.

    const $ = require('jquery');
    require('bootstrap');
    
    // any CSS you import will output into a single css file (app.css in this case)
    import './styles/app.scss';
    
    // start the Stimulus application
    import './bootstrap';
    

    Thanks for your help

    Reduced test cases

    See describe the issue

    What operating system(s) are you seeing the problem on?

    Linux

    What browser(s) are you seeing the problem on?

    Chrome, Safari, Microsoft Edge

    What version of Bootstrap are you using?

    5.1.3

    Reply
  • Open modal is shifting body content to the left
    Open modal is shifting body content to the left

    Aug 19, 2013

    When launching the modal component (http://getbootstrap.com/javascript/#modals) the entire content will slightly move to the left on mac OS (haven't tried it on windows yet). With the active modal the scrollbar seem to disappear, while the content width still changes.

    You can observer the problem on the bootstrap page

    js css confirmed 
    Reply
  • Create ON/OFF Switch
    Create ON/OFF Switch

    Feb 12, 2012

    Not sure if anyone has mentioned this or not, but it would be cool to have something like this:

    http://papermashup.com/demos/ajax-switch/

    feature 
    Reply
  • Grid breakpoint for 480px
    Grid breakpoint for 480px

    Aug 26, 2013

    The smallest grid column supported at the moment is .col-xs- (<768px), which seems like a big range.

    Would it be advisable to have: .col-xs- (>480px and <768px) .col-tn- (<480px)

    Reason being it still seems reasonable to have a 2 column grid on 768px (240px - 384px per column), while 480px have a stacked column.

    Using the current .col-xs- (<768px) option, putting one stacked column on 768px seems too wide on some cases, and 2 columns on 480px seems ridiculous at times.

    feature css 
    Reply
  • Expand the Sizing Utility to allow for responsive breakpoints like
    Expand the Sizing Utility to allow for responsive breakpoints like "w-xl-50" (css, feature, v4)

    Feb 8, 2017

    Currently, the Sizing utility (https://getbootstrap.com/docs/4.1/utilities/sizing/) only allows for the sizing of the height or width of an element without regard to the viewport size.

    So for instance the "w-50" class makes a lot of sense on a large device in order to limit the width of, for instance, a help text, but not so much on a small device.

    This could be resolved by adding breakpoints to the utility in the same way as it is done for the Spacing utility:

    • w-lg-25 (width: 25% only on large+ devices)
    • w-md-50 (width: 50% only on large+ devices)
    • w-sm-75 (...)
    • w-100 (would be like w-xs-100)

    This enhancement would not change existing usage, but would allow more flexibility for various device sizes.

    Summary: Add support for the following classes:

    w-sm-100, w-sm-75, w-sm-50 and w-sm-25 w-md-100, w-md-75, w-md-50 and w-md-25 w-lg-100, w-lg-75, w-lg-50 and w-lg-25 w-xl-100, w-xl-75, w-xl-50 and w-xl-25 h-sm-100, h-sm-75, h-sm-50 and h-sm-25 h-md-100, h-md-75, h-md-50 and h-md-25 h-lg-100, h-lg-75, h-lg-50 and h-lg-25 h-xl-100, h-xl-75, h-xl-50 and h-xl-25

    feature css v4 
    Reply
  • Icons as font instead of img
    Icons as font instead of img

    Jan 11, 2012

    Hi

    Any reason you opted to include image based icons in bootstrap which are limited to the 16px dimensions?

    For example http://somerandomdude.com/work/iconic/ is available as open source fonts - means you can include icons in headers, buttons of various size etc since its vector based.

    Could easily be implemented with the same approach as the current icons:

    i.foobar:before { content: "X" }

    feature 
    Reply
  • Button dropdown links don't work on mobile (android, iOS)
    Button dropdown links don't work on mobile (android, iOS)

    Aug 22, 2012

    I have simple dropdown buttons we built with 2.04

    links are A tags, proper quotes, href='#'

    Used to work fine.

    Upgraded today to 2.1 and the links in any dropdown button don't work. The dropdown menu opens, but clicking on a link closes the menu without any action. tested on Android 2.3 and iOS 5

    Rolledback to 2.04 and everything works again. Anyone else has this issue?

    js 
    Reply
  • Migrate to MIT License
    Migrate to MIT License

    Feb 17, 2012

    I'm wanting to include Bootstrap in a Drupal distribution that I'm working on. Because I'm using the Drupal.org packaging system, I cannot include Bootstrap because the APLv2 is not compatible with GPLv2 (which is what all code on Drupal.org must be licensed as, per our license policy: http://drupal.org/licensing/faq#q4)

    I was wondering if you'd be willing to either release Bootstrap under another license (in parallel to the Apache license) that would be compatible with our packaging system, or license Bootstrap specifically to Drupal.org contributors under a compatible license.

    meta 
    Reply
  • Sticky footer
    Sticky footer

    Sep 25, 2011

    It'd be good if Bootstrap supported sticky footers (floats to bottom of page for pages shorter than the browser window).

    docs 
    Reply
  • bootstrap-dropdown.js clearMenus() needs ; at the end
    bootstrap-dropdown.js clearMenus() needs ; at the end

    Apr 13, 2012

    bootstrap-dropdown.js when minified with JSMin::minify produces error in Firefox error console saying clearMenus()needs ;

    on line:

      clearMenus()
      !isActive && $parent.toggleClass('open')
    

    if in source code this is corrected -- no error in minified version

    js 
    Reply
  • WIP: Bootstrap 3
    WIP: Bootstrap 3

    Dec 19, 2012

    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 and repo

    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.

    Repository

    • [x] Add new dist folder.
      • Includes two subfolders, css and js, each containing a regular and minified version of Bootstrap's CSS and JavaScript.
    • [x] Separate dependencies from compiled Bootstrap files with new assets folder.
      • All files within assets are documentation assets or third party dependencies.
    • [x] Switch from Makefile to Grunt.
      • Grunt is JavaScript-based
      • Helps folks who want to run and compile Bootstrap locally on Windows
      • Replaces all existing make commands with grunt commands (all the same functionality, just a different tool)

    General docs changes

    • [x] Convert docs to Jekyll.
      • Instead of Mustache, docs templates are built with Jekyll.
      • 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.
      • New repo structure
    • [x] Host previous versions of documentation.
      • Instead of having folks download release tags, we'll go back and add the docs for the most recent version (2.3.2) to the site. They'll be available at http://getbootstrap.com/2.3.2/ once v3 goes live.
    • [x] Move examples to separate repo.
      • Fitting with our theme of focus and simplicity in the repo, we're moving all the example templates out into their own repository at twbs/bootstrap-examples.
      • This keeps the examples as static files without a Jekyll server in the way, so more folks have easy access to them.
      • It also removes a ton of static files (the example screenshots) from the repo and that's a huge win.
    • [x] Add "Customizing Bootstrap" section to detail best practices for customizing CSS.
    • [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.

    Homepage

    • [x] Point link to the new Bootstrap Expo.
    • [x] Remove examples and basically all marketing content from homepage.

    Getting started

    • [x] Add Bower installation instructions to guide.
    • [x] Add new Customization best practices section.

    Global JavaScript

    • [x] Overhaul CSS transitions and reinforce with JavaScript transitions as necessary.
    • [x] Improve noConflict throughout plugins.
    • [x] Namespace events to reduce conflict issues.
    • [x] Drop bootstrap-typeahead.js.
      • For context, see #7805 & https://github.com/twitter/bootstrap/commit/88dd9de9bad56b30a12466477a810c78648200c9.
      • Instead, use Twitter's typeahead.js plugin.

    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] Refactor most components to be more mixin-friendly.
      • Instead of all component classes being a hodgepodge of un-nested CSS, we'll re-order the code to make it super easy to take any Bootstrap class and use it as a mixin.
      • Not all components have been rewritten this way, but those that make sense to rename have.
    • [x] Rename variables to use dashes instead of camelCase. For example, it's now @body-bg instead of @bodyBackground.
    • [x] More consistent variable naming scheme.
      • The format of variables was all over the place and has now been standardized.
      • The general approach is element, state, pseudo state. For example, @navbar-link-color-hover.
    • [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, 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 with .img-retina().
    • [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.
    • [x] Update gradient mixins for better color stop support.
      • Vertical and horizontal gradients now accept four values, in the following order: @start-color, @start-percent, @end-color, and @end-percent.
      • Upgrading means specifying all four values in the above order, or specifying variables directly when calling your mixins.
      • To call a gradient but only set two properties, directly assign values to the variables like so: #gradient > .vertical(@start-color: red; @end-color: blue);. Doing so will include the default values for any unmentioned variables.
    • [x] Drop unused prefixes from several mixins.
      • See https://github.com/twitter/bootstrap/pull/8380 for more information.

    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.
    • [x] Refactor responsive utility classes to match new media queries.

    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 to make it 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] Increase specificity of grid classes.
      • Instead of .span* and .offset*, we're now using .col-* and .col-offset-*, respectively.
    • [x] Add tiny and small grid systems for phones and tablets.
      • Similar to the default grid system, we've added two more sets of grid classes to create more complex layouts for phones and tablets. That means you can optionally utilize 12 columns at two additional important breakpoints.
      • Use .col-* classes for tiny devices (smartphones).
      • Use .col-sm-* classes for small devices (tablets).
      • The small grid classes also include support for offsets and source ordering, but the tiny grid classes do not.
    • [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 .col-push-* and .col-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-* 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.

    Headings

    • [x] Add support for headings classes (e.g., h1, .h1 { … }).
    • [x] Remove text-rendering: optimizeLegibility from headings to prevent (inconsistent) broken rendering on some Android and Windows devices.

    Lists

    • [x] Change ul.unstyled to .list-unstyled.
      • No longer dependent on HTML element in the selector.
      • Can now be used as mixin.
    • [x] Change ul.inline to .list-inline.
      • Uses .list-unstyled as a mixin to reset default list styles.
      • Can now be used as a mixin.

    Text classes

    • [x] Changed .muted to .text-muted to match the other contextual text colors.
    • [x] Fixed bug with text alignment utility classes and tables.

    LESS

    • [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.

    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] Add support for responsive utility classes on table elements.
    • [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).
    • [x] Improve nesting by scoping all styles to immediate children.
      • Using the > selector, we scope all styles.
      • Doesn't change much, but does mean you'll need to apply the table classes to all nested tables.

    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] Default button now requires .btn-default class.
      • The default gray button requires two classes—class="btn btn-default".
      • This better matches all our other buttons as well.
      • We tried to remove the .btn class as well, but given the CSS for creating button groups and dropdowns, it's much simpler to keep it around.
      • While it does add an extra class, it's specificity great simplifies customization methods in plain CSS, and even more so when extending those classes with LESS mixins.
    • [x] Drop .btn-inverse.
      • There really is no semantic reasoning for having it, so it's gone.
    • [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.

    Tables

    • [x] Add .active contextual class.
      • Applies the table hover background-color to any row or cell that gets the .active class.
    • [x] Allow contextual classes to be applied to <thead> and <tfoot> cells.

    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 cursor: pointer; from labels and instead only set them on checkbox and radio label options.
    • [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] Drop .inline-help option.
    • [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+.
    • [x] Drop .help-inline.
      • Given the 100% wide inputs and focus on mobile, inline help text makes much less sense.
      • Block help text via .help-block remains.

    Icons

    • [x] Convert to Glyphicons font and move to separate repository.
      • Convert to Glyphicons v1.7 @font-face and drop the old PNGs.
    • [x] Change required base class and prefix.
      • 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).
      • All classes start with .glyphicon- instead of .icon- for a more unique class and consistency with the newly required base class.

    Responsive utilities

    • [x] Refactor responsive-utilities.less to use new mobile-first approach.
    • [x] Update the docs to reflect the changes in media queries used.

    Button groups

    • [x] Add support for dropdowns in button groups (or, nested button groups).
    • [x] Update checkbox and radio variations to use form controls.
      • Checkbox and radio button groups now use <input>s in their 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] Scale font-size in responsive views.
    • [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] Changed .navbar > .nav to .navbar-nav.
    • [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] Dropped navbar dividers.
    • [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.

    Dropdowns

    • [x] Remove submenus suport in dropdown menus.
    • [x] Removed .nav-header and replaced with .dropdown-header on account of no more .nav-list and that dropdowns still benefit from section headings.

    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).
    • [ ] 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.
    • [ ] Add option to programmatically set width of the modal.
    • [ ] Prevent <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.

    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.

    Tooltips

    • [x] Bump font-size from 11px to 12px.

    Carousel

    • [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

    • [x] Redesign the entire thing.
    • [ ] Highlight dependencies between components and assets.
    • [ ] Figure out how to load and download the same customizations.
    Reply