Bootstrap 3.1.0 released
Today we’re stoked to ship Bootstrap v3.1. We’ve got a handful of new features, plenty of bug fixes and improvements, and updated build tools.
We’ve made tons of changes across the board, most notably to our documentation. Just like v2.1 brought a brand new design, v3.1 overhauls the docs to refocus on the actual documentation rather than the chrome around it. Our new homepage restores the quick run through of key features and showcases some awesome examples from the Expo.
Official Sass port
The best part about v3.1 is that we’re shipping with an official Sass port. A few weeks ago we moved over the most popular port on GitHub and made it official—Bootstrap is now available in Sass. Rather than bloat the main project with support for Less and Sass—and all the documentation for both—we’ve kept them separate for the time being. Prominent links in the docs are included though, so enjoy!
We’ve added three new examples: Blog, Cover, and Dashboard. Each example provides a single page of awesomeness for you to quickly get started on a project built with Bootstrap. They’re responsive and ready to go.
A handful of features that aren’t exactly new to Bootstrap have seen an update in v3.1:
- Modals now include optional sizes
- Dropdowns now have their own alignment classes for easier customization
- Form feedback styles for validation states now include optional icons to reinforce color changes
All-in-all these make components more focused, more durable, and easier to work with. See the changelog included with the GitHub release for the complete list of new features.
Remote modal content
One of the more important improved features is for our modals. If you currently use the modal’s
remote option, be aware this release may break your modals. Yes, this is a breaking change, but it’s first and foremost a bug fix that corrects a rather longstanding and overlooked error. Our apologies for any headaches it may cause, but it’s been missed in the last few patch releases.
See the #11933 pull request for details on the code changes.
We’ve been talking about it for what seems like forever, but thanks to all our contributors and the core team, we’ve finally done it. As of v3.1, Bootstrap ships under the MIT license to allow as many people to utilize Bootstrap as possible. Thanks to all our contributors for helping make it happen.
Improved build tools
We’re constantly trying to improve our tools for developing Bootstrap and v3.1 brings a slew of updates to do just that.
- We’ve switched from Recess to grunt-contrib-less for our compiler, giving us access to Less 1.6.x (as opposed to 1.3.x with Recess).
- Our compiled code is virtually identical in formatting and organization thanks to CSScomb and some other Grunt-fu.
- Tests also run a tad faster with the help of some magical caching and parallelization.
- The web Customizer is now generated from a Grunt task, meaning we’ll never miss updating or adding a variable again. If you contribute to Bootstrap regularly, just run
gruntand commit to update the page.
Heads up! If you develop Bootstrap locally, be sure to nuke your
node_modules/ directory and run
npm install before getting started with v3.1.
Get downloading now, or see the list below for more information on what’s new in this release. Download it from GitHub or snag it from the CDN:
- Three new templates: Blog, Cover, and Dashboard.
- #10884: Add
.infovariant to contextual table classes.
- #11138: Add contextual styles to list groups.
- #11162: Add new sizes,
.modal-sm, to modals for quicker settings on modals. Only applies to modals above the small breakpoint.
- #11193: Add
<kbd>element styles to indicate user input via keyboard.
- #11244: Add
- #11572: Add contextual
background-colorclasses to match our existing text classes. (This also moves both sets of classes to the Helper Classes section of the CSS docs.)
- #11675: Add
.text-justifyclass to round out the text alignment classes.
- #11836: Add new form control feedback classes to toggle icons for each validation state. Works on regular forms, horizontal, and inline.
While we originally wanted v3.1 to include RTL support, we decided to hold back on that for some potentially beneficial unreleased tooling. We’ll share more on that when we know more, but suffice to say it’s been bumped to v3.2.
- #10951: Add
.modalto prevent a focus outline from appearing in Chrome for Windows.
- #11107: Add
@modal-backdrop-opacityvariable for customizable modal backdrop.
- #11266: Apply a pixel-based
line-heightthat matches the
heightto date inputs for iOS 7 for proper vertical alignment of text in the form control.
- #11286: Add
- #11302: Refactor the responsive utility classes to cut a few hundred lines of CSS (more context in #11214).
- #11435: Prevent the double borders between multiple buttons in an input group.
- #11561: Add
.form-controls within input groups to prevent IE9 from screwing up placeholder text and select menu arrows.
- #11588: Scope
.jumbotrons and remove the super-sized
line-heightfrom the base class to avoid interference with sub-components.
- #11676: Add
-webkit-overflow-scrolling: touch;to modals for smooth scrolling on iOS devices.
- #11744: Clean up some incompatible properties in
forms.less: block level inputs no longer receive
vertical-align: middle;unless necessary, e.g. in inline forms.
- #11748: Updated
.scale()mixin so that it accepts optional vertical scale as second parameter.
- #11750: Reverts v3.0.3’s refactor to contextual table classes to ensure they work with striped tables.
- #11757: Darken default navbar toggle bars to meet WCAG criteria.
- #11766: Use
.button-variant()mixin to set
.badges in buttons for proper default button badge styles.
- #11741: Don’t set
@headings-font-familyto the same font stack as the
<body>; instead, just use
inheritfor same default CSS.
- #11786: Nest media queries within print utilities for mixin-friendliness.
- #11790: With upgrade to Less v1.6.0, remove duplicate CSS generated from the nested
.clearfixclass and mixin by switching to
- #11801: Use correct variables for grid containers.
- #11817: Rework input groups to use the
white-space: nowraphack for a more durable component with regards to code formatting and custom font size changes.
- #11829: Add
.make-xs-columnmixins to complement the recently added extra small predefined grid classes.
- #11836: Along with the form validation update, we reset some key form and icon styles:
.form-controls within inline forms are set to
width: auto;to prevent stacking of
- Removes all
select.form-controlsettings since those are now inherited by the above change
- Removes the
width: 1em;from the Glyphicons because it was virtually impossible to override.
- #11841: Breadcrumb padding values now use variables.
- #11859: Restore
@dropdown-caret-colorvariable, but deprecate it.
- #11861: Add
@list-group-active-text-colorvariable for improved customization on active list group items.
- #11868: Cleanup modal
- #11990, #12159: Make range inputs block level and 100% wide by default.
- #12073: Make order of component variations consistent throughout the repo.
- #12164: Fix value of SVG font ID and removed hard coded value.
- #12171: Ensure panel groups have a bottom margin since we nuke it on child panels.
- #12247: Add and use
.text-emphasis-variant()mixin for emphasis classes. Also updated emphasis classes to only apply
:hoverstyles to linked content.
- #12248: Add and use
.bg-variant()mixin to generate background classes.
- #12249: Add and use
@modal-mdLess variable for uniformity.
- #12250: Remove print
margins per upstream H5BP change, thus deferring to browser defaults, or users' custom values should they set them.
- #12286: Only remove appropriate
border-radiusfrom first and last tables or list groups in panels.
- #12353: Scope table border reset in panels to first-child rows.
- #12359: Reset
<fieldset>s so they don’t break responsive tables and behave more like standard block level elements.
- #12406: Upgrade to Normalize v3.
- #12422: Reset height on
- #12424: Given Normalize v3 upgrade, account for change on
<figure>element so that we don’t cause backward compatibility issues.
- #12388: Apply a fixed
.navbar-brandto ensure adding a Glyphicon doesn’t increase it’s height.
<blockquote>to no longer thin text or modify
line-heightfor improved readability.
- #9318, #9459, #10105: Properly place remote content within the
.modal-body(see note above).
- #10044: Check that
hrefid’s are followed by valid characters in dropdowns.
- #10134: Don’t use jQuery
offsetdirectly because it uses sub pixel rendering.
- #10199: Correct
shown.bsevents firing too early in tooltips and popovers.
- #10205: Enable support of arbitrary characters in Scrollspy targets.
- #10236: Properly calculate offset positioning for affix plugin when reloading a scrolled window.
- #10260, #10568, #10740: Properly hide tooltips and popovers if no animation is set.
- #10283: Prevent IE8 from complaining about
- #10327: Correctly reset carousel when the slide event is prevented.
- #10359: Pass
$elementto offset top/bottom calc funcs for better dynamic offsets.
- #10658: Don’t let popover content lose bound events on second
- #10675: Ensure scrollspy target in tab content works properly.
- #10709: Be consistent about type of quotes in our JS—switches double quotes to single quotes throughout.
- #10761: Don’t create new tooltip/popover objects just to destroy them immediately.
- #10798: Modal namespacing.
- #10801: Restore
.inafter collapsing animation finishes in collapse plugin.
- #10834: Only
preventDefaulton click on
[data-toggle="modal"]when the element is a link.
- #10890: Calling
$().button(state)shouldn’t enable a disabled button.
- #10911: Add
loadedevent for use with modal’s
- #10921: Input groups within button toolbars are now supported.
- #11203: Improve scrollspy’s handling of hidden targets.
- #11288: Save vertical scroll position of modal between openings.
- #11362: Update affix and scrollspy on speedy scroll to top of page.
- #11373: Add related target to dropdown events.
- #11379: Fix carousel
this.slidingnot getting reset if
- #11416: Use the transition duration from the CSS for the carousel.
- #11496: Clear tooltip timeout on destroy.
- #11555: Add
- #11720: Add events (affix, affixed, affix-top, etc) to affix plugin.
- #11722: Use document scroll height instead of offset height in affix plugin.
- #11788: Use
blurfor tooltip and popover focus trigger for Firefox and Safari.
- #11825: Add dropdown ARIA roles.
- #12270: Add namespace
.bsalso to the event
- #10370: Deprecated the
.pull-rightmethod for aligning dropdown menus. Includes the following changes:
- Removed an old and unused pair of selectors that didn’t properly target the right-aligned navbar alignment of dropdown menus.
- Deprecates the
.pull-rightalignment in favor of a more specific and unique class name.
.dropdown-menu-rightas the new alignment class. This is then mixin-ed into the
.navbar-right.navbar-navdropdown menus for auto-alignment (keeping the current behavior we have today).
- Adds new ability to override that auto-alignment though with the new
.dropdown-menu-left, which is mixin-ed in the same way to provide the appropriate specificity of an override. This should never need to be used except for within right-aligned
- #11660: Deprecate
blockquotecitation in favor of
- #12398: Deprecate
- #10486: Add note about
- #10505: Document more of our Less variables and mixins (not all, but the commonly used ones).
- #11158: Customizer’s variables are now generated via Grunt task from the
- #11447: Document that modal remote URL is only loaded once.
- #11655: Normalize disabled inputs and buttons in iOS with
- #11723: Mention removal of
.pill-panein the migration guide.
- #11738, #11765: Load minified assets in the docs to improve performance.
- #11742: Add link to French translation in About page (v3.0.3 saw Ukrainian added as well).
- #11760: Remove mailing list links from readme and about pages.
- #11764: Add
metatags to docs for description, keywords, and authors.
- #11770: Move component-animations.less to the utility section of import list to match Customizer
- #11830, #11832: More help for Windows users installing Jekyll with requirement of Python and link to @juthilo’s guide, Run Jekyll on Windows.
- #11876: Enable
- #11977: Concatenate and minify all docs assets.
- #12037: Move docs
.htmlpages and assets into
docs/subfolder to clean up project root directory. Also moves
less/to further clean up project root.
- #12073: Make order of component variations consistent throughout the repo.
- #12244: Move v2.x to v3.x migration docs to a separate page.
- #12311: Expand information on how to handle overflowing content in navbars.
- #12314: Add warning about modal markup placement affecting modal appearance/functionality.
- #12345: Add note about printer viewport weirdness.
- #12380: Add link to unofficial German translation, http://holdirbootstrap.de/.
- Updated browser and device support documentation:
- #11055: add mention of select menu styling on Android stock browsers with included optional fix.
- Update IDs and docs nav to include bookmark links to each section.
- Add callout to navbar docs about fixed position, inputs, and virtual keyboard.
Build system & packaging
- #11739: Lint
- #11780: Don’t ignore
bower.jsonas they’re required for compilation.
- #11790: Switch from Recess to grunt-contrib-less.
grunt-contrib-lessto get the latest version of Less (v1.6.x) since Recess was still quite behind.
- Adds CSScomb to take place of Recess’s CSS linting. Includes custom
.csscomb.jsonin project root with basically the same property order as Recess.
- Fixes duplicate CSS generation from the nested
.clearfixclass and mixin by switching to
&:extend(.mixin all)(also mentioned in changes section).
- Compiled CSS looks only slightly different—yay!
- #11804: Enable CSS source maps in
- #12003: Customizer now compiles
theme.lesswith updated values.
- #12315: Add npm caching based on