Bootstrap 5.3.1Jul 26, 2023
diff --git a/feed.xml b/feed.xml
index 8a2646444..4fbb61e5c 100644
--- a/feed.xml
+++ b/feed.xml
@@ -32,6 +32,31 @@
+
+ Bootstrap Icons v1.11.0
+ https://blog.getbootstrap.com/2023/09/12/bootstrap-icons-1-11-0/
+ Tue, 12 Sep 2023 00:01:00 +0000
+
+ https://blog.getbootstrap.com/2023/09/12/bootstrap-icons-1-11-0/
+ <p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.11.0</a> has arrived with 100 new icons—including new floppy disk icons, additional brand icons, new person icons, new emojis, some birthday cake, a few new science icons, and more. We’re now at <strong>over 2,000 icons</strong>!</p>
+<h2 id="100-new-icons">100 new icons</h2>
+<p>Here’s a quick look at all the new icons in v1.11.0:</p>
+<p><img src="https://blog.getbootstrap.com/assets/img/2023/09/icons-1-11-0.png" class="d-block img-fluid mb-2 rounded border" alt="New icons in v1.11.0" loading="lazy" width="1920" height="648">
+</p>
+<p><a href="https://github.com/twbs/icons/pull/1792">Check out the pull request</a> for all the details on which icons were added and which were updated.</p>
+<p>I’ve also started adding a new <code>added</code> tag to icon pages with this release. So far I’ve only tagged v1.10.0 and v1.11.0 versions, but more will come. Once those are all tagged, you’ll be able to search for icons added in each release. Stay tuned!</p>
+<p><em>Looking for more new icons? Head to the <a href="https://github.com/twbs/icons/issues">issue tracker</a> to check for open requests or submit a new one.</em></p>
+<h2 id="install">Install</h2>
+<p>To get started, install or update via npm:</p>
+<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons
+</span></span></code></pre></div><p>Or Composer:</p>
+<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons
+</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.11.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.9.0/bootstrap-icons-1.11.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p>
+<h2 id="figma">Figma</h2>
+<p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p>
+
+
+
Bootstrap 5.3.1
https://blog.getbootstrap.com/2023/07/26/bootstrap-5-3-1/
@@ -742,106 +767,6 @@
</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.2.2">Read the GitHub v5.2.2 changelog</a> for a complete list of changes in this release.</p>
<h2 id="support-the-team">Support the team</h2>
<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p>
-
-
-
-
- Bootstrap 5.2.1
- https://blog.getbootstrap.com/2022/09/07/bootstrap-5-2-1/
- Wed, 07 Sep 2022 16:00:00 +0000
-
- https://blog.getbootstrap.com/2022/09/07/bootstrap-5-2-1/
- <p>Bootstrap v5.2.1 is here with fixes from our latest minor release, v5.2. As a patch release, these changes are limited to bug fixes, documentation updates, and some dependency updates.</p>
-<p>We’ve also continued to iterate on a few other projects to help folks get up and running with Bootstrap with npm, other JS frameworks, and various build tools. Keep reading to learn more.</p>
-<h2 id="key-changes">Key changes</h2>
-<p>We’ve <strong>updated our <code>calc()</code> functions</strong> to work around an <a href="https://github.com/shellscape/postcss-values-parser/issues/138">apparent bug in <code>postcss-values-parser</code></a> that prevented our source Sass files from compiling properly when building with React and PostCSS. The fix was to reverse the order of our multiplication inside <code>calc()</code> functions. Be aware you may need to make similar <a href="https://github.com/twbs/bootstrap/pull/37079">modifications</a> depending on your own customizations.</p>
-<p>We’ve also <a href="https://github.com/twbs/bootstrap/pull/37026">addressed some longstanding issues around button focus and active styling</a>, in particular for checkbox and radio buttons. On mobile devices, input-based buttons have trouble shedding their focus styles. This has been resolved in v5.2.1 with a change from <code>:focus</code> to <code>:focus-visible</code> for our <code>.btn</code>s. <strong>Now, checkbox and radio buttons no longer change their <code>background-color</code> on <code>:focus-visible</code> and they receive no <code>:hover</code> styling.</strong> Regular <code>.btn</code>s still have their familiar hover and focus styles.</p>
-<p>We debated not including the button focus change in v5.2.1, but felt it was important enough to close several bugs. Let us know what you think and we’ll continue to refine our implementation.</p>
-<h2 id="highlights">Highlights</h2>
-<p>In addition to the changes above, we’ve fixed bugs across several components:</p>
-<ul>
-<li><strong>Accordion</strong>
-<ul>
-<li>Update <code>color</code> value to use the <code>$accordion-button-color</code> Sass variable instead of our color contrast function</li>
-</ul>
-</li>
-<li><strong>Buttons</strong>
-<ul>
-<li>Added a <code>transparent</code> default hover border color CSS variable for buttons to fix a visual regression</li>
-<li><code>.btn-link</code> no longer has a gradient when <code>$enable-gradients</code> is set to <code>true</code></li>
-</ul>
-</li>
-<li><strong>Forms</strong>
-<ul>
-<li>Input groups have updated <code>z-index</code> values to ensure proper rendering of validated form fields</li>
-<li>Floating labels now reset their <code>text-align</code> to ensure consistent styling</li>
-</ul>
-</li>
-<li><strong>List Groups</strong>
-<ul>
-<li>Horizontal list groups with only one child now render the correct <code>border-radius</code></li>
-<li>Modified the <code>list-group-item</code> selectors to better support nested imports of Bootstrap’s CSS</li>
-</ul>
-</li>
-<li><strong>Modals</strong>
-<ul>
-<li>Updated event listeners to ignore clicks on scrollbar clicks, clicks that start inside <code>.modal-dialog</code> but end outside it, and respond to clicks that start and end outside <code>.modal-dialog</code></li>
-</ul>
-</li>
-<li><strong>Pagination</strong>
-<ul>
-<li>Fixed incorrect <code>border-radius</code> values inside pagination components</li>
-</ul>
-</li>
-<li><strong>Scrollspy</strong>
-<ul>
-<li>Scrollspy threshold option is now configurable</li>
-</ul>
-</li>
-<li><strong>Tooltips & Popovers</strong>
-<ul>
-<li>Reverted some tooltip plugin updates to prevent issues with <code>selector</code>, dynamic content, and disposed tooltips using <code>title</code></li>
-<li>Fixed <code>trigger: "manual"</code> showing and immediately hiding when calling <code>toggle()</code></li>
-</ul>
-</li>
-</ul>
-<h2 id="dependencies">Dependencies</h2>
-<ul>
-<li>Updated Autoprefixer to fix warnings of the <code>color-adjust</code> property (thanks to <a href="https://github.com/julien-deramond/">@julien-deramond</a> on our team for reporting an issue upstream here)</li>
-</ul>
-<h2 id="docs">Docs</h2>
-<ul>
-<li>Searching our docs on mobile has been improved with the search field now always visible on responsive, narrow viewports</li>
-<li>Removed links to and mentions of Slack from across the codebase, as we intend to shutter Slack in favor of GitHub Discussions</li>
-<li>Reintroduced proper <code>outline</code> styles for docs code samples and buttons when <code>:not(:focus-visible)</code></li>
-</ul>
-<h2 id="farewell-slack">Farewell, Slack!</h2>
-<p>As mentioned over a month ago, we made the decision to close down our community Slack channel. Slack isn’t great at managing a large scale community and it’s prohibitively expensive as well for a community the size of ours (the Slack was over 45,000 people!). Instead of using Slack or similar tool, we’re encouraging folks to use our Discussions tab on GitHub.</p>
-<p><strong><a href="https://github.com/twbs/bootstrap/discussions">Explore Bootstrap discussions</a></strong></p>
-<h2 id="examples-repo">Examples repo</h2>
-<p><a href="https://github.com/twbs/examples"><img src="https://blog.getbootstrap.com/assets/img/2022/09/examples.png" class="d-block img-fluid mb-2 rounded border" alt="Examples" loading="lazy" width="2000" height="1000">
-</a></p>
-<p>Make sure to checkout (pun intended!) our latest project, the <a href="https://github.com/twbs/examples">twbs/examples repository</a>! The examples project includes functional demos for all sorts of environments and JS frameworks, with more planned! You can even open every example in StackBlitz and edit them in the browser.</p>
-<ul>
-<li><a href="https://github.com/twbs/examples/tree/main/starter/">Starter</a> – CDN links for our CSS and JS</li>
-<li><a href="https://github.com/twbs/examples/tree/main/sass-js/">Sass & JS</a> — Import Sass, Autoprefixer, Stylelint, and our JS bundle via npm</li>
-<li><a href="https://github.com/twbs/examples/tree/main/sass-js-esm/">Sass & ESM JS</a> — Import Sass, Autoprefixer, and Stylelint via npm, and then load our ESM JS with a shim</li>
-<li><a href="https://github.com/twbs/examples/tree/main/webpack/">Webpack</a> - Import and bundle Sass and JS with Webpack</li>
-<li><a href="https://github.com/twbs/examples/tree/main/parcel/">Parcel</a> - Sass, JS via Parcel</li>
-<li><a href="https://github.com/twbs/examples/tree/main/vite/">Vite</a> - Sass, JS via Vite</li>
-<li><a href="https://github.com/twbs/examples/tree/main/icons-font/">Bootstrap Icons font</a> - Import and compile Sass, Stylelint, PurgeCSS, and our icon font</li>
-</ul>
-<p><strong>Have an idea for a new starter example?</strong> Feel free to open an issue or pull request!</p>
-<h2 id="v4-starter-project">v4 starter project</h2>
-<p><a href="https://github.com/twbs/bootstrap-npm-starter"><img src="https://blog.getbootstrap.com/assets/img/2022/09/bnpm.png" class="d-block img-fluid mb-2 rounded border" alt="npm starter" loading="lazy" width="2000" height="1000">
-</a></p>
-<p>We’ve shipped a v2.0.0 update to the <a href="https://github.com/twbs/bootstrap-npm-starter">twbs/bootstrap-npm-starter project</a>. This release includes Bootstrap v4.6.2, Bootstrap Icons v1.9.1, a new live reload feature for local development, and several dependency updates. This project will remain dedicated to Bootstrap 4 while our <a href="https://github.com/twbs/examples">twbs/examples</a> repo will focus on v5 and future major releases.</p>
-<h2 id="get-the-release">Get the release</h2>
-<p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest.</strong> It’s also been pushed to npm:</p>
-<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@v5.2.1
-</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.2.1">Read the GitHub v5.2.1 changelog</a> for a complete list of changes in this release.</p>
-<h2 id="support-the-team">Support the team</h2>
-<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p>
diff --git a/index.html b/index.html
index 91c5cdcc5..50564230d 100644
--- a/index.html
+++ b/index.html
@@ -279,6 +279,46 @@
+
Bootstrap Icons v1.11.0 has arrived with 100 new icons—including new floppy disk icons, additional brand icons, new person icons, new emojis, some birthday cake, a few new science icons, and more. We’re now at over 2,000 icons!
+
100 new icons
+
Here’s a quick look at all the new icons in v1.11.0:
I’ve also started adding a new added tag to icon pages with this release. So far I’ve only tagged v1.10.0 and v1.11.0 versions, but more will come. Once those are all tagged, you’ll be able to search for icons added in each release. Stay tuned!
+
Looking for more new icons? Head to the issue tracker to check for open requests or submit a new one.
The Figma file is now published to the Figma Community! It’s the same Bootstrap Icons Figma file you’ve seen from previous releases, just a little more accessible to those using the app.
Bootstrap Icons v1.11.0 has arrived with 100 new icons—including new floppy disk icons, additional brand icons, new person icons, new emojis, some birthday cake, a few new science icons, and more. We’re now at over 2,000 icons!
100 new icons
Here’s a quick look at all the new icons in v1.11.0:
Our second alpha release of v5.3.0 has landed with a ton of enhancements and bug fixes for our new color modes! There’s still more to come, but we’ve held off shipping until we ironed out enough issues. Huzzah, we have!
-
This v5.3.0 release is a monumental update for Bootstrap 5. It’s big enough that it could’ve been a v6 on its own, but we wanted to do right by the community and get color modes out the door without the massive major release upgrade. We’re getting super close now, so bear with us as we continue to chip away at this.
Removed several duplicate and unused root CSS variables.
-
-
Color modes
-
-
-
Dark mode colors are now derived from our theme colors (e.g., $primary) in Sass, rather than color-specific tints or shades (e.g., $blue-300). This allows for a more automated dark mode when customizing the default theme colors.
-
-
-
Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border.
-
-
-
Snippet examples are now ready for dark mode with updated markup and reduced custom styles.
-
-
-
Added color-scheme: dark to dark mode CSS to change OS level controls like scrollbars
-
-
-
Form validation border-color and text color states now respond to dark mode, thanks to new Sass and CSS variables.
-
-
-
Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn’t update properly.
-
-
-
Our box-shadows will once again always stay dark instead of inverting to white when in dark mode.
-
-
-
Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes.
-
-
-
Improved docs code syntax colors and more across light and dark modes.
-
-
-
Removed the ability to nest light mode components within dark mode. This was super incomplete unfortunately and just isn’t practical without quadrupling our selectors for every component. Maybe in v6!
-
-
-
Typography
-
-
We no longer set a color for $headings-color-dark or --bs-heading-color for dark mode. To avoid several problems of headings within components appearing the wrong color, we’ve set the Sass variable to null and added a null check like we use on the default light mode.
-
-
Components
-
-
-
Cards now have a color set on them to improve rendering across color modes.
-
-
-
Added a new .nav-underline variant for our navigation with a simpler bottom border under the active nav link. See the docs for an example.
-
-
-
Navs now have new :focus-visible styles that better match our custom button focus styles.
-
-
-
Helpers
-
-
-
Added a new .icon-link helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too.
-
-
-
Added a new focus ring helper for removing the default outline and setting a custom box-shadow focus ring.
-
-
-
Utilities
-
-
-
Renamed Sass and CSS variables ${color}-text to ${color}-text-emphasis to match their associated utilities.
-
-
-
Added new .link-body-emphasis helper alongside our colored links. This creates a colored link using our color mode responsive emphasis color.
-
-
-
Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. Explore the new links utilities.
-
-
-
CSS variable-based border-width utilities have been reverted to set their property directly (as was done before v5.2.0). This avoids inheritance issues across nested elements, including tables.
-
-
-
Added new .border-black utility to match our .text-black and .bg-black utilities.
-
-
-
Deprecated Deprecated the .text-muted utility and $text-muted Sass variable. It’s been replaced by .text-body-secondary and $body-secondary-color.
-
-
-
Docs
-
-
Updated docs page table of contents to use Scrollpy (shoutout to our v3 docs!).
-
Revamped syntax highlighting colors for code snippets across color modes.
-
Improved content and rendering of several docs callouts.
-
Document more color mode features and usage suggestions.
-
Added theme toggling to examples pages.
-
Updated dependencies across the board, including in our guides.
-
-
Known issues
-
While not an exhaustive list, here’s some of the stuff we’re going to be working on before calling this release stable. You can track these and more in the v5.3.0-stable project on GitHub.
-
-
Add new functionality to utilities with mixins and functions.
-
Some components need another pass at enabling full-color mode responsiveness. Bear in mind, some components like buttons won’t get full-color mode adaptivity until v6.
-
Labels in disabled floating forms have incorrect rendering.
-
Docs need to be updated for modifying theme colors across color modes.
-
Examples need another pass for dark mode support, new screenshots, and more.
-
Improve click/tap area for range inputs.
-
-
Up next will be the stable release of v5.3.0. Originally this was planned as a beta, but I think we’re getting close enough to call this final with one more release.
We’re shipping our latest patch release today to fix a handful of bugs in Bootstrap 4. While our focus remains on v5’s second alpha release (coming in the next couple weeks), we want to keep v4 as stable and reliable as possible.
+
Our next couple releases for Bootstrap 4 will continue this trend, focusing on bug fixes, documentation improvements, and (later on) features that help bridge the gap to v5.
#30936: Add role="dialog" in modals via JavaScript
+
#30992: Avoid preventing input event onclick
+
#31155: Clear timeout before showing the toast
+
+
Build
+
+
#30797: Fix release script docs
+
#31011: Updated Babel config
+
#31296: Update to Ruby 2.7 and Bundler 2.x
+
+
Docs
+
+
#30809: Update docs callout for responsive SVG images
+
#30813: Mention Bootstrap Icons in extend/icons.md page
+
#30896: Improve wording on Downloads page
+
#30897: Prevent skip links from overlapping header in docs
+
#30973: Update some nav examples by removing .nav-item from .nav-link to be more consistent
+
#31070: Fix some broken examples and typos
+
#31135: Move color utility callouts to start of page
+
#31234: Clean up docs forms for accessibility
+
#31344: Mention toasts in the components requiring JavaScript page
+
+
Head to the v4.5 docs to see the latest in action. The full release has been published to npm and will soon appear on the BootstrapCDN and Rubygems.
+
Next up
+
We’ll be shipping our second alpha of v5 in the next few weeks. We’ve been a little delayed as we focus on ourselves during these unprecedented times and have all been taking a bit of time off here and there. We’re sorry to keep y’all waiting on v5 and hope you can understand.
+
After v5’s second alpha, we’ll be targeting a final alpha before our first beta, as well as more patches for v4. We’ll also be releasing the Bootstrap Icons soon. So stay tuned for more!
While we continue to work on Bootstrap 5, I’ve been jamming away on the Bootstrap Icons library, continuing to create as many icons as time allows. Today marks the third alpha, and massive update to the project. We’ve officially crossed 500 icons!
-
We’ve cleaned up existing icons, created new permalink pages for each and every icon, and added hundreds of new icons—all in one release.
-
500+ icons!
-
I’ve added 221 new icons in our third alpha, the most ever in an alpha release thus far. And while I was drawing all these new awesome icons, I also cleaned up the existing ones by changing their viewBox size and redrew many to ensure more pixel perfect icons.
-
-
-
Why change the viewBox? In the first two alphas, I was drawing icons on 20x20 artboards in Figma. This seemed like a good idea, but every icon was roughly 16x16, so it ended up being dead space. Now, every icon has been updated to eliminate the 2px inner padding, making the viewBoxs 0 0 16 16 instead of 0 0 20 20.
-
This change has some slight file size improvements, and should help with sizing and positioning as well.
-
Permalink pages
-
Looking for a particular icon, but don’t want to download the entire project to snag the SVG source code? Need to send someone a link to an icon? Look no further than the new icon permalink pages!
-
From the Bootstrap Icons homepage, click any icon and you’ll be taken to a page dedicated to just that icon. It features the icon in various sizes and renders the source code like you’re used to seeing in Bootstrap’s docs.
-
-
-
Since this is still an alpha, some features are still missing from our docs. This includes unlinked tags, no category listing, and no copy to clipboard. I hope to see those added before our stable v1.0.0 release. PRs are very much welcome if you’d like to contribute!
-
Download
-
Alpha 3 has been published to GitHub and npm (package name bootstrap-icons). Get your hands on it from GitHub, by updating to v1.0.0-alpha3, or by snagging the icons from Figma.
While we continue to work on Bootstrap 5, I’ve been jamming away on the Bootstrap Icons library, continuing to create as many icons as time allows. Today marks the third alpha, and massive update to the project. We’ve officially crossed 500 icons!
+
We’ve cleaned up existing icons, created new permalink pages for each and every icon, and added hundreds of new icons—all in one release.
+
500+ icons!
+
I’ve added 221 new icons in our third alpha, the most ever in an alpha release thus far. And while I was drawing all these new awesome icons, I also cleaned up the existing ones by changing their viewBox size and redrew many to ensure more pixel perfect icons.
+
+
+
Why change the viewBox? In the first two alphas, I was drawing icons on 20x20 artboards in Figma. This seemed like a good idea, but every icon was roughly 16x16, so it ended up being dead space. Now, every icon has been updated to eliminate the 2px inner padding, making the viewBoxs 0 0 16 16 instead of 0 0 20 20.
+
This change has some slight file size improvements, and should help with sizing and positioning as well.
+
Permalink pages
+
Looking for a particular icon, but don’t want to download the entire project to snag the SVG source code? Need to send someone a link to an icon? Look no further than the new icon permalink pages!
+
From the Bootstrap Icons homepage, click any icon and you’ll be taken to a page dedicated to just that icon. It features the icon in various sizes and renders the source code like you’re used to seeing in Bootstrap’s docs.
+
+
+
Since this is still an alpha, some features are still missing from our docs. This includes unlinked tags, no category listing, and no copy to clipboard. I hope to see those added before our stable v1.0.0 release. PRs are very much welcome if you’d like to contribute!
+
Download
+
Alpha 3 has been published to GitHub and npm (package name bootstrap-icons). Get your hands on it from GitHub, by updating to v1.0.0-alpha3, or by snagging the icons from Figma.
They’re also open sourced under the MIT license, so you’re free to download, use, and customize as you need. This is an alpha release for now, so bear with us as we get familiar with creating and managing hundreds of SVGs. and more icons will be added over time.
Today we’re formally announcing our Long Term Support plan, a documented approach aimed at strengthening the stability and frequency of releases. As part of this initiative, each major version of Bootstrap will receive at least six months of support after it is retired, followed by six months of critical bug fixes and security updates.
-
Starting today, Bootstrap 3 will move to end of life, and will no longer receive critical security updates.
-
Bootstrap 4 will move to Long Term Support after we release v4.4 and will no longer receive new features from then on. It will continue to receive bug fixes, security updates, and documentation updates.
-
Bootstrap 5 is under active development. You can follow our progress on GitHub.
-
A special thanks to @XhmikosR for his tireless work in pushing us forward.
Today we’re formally announcing our Long Term Support plan, a documented approach aimed at strengthening the stability and frequency of releases. As part of this initiative, each major version of Bootstrap will receive at least six months of support after it is retired, followed by six months of critical bug fixes and security updates.
+
Starting today, Bootstrap 3 will move to end of life, and will no longer receive critical security updates.
+
Bootstrap 4 will move to Long Term Support after we release v4.4 and will no longer receive new features from then on. It will continue to receive bug fixes, security updates, and documentation updates.
+
Bootstrap 5 is under active development. You can follow our progress on GitHub.
+
A special thanks to @XhmikosR for his tireless work in pushing us forward.
Hot on the heels of v4.1.2, we’re shipping another patch release to address an issue with our browserslist config, fix some CSS bugs, make JavaScript plugins UMD ready, and improve form control rendering. Up next will be v4.2, our second minor release where we add some new features.
-
But first, here are the highlights for v4.1.3. Pay attention to the change to .form-controls which adds a new fixed height.
-
-
Fixed: Moved the browserslist config from our package.json to a separate file to avoid unintended inherited browser settings across npm projects.
-
Fixed: Removed the :not(:root) selector from our svg Reboot styles, resolving an issue that caused all inline SVGs ignore vertical-align styles via single class due to higher specificity.
-
Fixed: Buttons in custom file inputs are once again clickable when focused.
-
Improved: Bootstrap’s plugins can now be imported separately in any contexts because they are now UMD ready.
-
Improved:.form-controls now have a fixed height to compensate for differences in computed height across different types. This also fixes some IE alignment issues.
-
Improved: Added Noto Color Emoji to our system font stack for better rendering in Linux OSes.
-
-
Checkout the full v4.1.3 ship list and GitHub project for the full details. Up next is v4.2, so stay tuned for some awesome new features like toasts, dismissible badges, negative margins (responsive grid gutters!), spinners, and more!
-
Head to the v4.1.x docs to see the latest in action. The full release has been published to npm and will soon appear on the Bootstrap CDN and Rubygems.
Hot on the heels of v4.1.2, we’re shipping another patch release to address an issue with our browserslist config, fix some CSS bugs, make JavaScript plugins UMD ready, and improve form control rendering. Up next will be v4.2, our second minor release where we add some new features.
+
But first, here are the highlights for v4.1.3. Pay attention to the change to .form-controls which adds a new fixed height.
+
+
Fixed: Moved the browserslist config from our package.json to a separate file to avoid unintended inherited browser settings across npm projects.
+
Fixed: Removed the :not(:root) selector from our svg Reboot styles, resolving an issue that caused all inline SVGs ignore vertical-align styles via single class due to higher specificity.
+
Fixed: Buttons in custom file inputs are once again clickable when focused.
+
Improved: Bootstrap’s plugins can now be imported separately in any contexts because they are now UMD ready.
+
Improved:.form-controls now have a fixed height to compensate for differences in computed height across different types. This also fixes some IE alignment issues.
+
Improved: Added Noto Color Emoji to our system font stack for better rendering in Linux OSes.
+
+
Checkout the full v4.1.3 ship list and GitHub project for the full details. Up next is v4.2, so stay tuned for some awesome new features like toasts, dismissible badges, negative margins (responsive grid gutters!), spinners, and more!
+
Head to the v4.1.x docs to see the latest in action. The full release has been published to npm and will soon appear on the Bootstrap CDN and Rubygems.
It’s literally taken us years to do it, but Bootstrap 4 has finally arrived! Words cannot begin to describe the elation the entire team and I have for this release, but I’ll do my best. Thank you to everyone, especially to the team, and to everyone who’s contributed code in a pull request or opened an issue. Thank you.
-
Since our last beta, we’ve been hard at work stabilizing a few key pieces of our CSS, polishing our documentation, adding some extra surprises, and planning for our follow-up releases. We still have some kinks to iron out, but nothing’s going to stop us from shipping a stable release.
Want to know more before hitting the docs? Great, let’s dive in!
-
What’s new
-
There are no breaking changes since our last beta, but we have made some key improvements and resolved some tricky bugs.
-
-
-
Print styles and utility classes have been updated. We’ve improved how printed pages are rendered to ensure pages are reasonably sized instead of rendering them as mobile devices. Print display utilities also include a whole slew of new display values to match our standard display utilities.
-
-
-
Additive border utilities have been added (e.g., .border-top) and default to a solid 1px light gray border. Now it’s easier to quickly add all borders or a subset of borders to your components.
-
-
-
Our $spacers and $sizes Sass maps have been updated to allow more customization the same way our color maps work. You can now add, remove, or replace all your key-value pairs consistently across our CSS. Head to our Theming docs for more information and examples.
-
-
-
Added documentation to our Theming docs for using our provided CSS variables for those are living on the edge and don’t want to use Sass.
-
-
-
Added responsive .order-0 and .order-last classes for more control over the flexbox grid.
-
-
-
In addition, we’ve made plenty of improvements to reusing and extending variables and general code cleanup. But, that’s still not everything.
-
New examples
-
Nearly every example has been overhauled for our stable v4 release. We’ve removed a couple outdated examples, added brand new ones, and really overhauled a few others.
You’ve likely already seen our Album example, but it’s been updated for this release to include more content in our photo cards and improved mobile rendering.
-
-
-
Pricing is brand new with this release and is a fully custom page built with our utilities and card components. It’s responsive and easily extended.
-
-
-
Checkout is a brand new, extensive form example featuring all the best parts of our form layouts, validation styles, grid, and more.
-
-
-
Product is also new and is a cheeky riff on Apple-style marketing pages, largely built with only our utility classes. Don’t take it too seriously!
-
-
-
Blog has been rewritten from the ground up. Gone is the two column blue header layout. We’ve built a snarky magazine-style layout with featured posts and responsive navigation.
-
-
-
Dashboard has been overhauled as well to feature a live ChartJS example, includes a refreshed sidebar with Feather icons, and is semi-responsive.
-
-
-
Floating labels is brand new and builds on our sign-in example to provide a CSS-only implementation of the floating input label. This one’s experimental and may see major changes before we bring it to Bootstrap proper.
-
-
-
Finally, Offcanvas has been rewritten from the ground up to show off a navbar-built drawer, horizontal scrolling navigation, and some custom lists built on media object and utilities.
-
-
-
Cover, Carousel, Sign-in, and our framework examples only saw minor updates to improve code quality and fix a few smaller bugs. Overall this was a huge update for our examples and I’m excited to iterate on these and add more in future releases.
-
Documenting our approach
-
New with v4 stable is a brief overview of some of the guiding principles behind why we do the things we do in Bootstrap. Our intent is to distill and document all the things we keep in our heads while writing code, building linters, and debugging. Much of this is focused on concepts and strategies for writing responsive CSS, using simple selectors, and limiting how much JavaScript one needs to write.
-
Check out the new Approach page, and be sure to open an issue or pull request with feedback and suggestions on what else to cover.
-
Known issues
-
No release fixes every bug, and the same can be said for our v4 stable release. Here’s some of the things that we’re looking to tackle first in either a minor release (v4.1) or a patch release (v4.0.1) as time and scope allow.
-
-
-
Input groups, validation, and rounded corners. I rewrote this for Beta 3 and I thought nailed it, but I was mistaken. We have some rounded corner issues and the only way we can fix them with CSS without breaking backward compatibility is by limiting how extensible the component can be made. We may need a modifier class to avoid some gnarly CSS and satisfy all the key functionality. Check out the issue and cross-linked PR for more details.
-
-
-
Table variants, in particular .table-active, have a weird selector we’ve unintentionally left linger since prior releases. The bug results in double application of an rgba() background color—once for the <tr> and once for any <td>/<th> elements within.
-
-
-
There are a few more issues not yet confirmed or slated for our first patch release, but expect a handful of fixes coming your way before we hit the next minor release. We’ll likely also package up the default branch change for our repository in this next patch release. We didn’t have time to fit in testing a merge of a hugely divergent code base without nuking the entire Git history of v3. Again, more on that soon.
-
Next releases
-
Speaking of releases, we’re excited about the momentum we have going for us. Our GitHub project boards are mostly up to date on upcoming releases, so feel free to jump in and take a look. Our next release will be v4.1 (pending any bugfix patches) and will focus on a slew of small new features, utilities, responsive font sizes, and more. From there we have a couple more minor releases that rally around another group of features.
-
We aim to make RTL part of an upcoming minor release depending on overall scope. It’s taken us far too long to commit to this, but we’re on it. Our current plan is focused on implementing this into our build tools and components so you conditionally serve, for example, bootstrap.min.css or bootstrap-rtl.min.css. Weigh in on the open issue please with any feedback; when we’re ready, we’ll tee up a fresh pull request with help from the community.
-
It’s worth reiterating that each minor release will bring a new hosted version of our documentation. Right now, we have getbootstrap.com/docs/4.0/ and come v4.1’s release, we’ll have that plus getbootstrap.com/docs/4.1/. Prior releases will continue to be linked from our navigation as is already the case for v3.x and the last v4 alpha.
-
Themes update
-
Bootstrap Themes are getting a major update this year! We’ve been absolutely thrilled with the response since we originally launched Bootstrap Themes and we’re finally ready to share our plans for what’s next.
-
For the past few months, we’ve been working with some amazing theme creators to bring their awesome work to the Official Bootstrap Themes store. We couldn’t be more excited to announce we’re expanding Bootstrap Themes to include ten brand new themes. We’re currently targeting a first quarter launch with themes all built on Bootstrap 4 (sorry, no v3 for these). Depending on final reviews, we might even get them to y’all in the coming weeks.
-
So much of Bootstrap’s reach and usefulness comes directly from designers, developers, and creators all over the world building businesses with and on top of Bootstrap. We want to use our platform to give these creators an even larger audience and provide y’all with the best Bootstrap team-approved themes.
-
Stay tuned for more information as we get ready to launch.
-
Thank you
-
Finally, one last thank you to everyone who’s contributed to Bootstrap 4. It’s been a crazy journey and I’m personally relieved, thrilled, and anxious to call it stable. There have been roughly 6,000 commits to v4 since we first starting working on it back in 2015. We’ve gone every which direction and rewrote far too many things far too many times, but I’m so very happy and fortunate with where we landed.
-
Cheers once again to everyone who’s contributed to and built with Bootstrap. It’s an honor to be building these kind of tools alongside and for all of you.
It’s literally taken us years to do it, but Bootstrap 4 has finally arrived! Words cannot begin to describe the elation the entire team and I have for this release, but I’ll do my best. Thank you to everyone, especially to the team, and to everyone who’s contributed code in a pull request or opened an issue. Thank you.
+
Since our last beta, we’ve been hard at work stabilizing a few key pieces of our CSS, polishing our documentation, adding some extra surprises, and planning for our follow-up releases. We still have some kinks to iron out, but nothing’s going to stop us from shipping a stable release.
Want to know more before hitting the docs? Great, let’s dive in!
+
What’s new
+
There are no breaking changes since our last beta, but we have made some key improvements and resolved some tricky bugs.
+
+
+
Print styles and utility classes have been updated. We’ve improved how printed pages are rendered to ensure pages are reasonably sized instead of rendering them as mobile devices. Print display utilities also include a whole slew of new display values to match our standard display utilities.
+
+
+
Additive border utilities have been added (e.g., .border-top) and default to a solid 1px light gray border. Now it’s easier to quickly add all borders or a subset of borders to your components.
+
+
+
Our $spacers and $sizes Sass maps have been updated to allow more customization the same way our color maps work. You can now add, remove, or replace all your key-value pairs consistently across our CSS. Head to our Theming docs for more information and examples.
+
+
+
Added documentation to our Theming docs for using our provided CSS variables for those are living on the edge and don’t want to use Sass.
+
+
+
Added responsive .order-0 and .order-last classes for more control over the flexbox grid.
+
+
+
In addition, we’ve made plenty of improvements to reusing and extending variables and general code cleanup. But, that’s still not everything.
+
New examples
+
Nearly every example has been overhauled for our stable v4 release. We’ve removed a couple outdated examples, added brand new ones, and really overhauled a few others.
You’ve likely already seen our Album example, but it’s been updated for this release to include more content in our photo cards and improved mobile rendering.
+
+
+
Pricing is brand new with this release and is a fully custom page built with our utilities and card components. It’s responsive and easily extended.
+
+
+
Checkout is a brand new, extensive form example featuring all the best parts of our form layouts, validation styles, grid, and more.
+
+
+
Product is also new and is a cheeky riff on Apple-style marketing pages, largely built with only our utility classes. Don’t take it too seriously!
+
+
+
Blog has been rewritten from the ground up. Gone is the two column blue header layout. We’ve built a snarky magazine-style layout with featured posts and responsive navigation.
+
+
+
Dashboard has been overhauled as well to feature a live ChartJS example, includes a refreshed sidebar with Feather icons, and is semi-responsive.
+
+
+
Floating labels is brand new and builds on our sign-in example to provide a CSS-only implementation of the floating input label. This one’s experimental and may see major changes before we bring it to Bootstrap proper.
+
+
+
Finally, Offcanvas has been rewritten from the ground up to show off a navbar-built drawer, horizontal scrolling navigation, and some custom lists built on media object and utilities.
+
+
+
Cover, Carousel, Sign-in, and our framework examples only saw minor updates to improve code quality and fix a few smaller bugs. Overall this was a huge update for our examples and I’m excited to iterate on these and add more in future releases.
+
Documenting our approach
+
New with v4 stable is a brief overview of some of the guiding principles behind why we do the things we do in Bootstrap. Our intent is to distill and document all the things we keep in our heads while writing code, building linters, and debugging. Much of this is focused on concepts and strategies for writing responsive CSS, using simple selectors, and limiting how much JavaScript one needs to write.
+
Check out the new Approach page, and be sure to open an issue or pull request with feedback and suggestions on what else to cover.
+
Known issues
+
No release fixes every bug, and the same can be said for our v4 stable release. Here’s some of the things that we’re looking to tackle first in either a minor release (v4.1) or a patch release (v4.0.1) as time and scope allow.
+
+
+
Input groups, validation, and rounded corners. I rewrote this for Beta 3 and I thought nailed it, but I was mistaken. We have some rounded corner issues and the only way we can fix them with CSS without breaking backward compatibility is by limiting how extensible the component can be made. We may need a modifier class to avoid some gnarly CSS and satisfy all the key functionality. Check out the issue and cross-linked PR for more details.
+
+
+
Table variants, in particular .table-active, have a weird selector we’ve unintentionally left linger since prior releases. The bug results in double application of an rgba() background color—once for the <tr> and once for any <td>/<th> elements within.
+
+
+
There are a few more issues not yet confirmed or slated for our first patch release, but expect a handful of fixes coming your way before we hit the next minor release. We’ll likely also package up the default branch change for our repository in this next patch release. We didn’t have time to fit in testing a merge of a hugely divergent code base without nuking the entire Git history of v3. Again, more on that soon.
+
Next releases
+
Speaking of releases, we’re excited about the momentum we have going for us. Our GitHub project boards are mostly up to date on upcoming releases, so feel free to jump in and take a look. Our next release will be v4.1 (pending any bugfix patches) and will focus on a slew of small new features, utilities, responsive font sizes, and more. From there we have a couple more minor releases that rally around another group of features.
+
We aim to make RTL part of an upcoming minor release depending on overall scope. It’s taken us far too long to commit to this, but we’re on it. Our current plan is focused on implementing this into our build tools and components so you conditionally serve, for example, bootstrap.min.css or bootstrap-rtl.min.css. Weigh in on the open issue please with any feedback; when we’re ready, we’ll tee up a fresh pull request with help from the community.
+
It’s worth reiterating that each minor release will bring a new hosted version of our documentation. Right now, we have getbootstrap.com/docs/4.0/ and come v4.1’s release, we’ll have that plus getbootstrap.com/docs/4.1/. Prior releases will continue to be linked from our navigation as is already the case for v3.x and the last v4 alpha.
+
Themes update
+
Bootstrap Themes are getting a major update this year! We’ve been absolutely thrilled with the response since we originally launched Bootstrap Themes and we’re finally ready to share our plans for what’s next.
+
For the past few months, we’ve been working with some amazing theme creators to bring their awesome work to the Official Bootstrap Themes store. We couldn’t be more excited to announce we’re expanding Bootstrap Themes to include ten brand new themes. We’re currently targeting a first quarter launch with themes all built on Bootstrap 4 (sorry, no v3 for these). Depending on final reviews, we might even get them to y’all in the coming weeks.
+
So much of Bootstrap’s reach and usefulness comes directly from designers, developers, and creators all over the world building businesses with and on top of Bootstrap. We want to use our platform to give these creators an even larger audience and provide y’all with the best Bootstrap team-approved themes.
+
Stay tuned for more information as we get ready to launch.
+
Thank you
+
Finally, one last thank you to everyone who’s contributed to Bootstrap 4. It’s been a crazy journey and I’m personally relieved, thrilled, and anxious to call it stable. There have been roughly 6,000 commits to v4 since we first starting working on it back in 2015. We’ve gone every which direction and rewrote far too many things far too many times, but I’m so very happy and fortunate with where we landed.
+
Cheers once again to everyone who’s contributed to and built with Bootstrap. It’s an honor to be building these kind of tools alongside and for all of you.
Alpha 5 has arrived just over a month after Alpha 4 with some major feature improvements and a boat load of bug fixes. We still have a lot of work to do, but we’re closing the gap and getting more stable with each release. Keep reading for the highlights and plans for Alpha 6.
-
New CSS bundles
-
We’ve updated our build process to include compiled versions of all our CSS bundles. In addition to the longstanding default compiled and minified bundles, we now include compiled CSS files for our flexbox mode, grid system only, and Reboot only bundles. Each bundle includes a compiled, minified, and Sass map, just like the default compiled CSS.
-
Grid updates
-
Our grid system has been updated and is more flexible than ever. New in Alpha 5 are breakpoint specific grid gutters. That’s right, now you can customize the width of your gutters across each and every grid tier by modifying the Sass map.
-
The .container behaviors have changed slightly in Alpha 5. We now set the width of each container alongside a max-width: 100%; to ensure proper rendering across browsers in both our default and flexbox modes. Similarly, we fixed a bug in our flexbox grid where columns didn’t properly collapse at lower breakpoints.
-
Lastly, we’ve changed a few breakpoint and container dimensions. The sm tier’s container is now smaller than it’s viewport dimensions and the lg tier has changed from 940px to 960px for grid columns that more cleanly by 12.
-
Utilities overhaul
-
Utility classes got a ton of attention with Alpha 5 and will continue to in Alpha 6. Major changes in this release include:
-
-
-
Simpler margin and padding syntax (e.g., now mx-auto instead of m-x-auto).
-
-
-
Renamed .pull-*-left and .pull-*-right to their CSS properties (e.g., now .float-*-left and .float-*-right).
-
-
-
Separated background and color utilities for more explicit styling.
-
-
-
Renamed image utilities, moving from .img-rounded and .img-circle to .rounded and .rounded-circle, respectively.
-
-
-
Removed the display: block; from .img-fluid as it’s unnecessary for creating responsive images (the inline-block default works great as-is).
-
-
-
Added new vertical-align utilities with .align-top, .align-middle, and more.
-
-
-
Be sure to scope out the open issues in the Alpha 6 milestone. There are more updates coming to utilities to add more responsive variations, more consistent naming, and more.
-
Navbar updates
-
We’ve put a ton of time into the navbar for Alpha 5, but honestly it’s still not done. Rather than hold back the progress we’ve made for it until Alpha 6, we’re including a somewhat half-baked iteration.
-
Here’s a look at what’s new, how it works, and what might change in our next release.
-
-
-
First up, the navbar has a brand new toggler that features a customizable SVG-based background-image. With the power of Sass variables, that allows us to easily change the color of those hamburger menu icons.
-
-
-
Second, the default styles for the brand and navigation have largely been tweaked. There’s less custom styling overall and an emphasis on positioning and flexibility.
-
-
-
Building on that, we overhauled the collapse plugin integration for responsive navbars. With the help of some utility classes and collapse classes for each grid tier, you can easily pick the breakpoint for collapsing your navbar without having to recompile your Sass. Also included is the auto restyling of dropdown menus for mobile so they no longer hide other navbar content when toggled.
-
-
-
Lastly, we’ve updated the styling and documentation for various navbar subcomponents. There’s more flexibility and examples of the .navbar-brand, better form control support, higher nav contrast, themed responsive toggles, and more.
-
-
-
The navbar is a tricky one—there’s so much functionality and styling that can go into them. We’ve outlined the next major pieces for the navbar, but there’s likely more we’re missing. Be sure to give the updated component a whirl and report back with your feedback.
-
Getting to Alpha 6
-
We’re planning on one more major alpha release before getting into the slightly more stable beta ships. There’s still more to do around our major components—the navbar, flexbox variants, utilities, and accessibility—before we button things up.
-
Once done, we’ll review all on our docs and update all our example templates to the latest and greatest. From there we’ll need your help to test these changes and report bugs. Stay tuned for more updates as we get closer to that release.
Alpha 5 has arrived just over a month after Alpha 4 with some major feature improvements and a boat load of bug fixes. We still have a lot of work to do, but we’re closing the gap and getting more stable with each release. Keep reading for the highlights and plans for Alpha 6.
+
New CSS bundles
+
We’ve updated our build process to include compiled versions of all our CSS bundles. In addition to the longstanding default compiled and minified bundles, we now include compiled CSS files for our flexbox mode, grid system only, and Reboot only bundles. Each bundle includes a compiled, minified, and Sass map, just like the default compiled CSS.
+
Grid updates
+
Our grid system has been updated and is more flexible than ever. New in Alpha 5 are breakpoint specific grid gutters. That’s right, now you can customize the width of your gutters across each and every grid tier by modifying the Sass map.
+
The .container behaviors have changed slightly in Alpha 5. We now set the width of each container alongside a max-width: 100%; to ensure proper rendering across browsers in both our default and flexbox modes. Similarly, we fixed a bug in our flexbox grid where columns didn’t properly collapse at lower breakpoints.
+
Lastly, we’ve changed a few breakpoint and container dimensions. The sm tier’s container is now smaller than it’s viewport dimensions and the lg tier has changed from 940px to 960px for grid columns that more cleanly by 12.
+
Utilities overhaul
+
Utility classes got a ton of attention with Alpha 5 and will continue to in Alpha 6. Major changes in this release include:
+
+
+
Simpler margin and padding syntax (e.g., now mx-auto instead of m-x-auto).
+
+
+
Renamed .pull-*-left and .pull-*-right to their CSS properties (e.g., now .float-*-left and .float-*-right).
+
+
+
Separated background and color utilities for more explicit styling.
+
+
+
Renamed image utilities, moving from .img-rounded and .img-circle to .rounded and .rounded-circle, respectively.
+
+
+
Removed the display: block; from .img-fluid as it’s unnecessary for creating responsive images (the inline-block default works great as-is).
+
+
+
Added new vertical-align utilities with .align-top, .align-middle, and more.
+
+
+
Be sure to scope out the open issues in the Alpha 6 milestone. There are more updates coming to utilities to add more responsive variations, more consistent naming, and more.
+
Navbar updates
+
We’ve put a ton of time into the navbar for Alpha 5, but honestly it’s still not done. Rather than hold back the progress we’ve made for it until Alpha 6, we’re including a somewhat half-baked iteration.
+
Here’s a look at what’s new, how it works, and what might change in our next release.
+
+
+
First up, the navbar has a brand new toggler that features a customizable SVG-based background-image. With the power of Sass variables, that allows us to easily change the color of those hamburger menu icons.
+
+
+
Second, the default styles for the brand and navigation have largely been tweaked. There’s less custom styling overall and an emphasis on positioning and flexibility.
+
+
+
Building on that, we overhauled the collapse plugin integration for responsive navbars. With the help of some utility classes and collapse classes for each grid tier, you can easily pick the breakpoint for collapsing your navbar without having to recompile your Sass. Also included is the auto restyling of dropdown menus for mobile so they no longer hide other navbar content when toggled.
+
+
+
Lastly, we’ve updated the styling and documentation for various navbar subcomponents. There’s more flexibility and examples of the .navbar-brand, better form control support, higher nav contrast, themed responsive toggles, and more.
+
+
+
The navbar is a tricky one—there’s so much functionality and styling that can go into them. We’ve outlined the next major pieces for the navbar, but there’s likely more we’re missing. Be sure to give the updated component a whirl and report back with your feedback.
+
Getting to Alpha 6
+
We’re planning on one more major alpha release before getting into the slightly more stable beta ships. There’s still more to do around our major components—the navbar, flexbox variants, utilities, and accessibility—before we button things up.
+
Once done, we’ll review all on our docs and update all our example templates to the latest and greatest. From there we’ll need your help to test these changes and report bugs. Stay tuned for more updates as we get closer to that release.
Bootstrap 3.3.6 is here! It’s a long overdue release that addresses dozens of CSS bug fixes and documentation updates. We’ve had over 180 commits and 100 closed issues and pull requests from nearly 30 contributors since our last release. Woohoo!
-
Here are some of the highlights:
-
-
Added support for an official NuGet package (yeah, it’s an old one, but folks still use it!).
-
Enabled source maps for our compiled minified CSS.
-
Updated over a dozen browser bug entries as browsers continue to fix bugs (aww yeah!).
-
Updated several JavaScript plugin docs to clarify usage.
-
Made local documentation development easier with a local jQuery fallback.
Bootstrap 3.3.6 is here! It’s a long overdue release that addresses dozens of CSS bug fixes and documentation updates. We’ve had over 180 commits and 100 closed issues and pull requests from nearly 30 contributors since our last release. Woohoo!
+
Here are some of the highlights:
+
+
Added support for an official NuGet package (yeah, it’s an old one, but folks still use it!).
+
Enabled source maps for our compiled minified CSS.
+
Updated over a dozen browser bug entries as browsers continue to fix bugs (aww yeah!).
+
Updated several JavaScript plugin docs to clarify usage.
+
Made local documentation development easier with a local jQuery fallback.
Bootstrap 3.3.2 is here! This release has been all about bug fixes, accessibility improvements, and documentation updates. We’ve had over 300 commits from 19 contributors since our last release. Woohoo!
-
Here are some of the highlights:
-
-
Updated Glyphicons to v1.9.
-
Reverted support for delegating multiple tooltips via a single element, because it caused nasty regressions.
-
Fixed a regression that broke wrap: false for the carousel plugin.
-
Added manual vendor prefixing back to carousel CSS to avoid a regression among folks not yet using Autoprefixer.
-
Improved accessibility of our examples and added more accessibility guidance to our docs.
-
-
We’ve also deployed two new bots to aid Bootstrap’s development:
-
-
Savage, a bot to automatically run Sauce cross-browser tests on JavaScript pull requests.
-
@twbs-grunt, a bot to automatically keep our compiled /dist/ files up-to-date
We’re stoked to welcome Patrick to the Bootstrap team! Patrick brings with him terrific accessibility expertise and has already contributed many improvements to Bootstrap’s components and documentation.
-
Download Bootstrap
-
Download the latest release—source code, compiled assets, and documentation—as a zip file directly from GitHub:
Bootstrap 3.3.2 is here! This release has been all about bug fixes, accessibility improvements, and documentation updates. We’ve had over 300 commits from 19 contributors since our last release. Woohoo!
+
Here are some of the highlights:
+
+
Updated Glyphicons to v1.9.
+
Reverted support for delegating multiple tooltips via a single element, because it caused nasty regressions.
+
Fixed a regression that broke wrap: false for the carousel plugin.
+
Added manual vendor prefixing back to carousel CSS to avoid a regression among folks not yet using Autoprefixer.
+
Improved accessibility of our examples and added more accessibility guidance to our docs.
+
+
We’ve also deployed two new bots to aid Bootstrap’s development:
+
+
Savage, a bot to automatically run Sauce cross-browser tests on JavaScript pull requests.
+
@twbs-grunt, a bot to automatically keep our compiled /dist/ files up-to-date
We’re stoked to welcome Patrick to the Bootstrap team! Patrick brings with him terrific accessibility expertise and has already contributed many improvements to Bootstrap’s components and documentation.
+
Download Bootstrap
+
Download the latest release—source code, compiled assets, and documentation—as a zip file directly from GitHub:
We encourage you to add Bootlint to your web development toolchain so that none of the common mistakes slow down your project’s development. In the future, we hope to also make a GitHub issues bot based on Bootlint to help folks out on the Bootstrap issue tracker.
Today we’re shipping Bootstrap v3.2.0, a monster of a release that’s been in the works for four months. There’s lots of new hotness, hundreds of bug fixes, plenty of documentation improvements, and some build tool improvements. All told, there have been over 1,000 commits since our last release.
-
Download Bootstrap
-
Download the latest release—source code, compiled assets, and documentation—as a zip file directly from GitHub:
Here’s a look at some of the highlights of this release.
-
Responsive embeds
-
As seen in SUIT CSS, we’ve added a few classes for creating responsive embeds. They’re great for proportionally scaling down YouTube videos and other iframe or embed elements. Head to the docs to check them out.
-
New responsive utility classes
-
We’ve had responsive utility classes—e.g., .visible-xs—for awhile now. Today, they level up a bit. We’ve added block, inline-block, and inline variations for each grid tier. For example, .visible-xs-block is now a thing.
-
Copy docs snippets
-
Our documentation snippets just got an upgrade with the help of ZeroClipboard, the open source Flash-based copy-paste button. It’ll appear in the top right of nearly every example in the docs. Just click, and paste.
-
LMVTFY
-
We blogged about this yesterday, but we have a new bot hanging out in our issues and pull requests on GitHub. Whenever someone pastes in a live example—like those from JS Bin or jsFiddle—we now validate their HTML. If it’s invalid, we tell folks what’s wrong so they can fix it.
-
Browser bugs
-
We’ve also begun tracking unresolved browser bugs that currently impact Bootstrap’s development in some way. We call it the Wall of browser bugs. One of the coolest parts of developing Bootstrap is finding and reporting browser bugs to their developers. We’re literally helping to make the web a better place, and that’s pretty awesome in our book.
-
And dozens more…
-
With over 1,000 commits, a lot has changed, and all of it for the better. A few more notable changes include:
-
-
The docs have been rearranged and updated to be more specific and easier to develop.
-
The progress bar component has been improved for increased flexibility.
-
CSS repaint performance (most notably through scrolling) has been enhanced for several components.
-
Keyboard navigation (forward and backward) is now available for the carousel.
-
Modals should no longer shift left when being opened.
Well, we’ll probably have a patch release (v3.2.1), and then I imagine it’s onward to v4. We have a v3.3.0 milestone on GitHub, but it’s still unclear if we’ll ship that before jumping to v4. We’ve been building a list of things we’d like to see in the new version, but we don’t have anything ready for the public yet. We’ll share more details as we have them though. Until then, enjoy!
Today we’re shipping Bootstrap v3.2.0, a monster of a release that’s been in the works for four months. There’s lots of new hotness, hundreds of bug fixes, plenty of documentation improvements, and some build tool improvements. All told, there have been over 1,000 commits since our last release.
+
Download Bootstrap
+
Download the latest release—source code, compiled assets, and documentation—as a zip file directly from GitHub:
Here’s a look at some of the highlights of this release.
+
Responsive embeds
+
As seen in SUIT CSS, we’ve added a few classes for creating responsive embeds. They’re great for proportionally scaling down YouTube videos and other iframe or embed elements. Head to the docs to check them out.
+
New responsive utility classes
+
We’ve had responsive utility classes—e.g., .visible-xs—for awhile now. Today, they level up a bit. We’ve added block, inline-block, and inline variations for each grid tier. For example, .visible-xs-block is now a thing.
+
Copy docs snippets
+
Our documentation snippets just got an upgrade with the help of ZeroClipboard, the open source Flash-based copy-paste button. It’ll appear in the top right of nearly every example in the docs. Just click, and paste.
+
LMVTFY
+
We blogged about this yesterday, but we have a new bot hanging out in our issues and pull requests on GitHub. Whenever someone pastes in a live example—like those from JS Bin or jsFiddle—we now validate their HTML. If it’s invalid, we tell folks what’s wrong so they can fix it.
+
Browser bugs
+
We’ve also begun tracking unresolved browser bugs that currently impact Bootstrap’s development in some way. We call it the Wall of browser bugs. One of the coolest parts of developing Bootstrap is finding and reporting browser bugs to their developers. We’re literally helping to make the web a better place, and that’s pretty awesome in our book.
+
And dozens more…
+
With over 1,000 commits, a lot has changed, and all of it for the better. A few more notable changes include:
+
+
The docs have been rearranged and updated to be more specific and easier to develop.
+
The progress bar component has been improved for increased flexibility.
+
CSS repaint performance (most notably through scrolling) has been enhanced for several components.
+
Keyboard navigation (forward and backward) is now available for the carousel.
+
Modals should no longer shift left when being opened.
Well, we’ll probably have a patch release (v3.2.1), and then I imagine it’s onward to v4. We have a v3.3.0 milestone on GitHub, but it’s still unclear if we’ll ship that before jumping to v4. We’ve been building a list of things we’d like to see in the new version, but we don’t have anything ready for the public yet. We’ll share more details as we have them though. Until then, enjoy!
Since releasing Ratchet 2.0.0 we’ve reached over 7,000 stars and over 650 forks on GitHub! Thanks to all our contributors and the rest of the community for helping make this thing awesome.
Today we’re stoked to introduce the brand spanking new Ratchet 2.0. The mobile-only framework for building mobile apps with HTML, CSS, and JavaScript has been overhauled with new features, documentation, and a brand new home.
-
New home
-
First, you’re not crazy—Ratchet has moved! It’s now a part of the Bootstrap organization on GitHub. Ratchet 2 was lovingly crafted by @connors, a good friend to Bootstrap’s creators. Given our collaboration in person and the ideas we have for the future of both frameworks, it makes perfect sense.
Things should seem pretty familiar, but we’ve added a bunch of new content and some key new features. Chief among them are the ability to show Ratchet on an iPhone and Android and three awesome examples to show it all off.
Feel free to download, remix, and extend these example apps—they’re all part of the new Ratchet docs.
-
Really, what’s new?
-
We’ve got tons of new and improved features for Ratchet. Here’s the rundown:
-
-
New Ratchicons! An icon font dedicated to Ratchet, with support for both iOS and Android.
-
New themes for iOS and Android! That’s right, Ratchet has a brand new base coat with optional themes for iOS and Android. Now your app can look right at home on either platform.
-
New card wrapper. Wrap any content or Ratchet component in a card for that classic inset card look.
-
CSS has been rewritten to utilize Sass, compiled via Gruntfile.
Improved table views, now with support for lists featuring images and icons.
-
Updated class names for buttons, badges, and more to match the Bootstrap nomenclature.
-
-
It’s a huge release that’s been a long time coming. Head to the new Ratchet docs to check it all out in person, and be sure to view those new examples from your favorite iOS or Android phone.
Be sure to check out the GitHub milestone to see a more complete changelog of what’s new.
-
What’s next?
-
Just like Bootstrap releases, up next for Ratchet will be documentation improvements and bug fixes as feedback rolls in. Without committing to a date, we also want to add support for iPad and Android tablets.
-
As always, if you find a bug or want to suggest a feature, just open an issue or a pull request on GitHub.
Today we’re stoked to introduce the brand spanking new Ratchet 2.0. The mobile-only framework for building mobile apps with HTML, CSS, and JavaScript has been overhauled with new features, documentation, and a brand new home.
+
New home
+
First, you’re not crazy—Ratchet has moved! It’s now a part of the Bootstrap organization on GitHub. Ratchet 2 was lovingly crafted by @connors, a good friend to Bootstrap’s creators. Given our collaboration in person and the ideas we have for the future of both frameworks, it makes perfect sense.
Things should seem pretty familiar, but we’ve added a bunch of new content and some key new features. Chief among them are the ability to show Ratchet on an iPhone and Android and three awesome examples to show it all off.
Feel free to download, remix, and extend these example apps—they’re all part of the new Ratchet docs.
+
Really, what’s new?
+
We’ve got tons of new and improved features for Ratchet. Here’s the rundown:
+
+
New Ratchicons! An icon font dedicated to Ratchet, with support for both iOS and Android.
+
New themes for iOS and Android! That’s right, Ratchet has a brand new base coat with optional themes for iOS and Android. Now your app can look right at home on either platform.
+
New card wrapper. Wrap any content or Ratchet component in a card for that classic inset card look.
+
CSS has been rewritten to utilize Sass, compiled via Gruntfile.
Improved table views, now with support for lists featuring images and icons.
+
Updated class names for buttons, badges, and more to match the Bootstrap nomenclature.
+
+
It’s a huge release that’s been a long time coming. Head to the new Ratchet docs to check it all out in person, and be sure to view those new examples from your favorite iOS or Android phone.
Be sure to check out the GitHub milestone to see a more complete changelog of what’s new.
+
What’s next?
+
Just like Bootstrap releases, up next for Ratchet will be documentation improvements and bug fixes as feedback rolls in. Without committing to a date, we also want to add support for iPad and Android tablets.
+
As always, if you find a bug or want to suggest a feature, just open an issue or a pull request on GitHub.
This release was unplanned, and as such it bumps a lot of planned fixes to a v3.0.3 release. We’ve already updated the relevant issues to be under the new v3.0.3 milestone. Look for that release, and perhaps another patch, before v3.1.0 ships in the coming months.
Today we’re shipping v3.0.1, a huge patch release with over 750 commits since v3 was released two months ago. We’ve outlined most of the changes below, including documentation updates, bug fixes, and even a few deprecations (our first in the history of the project).
Remove links to navbar examples from example navbars in Theme example
-
Delete smaller touch icons and only include one
-
Remove unused mention of .prettyprint styles from code.less (we no longer use that plugin and the class is undocumented, so we’re nuking it)
-
Remove unnecessary left and right properties from .modal-dialog since we use margin to center the modal
-
Add Linux Firefox to supported browsers list
-
Update outdated JSFiddle example
-
-
Bug fixes and changes
-
-
#9855: Partial fix for open modal content shifting: removed all margin settings to prevent some of the content shifting. Still needs JS love to detect scrollbars and adjust content accordingly (will address in v3.0.2).
-
#9877: Add improved .active state to navbar nav in theme
-
#9879: Add hover state (move gradient up 15px) to theme buttons]
-
#9909: Add @component-active-color variable to complement @component-active-bg (and apply it to dropdowns, nav pills, and list group items)
-
#9964: Add fonts directory to bower.json main files list
-
#9968: Simplify striped progress bar mixin to remove unused color
-
#9969: Add support for output element by styling it more like our .form-control
#9981: Account for hover and focus states on pagination disabled items
-
#9989: Set monospace font-family on <kbd> and <samp> to match browser defaults
-
#9999: Make .table-hover styling apply to <th> within contextual table rows too
-
#10013: Position carousel left and right controls from the left and right, respectively
-
#10014, #10406: Update grid to use width on .containers instead of max-width as IE8 doesn’t fully support box-sizing: border-box when combined with min/max width/height
-
#10022: Add width: 1em; to all empty Glyphicons to prevent loading flicker
-
#10024: Use negative margin to fix the border between button and input in input groups
#10601: Use overflow-y: auto; for .navbar-collapse instead of visible to better enable scrolling on Android 4.x devices (see issue for more details on support and gotchas)
-
#10620: Remove filter on buttons for IE9 in theme.less due to bleed-through with rounded corners (matches behavior and style of Bootstrap 2.x)
-
#10641: Remove unused .accordion-toggle class from docs example
-
#10656: Inherit link and caret colors for textual dropdowns in panel headers
-
#10694: Remove unnecessary content property from .caret
-
#10695: Ensure carets in .nav-pills dropdown links inherit active color
-
#10729: Removed the unnecessary override and the !important from .wrap in the sticky footer examples
-
#10755: Don’t remove quotes around q element by default
-
#10778: Use newly-updated Glyphicons to workaround old Android WebKit bug
#11126: Remove box-shadow from .btn-link.dropdown-toggle
-
#11127: .navbar-fixed-bottom should have a top border, not a bottom border
-
#11139: Add position: relative; to .modal-dialog so that the z-index takes effect
-
#11151: Remove rogue H5BP .ir class from print styles
-
#11186: Add background-color hacks so that clicking carousel indicators in IE8-9 works as intended
-
#11188: Refactor z-index on navbars. Removes the default z-index: 1000; and instead only applies it to static-top, fixed-top, and fixed-bottom. Also fixes up the broken default navbar example’s fubared padding.
-
#11206: Remove padding-left from first list item within .list-inline
-
#11244: Adds .animation() mixin to replace .progress-bar’s regular CSS animation properties (and drops the -moz, -ms, and -o prefixes as they are not needed per https://caniuse.com/#feat=css-animation).
-
#11248: Apply background-color: #fff; to selects in print styles to fix Chrome bug
-
Audited Customizer variables section and rearranged content
-
-
Deprecated
-
-
#9963, #10567: Deprecate @screen-* variables for @screen-*-min to better match the @screen-*-max variables and provide more context to their actual uses.
-
#10005: Finish removing uses of @screen-{device} variables by deprecating them for @screen-*-min wherever possible.
-
#10100: Deprecate .hide-text mixin for .text-hide. This matches our class-mixin strategy elsewhere (e.g., .clearfix) and ensures the class and mixin use the same name to avoid confusion.
-
#10125: Deprecate inconsistent container variables for new @container-{screen-size} variables (e.g., use @container-sm instead of @container-tablet)
-
#10769: Deprecate .hide for .hidden so we don’t duplicate functionality.
We’ve been looking to move to the MIT license for quite some time, and today’s release takes us that much closer. Starting with v3.0.1, all new contributions to Bootstrap will be dual-licensed as Apache 2 and MIT. The intent is to move the entire project (including all prior contributions) to the MIT license in a future version (hopefully v3.1.0).
-
To make the change, every contributor to Bootstrap must consent to relicense their changes (since we have no CLA). We’re making excellent progress on that front with the community’s help and will address holdouts as they come up.
-
As a heads up, we’ve placed notices in the contributing guidelines and our project readme about the pending change and transition period.
-
It goes without saying that we don’t need to do this, but we want to make Bootstrap available to all communities who cannot currently use it due to licensing conflicts. Theoretically these communities could change their licenses, but when you step back and objectively look at the situation, it’s much easier for us to change. We hope you understand and stick it out with us as we make the move.
-
Growing the team
-
The Bootstrap core team doubled a few months ago when we added Chris and Julian to the project. They’ve helped manage issues, written some awesome code, and provided critical input in the direction of the project. As Bootstrap grows, so too must our core team, and we’re once again actively seeking new team members.
-
It’ll be a slow process, much like last time, but we need the help on several fronts to keep us shipping and iterating. In particular, we’ll be keeping an eye out for folks with top notch CSS and JavaScript skills.
-
Up next
-
We’re already tracking issues for a v3.0.2 release and its changes will be along the same lines as today’s release—bugs and docs. v3.1.0 will likely ship after that sometime with a few new features. As always, no dates have been set yet for any future releases.
Our second alpha release of v5.3.0 has landed with a ton of enhancements and bug fixes for our new color modes! There’s still more to come, but we’ve held off shipping until we ironed out enough issues. Huzzah, we have!
+
This v5.3.0 release is a monumental update for Bootstrap 5. It’s big enough that it could’ve been a v6 on its own, but we wanted to do right by the community and get color modes out the door without the massive major release upgrade. We’re getting super close now, so bear with us as we continue to chip away at this.
Removed several duplicate and unused root CSS variables.
+
+
Color modes
+
+
+
Dark mode colors are now derived from our theme colors (e.g., $primary) in Sass, rather than color-specific tints or shades (e.g., $blue-300). This allows for a more automated dark mode when customizing the default theme colors.
+
+
+
Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border.
+
+
+
Snippet examples are now ready for dark mode with updated markup and reduced custom styles.
+
+
+
Added color-scheme: dark to dark mode CSS to change OS level controls like scrollbars
+
+
+
Form validation border-color and text color states now respond to dark mode, thanks to new Sass and CSS variables.
+
+
+
Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn’t update properly.
+
+
+
Our box-shadows will once again always stay dark instead of inverting to white when in dark mode.
+
+
+
Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes.
+
+
+
Improved docs code syntax colors and more across light and dark modes.
+
+
+
Removed the ability to nest light mode components within dark mode. This was super incomplete unfortunately and just isn’t practical without quadrupling our selectors for every component. Maybe in v6!
+
+
+
Typography
+
+
We no longer set a color for $headings-color-dark or --bs-heading-color for dark mode. To avoid several problems of headings within components appearing the wrong color, we’ve set the Sass variable to null and added a null check like we use on the default light mode.
+
+
Components
+
+
+
Cards now have a color set on them to improve rendering across color modes.
+
+
+
Added a new .nav-underline variant for our navigation with a simpler bottom border under the active nav link. See the docs for an example.
+
+
+
Navs now have new :focus-visible styles that better match our custom button focus styles.
+
+
+
Helpers
+
+
+
Added a new .icon-link helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too.
+
+
+
Added a new focus ring helper for removing the default outline and setting a custom box-shadow focus ring.
+
+
+
Utilities
+
+
+
Renamed Sass and CSS variables ${color}-text to ${color}-text-emphasis to match their associated utilities.
+
+
+
Added new .link-body-emphasis helper alongside our colored links. This creates a colored link using our color mode responsive emphasis color.
+
+
+
Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. Explore the new links utilities.
+
+
+
CSS variable-based border-width utilities have been reverted to set their property directly (as was done before v5.2.0). This avoids inheritance issues across nested elements, including tables.
+
+
+
Added new .border-black utility to match our .text-black and .bg-black utilities.
+
+
+
Deprecated Deprecated the .text-muted utility and $text-muted Sass variable. It’s been replaced by .text-body-secondary and $body-secondary-color.
+
+
+
Docs
+
+
Updated docs page table of contents to use Scrollpy (shoutout to our v3 docs!).
+
Revamped syntax highlighting colors for code snippets across color modes.
+
Improved content and rendering of several docs callouts.
+
Document more color mode features and usage suggestions.
+
Added theme toggling to examples pages.
+
Updated dependencies across the board, including in our guides.
+
+
Known issues
+
While not an exhaustive list, here’s some of the stuff we’re going to be working on before calling this release stable. You can track these and more in the v5.3.0-stable project on GitHub.
+
+
Add new functionality to utilities with mixins and functions.
+
Some components need another pass at enabling full-color mode responsiveness. Bear in mind, some components like buttons won’t get full-color mode adaptivity until v6.
+
Labels in disabled floating forms have incorrect rendering.
+
Docs need to be updated for modifying theme colors across color modes.
+
Examples need another pass for dark mode support, new screenshots, and more.
+
Improve click/tap area for range inputs.
+
+
Up next will be the stable release of v5.3.0. Originally this was planned as a beta, but I think we’re getting close enough to call this final with one more release.
Bootstrap v5.2.1 is here with fixes from our latest minor release, v5.2. As a patch release, these changes are limited to bug fixes, documentation updates, and some dependency updates.
-
We’ve also continued to iterate on a few other projects to help folks get up and running with Bootstrap with npm, other JS frameworks, and various build tools. Keep reading to learn more.
-
Key changes
-
We’ve updated our calc() functions to work around an apparent bug in postcss-values-parser that prevented our source Sass files from compiling properly when building with React and PostCSS. The fix was to reverse the order of our multiplication inside calc() functions. Be aware you may need to make similar modifications depending on your own customizations.
-
We’ve also addressed some longstanding issues around button focus and active styling, in particular for checkbox and radio buttons. On mobile devices, input-based buttons have trouble shedding their focus styles. This has been resolved in v5.2.1 with a change from :focus to :focus-visible for our .btns. Now, checkbox and radio buttons no longer change their background-color on :focus-visible and they receive no :hover styling. Regular .btns still have their familiar hover and focus styles.
-
We debated not including the button focus change in v5.2.1, but felt it was important enough to close several bugs. Let us know what you think and we’ll continue to refine our implementation.
-
Highlights
-
In addition to the changes above, we’ve fixed bugs across several components:
-
-
Accordion
-
-
Update color value to use the $accordion-button-color Sass variable instead of our color contrast function
-
-
-
Buttons
-
-
Added a transparent default hover border color CSS variable for buttons to fix a visual regression
-
.btn-link no longer has a gradient when $enable-gradients is set to true
-
-
-
Forms
-
-
Input groups have updated z-index values to ensure proper rendering of validated form fields
-
Floating labels now reset their text-align to ensure consistent styling
-
-
-
List Groups
-
-
Horizontal list groups with only one child now render the correct border-radius
-
Modified the list-group-item selectors to better support nested imports of Bootstrap’s CSS
-
-
-
Modals
-
-
Updated event listeners to ignore clicks on scrollbar clicks, clicks that start inside .modal-dialog but end outside it, and respond to clicks that start and end outside .modal-dialog
Reverted some tooltip plugin updates to prevent issues with selector, dynamic content, and disposed tooltips using title
-
Fixed trigger: "manual" showing and immediately hiding when calling toggle()
-
-
-
-
Dependencies
-
-
Updated Autoprefixer to fix warnings of the color-adjust property (thanks to @julien-deramond on our team for reporting an issue upstream here)
-
-
Docs
-
-
Searching our docs on mobile has been improved with the search field now always visible on responsive, narrow viewports
-
Removed links to and mentions of Slack from across the codebase, as we intend to shutter Slack in favor of GitHub Discussions
-
Reintroduced proper outline styles for docs code samples and buttons when :not(:focus-visible)
-
-
Farewell, Slack!
-
As mentioned over a month ago, we made the decision to close down our community Slack channel. Slack isn’t great at managing a large scale community and it’s prohibitively expensive as well for a community the size of ours (the Slack was over 45,000 people!). Instead of using Slack or similar tool, we’re encouraging folks to use our Discussions tab on GitHub.
Make sure to checkout (pun intended!) our latest project, the twbs/examples repository! The examples project includes functional demos for all sorts of environments and JS frameworks, with more planned! You can even open every example in StackBlitz and edit them in the browser.
We’ve shipped a v2.0.0 update to the twbs/bootstrap-npm-starter project. This release includes Bootstrap v4.6.2, Bootstrap Icons v1.9.1, a new live reload feature for local development, and several dependency updates. This project will remain dedicated to Bootstrap 4 while our twbs/examples repo will focus on v5 and future major releases.
Today we’re shipping v3.0.1, a huge patch release with over 750 commits since v3 was released two months ago. We’ve outlined most of the changes below, including documentation updates, bug fixes, and even a few deprecations (our first in the history of the project).
Remove links to navbar examples from example navbars in Theme example
+
Delete smaller touch icons and only include one
+
Remove unused mention of .prettyprint styles from code.less (we no longer use that plugin and the class is undocumented, so we’re nuking it)
+
Remove unnecessary left and right properties from .modal-dialog since we use margin to center the modal
+
Add Linux Firefox to supported browsers list
+
Update outdated JSFiddle example
+
+
Bug fixes and changes
+
+
#9855: Partial fix for open modal content shifting: removed all margin settings to prevent some of the content shifting. Still needs JS love to detect scrollbars and adjust content accordingly (will address in v3.0.2).
+
#9877: Add improved .active state to navbar nav in theme
+
#9879: Add hover state (move gradient up 15px) to theme buttons]
+
#9909: Add @component-active-color variable to complement @component-active-bg (and apply it to dropdowns, nav pills, and list group items)
+
#9964: Add fonts directory to bower.json main files list
+
#9968: Simplify striped progress bar mixin to remove unused color
+
#9969: Add support for output element by styling it more like our .form-control
#9981: Account for hover and focus states on pagination disabled items
+
#9989: Set monospace font-family on <kbd> and <samp> to match browser defaults
+
#9999: Make .table-hover styling apply to <th> within contextual table rows too
+
#10013: Position carousel left and right controls from the left and right, respectively
+
#10014, #10406: Update grid to use width on .containers instead of max-width as IE8 doesn’t fully support box-sizing: border-box when combined with min/max width/height
+
#10022: Add width: 1em; to all empty Glyphicons to prevent loading flicker
+
#10024: Use negative margin to fix the border between button and input in input groups
#10601: Use overflow-y: auto; for .navbar-collapse instead of visible to better enable scrolling on Android 4.x devices (see issue for more details on support and gotchas)
+
#10620: Remove filter on buttons for IE9 in theme.less due to bleed-through with rounded corners (matches behavior and style of Bootstrap 2.x)
+
#10641: Remove unused .accordion-toggle class from docs example
+
#10656: Inherit link and caret colors for textual dropdowns in panel headers
+
#10694: Remove unnecessary content property from .caret
+
#10695: Ensure carets in .nav-pills dropdown links inherit active color
+
#10729: Removed the unnecessary override and the !important from .wrap in the sticky footer examples
+
#10755: Don’t remove quotes around q element by default
+
#10778: Use newly-updated Glyphicons to workaround old Android WebKit bug
#11126: Remove box-shadow from .btn-link.dropdown-toggle
+
#11127: .navbar-fixed-bottom should have a top border, not a bottom border
+
#11139: Add position: relative; to .modal-dialog so that the z-index takes effect
+
#11151: Remove rogue H5BP .ir class from print styles
+
#11186: Add background-color hacks so that clicking carousel indicators in IE8-9 works as intended
+
#11188: Refactor z-index on navbars. Removes the default z-index: 1000; and instead only applies it to static-top, fixed-top, and fixed-bottom. Also fixes up the broken default navbar example’s fubared padding.
+
#11206: Remove padding-left from first list item within .list-inline
+
#11244: Adds .animation() mixin to replace .progress-bar’s regular CSS animation properties (and drops the -moz, -ms, and -o prefixes as they are not needed per https://caniuse.com/#feat=css-animation).
+
#11248: Apply background-color: #fff; to selects in print styles to fix Chrome bug
+
Audited Customizer variables section and rearranged content
+
+
Deprecated
+
+
#9963, #10567: Deprecate @screen-* variables for @screen-*-min to better match the @screen-*-max variables and provide more context to their actual uses.
+
#10005: Finish removing uses of @screen-{device} variables by deprecating them for @screen-*-min wherever possible.
+
#10100: Deprecate .hide-text mixin for .text-hide. This matches our class-mixin strategy elsewhere (e.g., .clearfix) and ensures the class and mixin use the same name to avoid confusion.
+
#10125: Deprecate inconsistent container variables for new @container-{screen-size} variables (e.g., use @container-sm instead of @container-tablet)
+
#10769: Deprecate .hide for .hidden so we don’t duplicate functionality.
We’ve been looking to move to the MIT license for quite some time, and today’s release takes us that much closer. Starting with v3.0.1, all new contributions to Bootstrap will be dual-licensed as Apache 2 and MIT. The intent is to move the entire project (including all prior contributions) to the MIT license in a future version (hopefully v3.1.0).
+
To make the change, every contributor to Bootstrap must consent to relicense their changes (since we have no CLA). We’re making excellent progress on that front with the community’s help and will address holdouts as they come up.
+
As a heads up, we’ve placed notices in the contributing guidelines and our project readme about the pending change and transition period.
+
It goes without saying that we don’t need to do this, but we want to make Bootstrap available to all communities who cannot currently use it due to licensing conflicts. Theoretically these communities could change their licenses, but when you step back and objectively look at the situation, it’s much easier for us to change. We hope you understand and stick it out with us as we make the move.
+
Growing the team
+
The Bootstrap core team doubled a few months ago when we added Chris and Julian to the project. They’ve helped manage issues, written some awesome code, and provided critical input in the direction of the project. As Bootstrap grows, so too must our core team, and we’re once again actively seeking new team members.
+
It’ll be a slow process, much like last time, but we need the help on several fronts to keep us shipping and iterating. In particular, we’ll be keeping an eye out for folks with top notch CSS and JavaScript skills.
+
Up next
+
We’re already tracking issues for a v3.0.2 release and its changes will be along the same lines as today’s release—bugs and docs. v3.1.0 will likely ship after that sometime with a few new features. As always, no dates have been set yet for any future releases.
This morning we pushed out a 2.3.2 patch release to address a single bug (see #7118) related to dropdowns and command/control clicking links in Firefox.
-
Work on Bootstrap 3 continues and we’re almost ready to do an official release candidate. We’ve addressed nearly all our chosen changes and are now at a point where we’re smoothing things out as much as possible. We’ll share more information on the RC and v3 in the coming weeks.
This morning we pushed out a 2.3.2 patch release to address a single bug (see #7118) related to dropdowns and command/control clicking links in Firefox.
+
Work on Bootstrap 3 continues and we’re almost ready to do an official release candidate. We’ve addressed nearly all our chosen changes and are now at a point where we’re smoothing things out as much as possible. We’ll share more information on the RC and v3 in the coming weeks.
Today we’re launching Bootstrap 2.2.2, another larger bugfix release that focuses mostly on CSS and documentation fixes, with a few key JS issues mixed in as well. Here’s the rundown on what’s new in this release:
-
-
Docs:
-
-
Assets (illustrations and examples) are now retina-ready.
-
Replaced Placehold.it with Holder.js, a client-side and retina-ready placeholder image tool.
-
-
-
Dropdowns: Temporary fix added for dropdowns on mobile to prevent them from closing early.
-
Popovers:
-
-
No longer inherits font-size: 0; when placed in button groups.
-
Arrows refactored to work in IE8, and use less code.
-
Plugin no longer inserts popover content into a <p>, but rather directly into .popover-content.
Hitting escape will place focus back on the <input>.
-
-
-
Print styles, from HTML5 Boilerplate, have been added.
-
-
Get a more complete list by viewing the 2.2.2 milestone on GitHub. Most of the issues not mentioned above are minor CSS tweaks and documentation typos.
We have a 2.2.3 release slated for further bugs and improvements we couldn’t tackle in this version, but most of our ongoing efforts are going to transition to development on 3.0.0. More details on that will come next week.
Today we’re launching Bootstrap 2.2.2, another larger bugfix release that focuses mostly on CSS and documentation fixes, with a few key JS issues mixed in as well. Here’s the rundown on what’s new in this release:
+
+
Docs:
+
+
Assets (illustrations and examples) are now retina-ready.
+
Replaced Placehold.it with Holder.js, a client-side and retina-ready placeholder image tool.
+
+
+
Dropdowns: Temporary fix added for dropdowns on mobile to prevent them from closing early.
+
Popovers:
+
+
No longer inherits font-size: 0; when placed in button groups.
+
Arrows refactored to work in IE8, and use less code.
+
Plugin no longer inserts popover content into a <p>, but rather directly into .popover-content.
Hitting escape will place focus back on the <input>.
+
+
+
Print styles, from HTML5 Boilerplate, have been added.
+
+
Get a more complete list by viewing the 2.2.2 milestone on GitHub. Most of the issues not mentioned above are minor CSS tweaks and documentation typos.
We have a 2.2.3 release slated for further bugs and improvements we couldn’t tackle in this version, but most of our ongoing efforts are going to transition to development on 3.0.0. More details on that will come next week.
Working at Twitter the last two and a half years has been incredible. Both Jacob and I have worked with a lot of amazing people on some pretty amazing projects, but nothing has been more enjoyable or rewarding than working on Bootstrap. Despite us leaving Twitter to go our separate ways, we’ll both be continuing our work on the project.
-
Bootstrap will remain a Twitter project on GitHub for the time being, but we’ve realized the project has grown beyond us and the Twitter brand. It’s a huge project playing a pretty awesome role in the web development industry, and we’re excited to see it continue to grow. To that end, we’ve begun working to move Bootstrap into its own open source organization. It will take time, but we’re dedicated to making it happen.
-
In the coming weeks, we’ll release another bugfix update (2.1.2) to address a few things, and then it’s full steam ahead on improving some key areas of the framework (modals, carousels, customizer, etc). We’ll share more info on those updates as plans take shape.
-
Until then, we have nothing but love for Twitter and the web development community. Thank you all so much for everything.
Working at Twitter the last two and a half years has been incredible. Both Jacob and I have worked with a lot of amazing people on some pretty amazing projects, but nothing has been more enjoyable or rewarding than working on Bootstrap. Despite us leaving Twitter to go our separate ways, we’ll both be continuing our work on the project.
+
Bootstrap will remain a Twitter project on GitHub for the time being, but we’ve realized the project has grown beyond us and the Twitter brand. It’s a huge project playing a pretty awesome role in the web development industry, and we’re excited to see it continue to grow. To that end, we’ve begun working to move Bootstrap into its own open source organization. It will take time, but we’re dedicated to making it happen.
+
In the coming weeks, we’ll release another bugfix update (2.1.2) to address a few things, and then it’s full steam ahead on improving some key areas of the framework (modals, carousels, customizer, etc). We’ll share more info on those updates as plans take shape.
+
Until then, we have nothing but love for Twitter and the web development community. Thank you all so much for everything.
Sorry about the database connection issues some of you may have seen in the last 24 hours. We’ve moved off WordPress for our blog and are now using GitHub pages and Jekyll. Jekyll is an amazingly lightweight and simple site generator from Tom Preston-Werner, cofounder of GitHub. Here’s why:
-
-
Instead of a database, we have flat Markdown files.
-
Instead of hosting code on servers from Media Temple or another hosting provider, everything is on GitHub.
-
The posting process is as simple as writing a post and pushing the gh-pages branch.
-
-
It’s simple, fast, and pain free. We love it and encourage you to check it out in the future. Stay tuned in the next two weeks or so for more information on our next release. Until then, enjoy the updated blog.
Sorry about the database connection issues some of you may have seen in the last 24 hours. We’ve moved off WordPress for our blog and are now using GitHub pages and Jekyll. Jekyll is an amazingly lightweight and simple site generator from Tom Preston-Werner, cofounder of GitHub. Here’s why:
+
+
Instead of a database, we have flat Markdown files.
+
Instead of hosting code on servers from Media Temple or another hosting provider, everything is on GitHub.
+
The posting process is as simple as writing a post and pushing the gh-pages branch.
+
+
It’s simple, fast, and pain free. We love it and encourage you to check it out in the future. Stay tuned in the next two weeks or so for more information on our next release. Until then, enjoy the updated blog.
This last week we’ve added two new developer tools to the Bootstrap tool chain and I wanted to take a minute to let you know a little bit more about what they are, why we’ve added them, and why it matters.
JSHint is an awesome community-driven linting tool, used to detect errors and potential problems in your JS, and to enforce coding conventions. It’s super flexible and can easily adapt to whichever coding guidelines and environment you expect your code to execute in.
-
As of 2.0.3, all JS (including tests) will be run through JSHint as a part of the build process.
-We’re hoping that this will both catch potentially unsafe syntax as well as encourage a convention around Bootstap’s JavaScript style.
-
To begin with, Bootstrap’s JS will use the following options (stored in a .jshintrc file in the js dir):
We hope this will make it a little easier for those looking to contribute to Bootstrap, and lessen the pain around pull requests with divergent styles. If you haven’t played with JSHint, you should definitely take a moment to check it out right now!
Recess is a project developed at Twitter to help support our internal style guide.
-
-
-
At it’s core, Recess is a linter, but with the added ability to compile and/or reformat your css/less files: normalizing whitespace, stripping 0 values, reordering properties, and any other safe stylistic optimizations it can find.
-
What this means is that instead of just telling you where you have problems, you can actually tell Recess to just go ahead and tidy your code up for you.
-
To begin with, we’re only using Recess in this manner — as a compiler for our Less (rather than the lessc compiler directly). This gives us strict control over the output of Bootstrap and let’s Mark and I really geekout, which we’re super excited about (we like things to be perfect… we’re nerds like that).
Eventually we’d like to try to roll these tools (along with our unit tests) into some sort of continuous integration service. At Twitter, we’re already using travis-ci on a number of our other projects (Hogan.js, Recess), so we may follow suit with Bootstrap soon. This will make it even easier for us to accept pull requests from the community, as we’ll be able to see all our tests passing! :)
-
Anyways — that’s all for now. As always, if you have any questions or feedback, let us know! thanks!
This last week we’ve added two new developer tools to the Bootstrap tool chain and I wanted to take a minute to let you know a little bit more about what they are, why we’ve added them, and why it matters.
JSHint is an awesome community-driven linting tool, used to detect errors and potential problems in your JS, and to enforce coding conventions. It’s super flexible and can easily adapt to whichever coding guidelines and environment you expect your code to execute in.
+
As of 2.0.3, all JS (including tests) will be run through JSHint as a part of the build process.
+We’re hoping that this will both catch potentially unsafe syntax as well as encourage a convention around Bootstap’s JavaScript style.
+
To begin with, Bootstrap’s JS will use the following options (stored in a .jshintrc file in the js dir):
We hope this will make it a little easier for those looking to contribute to Bootstrap, and lessen the pain around pull requests with divergent styles. If you haven’t played with JSHint, you should definitely take a moment to check it out right now!
Recess is a project developed at Twitter to help support our internal style guide.
+
+
+
At it’s core, Recess is a linter, but with the added ability to compile and/or reformat your css/less files: normalizing whitespace, stripping 0 values, reordering properties, and any other safe stylistic optimizations it can find.
+
What this means is that instead of just telling you where you have problems, you can actually tell Recess to just go ahead and tidy your code up for you.
+
To begin with, we’re only using Recess in this manner — as a compiler for our Less (rather than the lessc compiler directly). This gives us strict control over the output of Bootstrap and let’s Mark and I really geekout, which we’re super excited about (we like things to be perfect… we’re nerds like that).
Eventually we’d like to try to roll these tools (along with our unit tests) into some sort of continuous integration service. At Twitter, we’re already using travis-ci on a number of our other projects (Hogan.js, Recess), so we may follow suit with Bootstrap soon. This will make it even easier for us to accept pull requests from the community, as we’ll be able to see all our tests passing! :)
+
Anyways — that’s all for now. As always, if you have any questions or feedback, let us know! thanks!
We’ve been mum on the next few releases for Bootstrap the last couple weeks, and with good reason: both Jacob and I have been super busy at work and we’re uncertain of what features to add next. That said, we know we have some bugs and docs fixes to make and know we can slip in a few small features if time allows. I’ve updated the roadmap to reflect the last two releases and a general outline for the next two.
-
But, what’s next?
-
2.0.3
-
To start, we’ll take a good hard look at the docs and current components to get a strong base and iron out additional bugs we introduced in 2.0.2. This release will not include any new features at all. Key bugs to fix include the static navbar regression and tabbed content alignment, but you can see a more thorough list on the 2.0.3 milestone.
-
2.1.0
-
After 2.0.3, we have a small feature and (as required) bugfix release to push out. So far, the only features we’re planning on adding include an official addition of the subnav, Growl-style notifications, and an OOCSS-style media component. The first two are some of oldest feature requests, and honestly are fairly easy to add and document compared to some of the other requests.
-
We haven’t slated anything else because of other time commitments, but we’re open to hearing your feedback if you have top requests. Feel free to weigh in on Twitter or on GitHub.
-
Timing
-
We don’t have specific dates in mind, but we know we want 2.0.3 out by the end of the month to address those key bugs. 2.1 will follow, but not for at least a month or two after 2.0.3.
We’ve been mum on the next few releases for Bootstrap the last couple weeks, and with good reason: both Jacob and I have been super busy at work and we’re uncertain of what features to add next. That said, we know we have some bugs and docs fixes to make and know we can slip in a few small features if time allows. I’ve updated the roadmap to reflect the last two releases and a general outline for the next two.
+
But, what’s next?
+
2.0.3
+
To start, we’ll take a good hard look at the docs and current components to get a strong base and iron out additional bugs we introduced in 2.0.2. This release will not include any new features at all. Key bugs to fix include the static navbar regression and tabbed content alignment, but you can see a more thorough list on the 2.0.3 milestone.
+
2.1.0
+
After 2.0.3, we have a small feature and (as required) bugfix release to push out. So far, the only features we’re planning on adding include an official addition of the subnav, Growl-style notifications, and an OOCSS-style media component. The first two are some of oldest feature requests, and honestly are fairly easy to add and document compared to some of the other requests.
+
We haven’t slated anything else because of other time commitments, but we’re open to hearing your feedback if you have top requests. Feel free to weigh in on Twitter or on GitHub.
+
Timing
+
We don’t have specific dates in mind, but we know we want 2.0.3 out by the end of the month to address those key bugs. 2.1 will follow, but not for at least a month or two after 2.0.3.
Welcome one and all to the new, official Twitter Bootstrap blog. From now on, Jacob and I will be posting info on new releases, documentation changes, great examples of folks using Bootstrap, and more. Stay tuned for our first post on the next two updates for the project.
Bootstrap v5.2.1 is here with fixes from our latest minor release, v5.2. As a patch release, these changes are limited to bug fixes, documentation updates, and some dependency updates.
+
We’ve also continued to iterate on a few other projects to help folks get up and running with Bootstrap with npm, other JS frameworks, and various build tools. Keep reading to learn more.
+
Key changes
+
We’ve updated our calc() functions to work around an apparent bug in postcss-values-parser that prevented our source Sass files from compiling properly when building with React and PostCSS. The fix was to reverse the order of our multiplication inside calc() functions. Be aware you may need to make similar modifications depending on your own customizations.
+
We’ve also addressed some longstanding issues around button focus and active styling, in particular for checkbox and radio buttons. On mobile devices, input-based buttons have trouble shedding their focus styles. This has been resolved in v5.2.1 with a change from :focus to :focus-visible for our .btns. Now, checkbox and radio buttons no longer change their background-color on :focus-visible and they receive no :hover styling. Regular .btns still have their familiar hover and focus styles.
+
We debated not including the button focus change in v5.2.1, but felt it was important enough to close several bugs. Let us know what you think and we’ll continue to refine our implementation.
+
Highlights
+
In addition to the changes above, we’ve fixed bugs across several components:
+
+
Accordion
+
+
Update color value to use the $accordion-button-color Sass variable instead of our color contrast function
+
+
+
Buttons
+
+
Added a transparent default hover border color CSS variable for buttons to fix a visual regression
+
.btn-link no longer has a gradient when $enable-gradients is set to true
+
+
+
Forms
+
+
Input groups have updated z-index values to ensure proper rendering of validated form fields
+
Floating labels now reset their text-align to ensure consistent styling
+
+
+
List Groups
+
+
Horizontal list groups with only one child now render the correct border-radius
+
Modified the list-group-item selectors to better support nested imports of Bootstrap’s CSS
+
+
+
Modals
+
+
Updated event listeners to ignore clicks on scrollbar clicks, clicks that start inside .modal-dialog but end outside it, and respond to clicks that start and end outside .modal-dialog
Reverted some tooltip plugin updates to prevent issues with selector, dynamic content, and disposed tooltips using title
+
Fixed trigger: "manual" showing and immediately hiding when calling toggle()
+
+
+
+
Dependencies
+
+
Updated Autoprefixer to fix warnings of the color-adjust property (thanks to @julien-deramond on our team for reporting an issue upstream here)
+
+
Docs
+
+
Searching our docs on mobile has been improved with the search field now always visible on responsive, narrow viewports
+
Removed links to and mentions of Slack from across the codebase, as we intend to shutter Slack in favor of GitHub Discussions
+
Reintroduced proper outline styles for docs code samples and buttons when :not(:focus-visible)
+
+
Farewell, Slack!
+
As mentioned over a month ago, we made the decision to close down our community Slack channel. Slack isn’t great at managing a large scale community and it’s prohibitively expensive as well for a community the size of ours (the Slack was over 45,000 people!). Instead of using Slack or similar tool, we’re encouraging folks to use our Discussions tab on GitHub.
Make sure to checkout (pun intended!) our latest project, the twbs/examples repository! The examples project includes functional demos for all sorts of environments and JS frameworks, with more planned! You can even open every example in StackBlitz and edit them in the browser.
We’ve shipped a v2.0.0 update to the twbs/bootstrap-npm-starter project. This release includes Bootstrap v4.6.2, Bootstrap Icons v1.9.1, a new live reload feature for local development, and several dependency updates. This project will remain dedicated to Bootstrap 4 while our twbs/examples repo will focus on v5 and future major releases.
The Figma file is now published to the Figma Community! It’s the same Bootstrap Icons Figma file you’ve seen from previous releases, just a little more accessible to those using the app.
The Figma file is now published to the Figma Community! It’s the same Bootstrap Icons Figma file you’ve seen from previous releases, just a little more accessible to those using the app.
Bootstrap Icons v1.6.0 adds over 30 new icons, adds official Composer support, includes a new .scss stylesheet for the icon font, plus some other enhancements and bug fixes. Keep reading to see what’s new!
-
1,400+ icons
-
We’ve officially passed 1,400 glyphs in Bootstrap Icons with this release—woohoo! Seems utterly insane to me that the project has come this far and there are still so many more icons to include.
-
-
-
We have a few dozen new and updated icons in this release, including:
-
-
New brand icons for Apple, Behance, Dribbble, Line, Medium, Microsoft, PayPal, Pinterest, Signal, Snapchat, Spotify, Stack Overflow, Strava, Vimeo, Windows, and WordPress
-
Two new easel variations
-
New fingerprint icon
-
New magic stick
-
New people variations for rolodex, workspace, and video chat
-
New webcam icons
-
New radioactive icon
-
New fan icon
-
New hypnotize icon
-
New yin yang icon
-
New activity/pulse icon
-
Updated large dash, plus, slash, x, i, ?, !, and check icons to have a thinner stroke that better matches other icons
-
Updated lamp icons
-
Updated graph-up and graph-down icons, with the previous ones being renamed to graph-up-arrow and graph-down-arrow
-
-
New features
-
We’ve added a handful of new features and enhancements to how you can use Bootstrap Icons in this release:
-
-
-
Added Composer support with automatic publishing to Packagist. See the official package for more information.
-
-
-
Added new bootstrap-icons.scss stylesheet for the icon font. This includes font name and path variables, plus a Sass map of icon names and unicode values.
-
-
-
Added new .bi CSS selector to the icon font ruleset (in addition to the attribute selectors we had through v1.5.0) to allow for easier @extending of icon styles. This has also been reflected in the new .scss stylesheet.
-
-
-
Our next minor release will continue to see improvements to our icon permalink pages, adding more options for copying and pasting our icons. If you have other suggestions, please don’t hesitate to open a new issue!
-
Bug fixes
-
We’ve fixed a few glitches with existing icons in this release:
-
-
droplet-fill now renders correctly thanks to an updated fill rule
-
lamp and lamp-fill now look more like lamps and less like toilets 😅
-
coin now renders correctly thanks to an updated fill rule
-
cloud now renders correctly thanks to an updated fill rule
-
textarea-resize is no longer incorrectly placed in the viewBox
-
-
Found another bug, or have a suggestion? Check out the issue tracker and open an issue if you don’t see one already opened.
The Figma file is now published to the Figma Community! It’s the same Bootstrap Icons Figma file you’ve seen from previous releases, just a little more accessible to those using the app.
Bootstrap Icons v1.6.0 adds over 30 new icons, adds official Composer support, includes a new .scss stylesheet for the icon font, plus some other enhancements and bug fixes. Keep reading to see what’s new!
+
1,400+ icons
+
We’ve officially passed 1,400 glyphs in Bootstrap Icons with this release—woohoo! Seems utterly insane to me that the project has come this far and there are still so many more icons to include.
+
+
+
We have a few dozen new and updated icons in this release, including:
+
+
New brand icons for Apple, Behance, Dribbble, Line, Medium, Microsoft, PayPal, Pinterest, Signal, Snapchat, Spotify, Stack Overflow, Strava, Vimeo, Windows, and WordPress
+
Two new easel variations
+
New fingerprint icon
+
New magic stick
+
New people variations for rolodex, workspace, and video chat
+
New webcam icons
+
New radioactive icon
+
New fan icon
+
New hypnotize icon
+
New yin yang icon
+
New activity/pulse icon
+
Updated large dash, plus, slash, x, i, ?, !, and check icons to have a thinner stroke that better matches other icons
+
Updated lamp icons
+
Updated graph-up and graph-down icons, with the previous ones being renamed to graph-up-arrow and graph-down-arrow
+
+
New features
+
We’ve added a handful of new features and enhancements to how you can use Bootstrap Icons in this release:
+
+
+
Added Composer support with automatic publishing to Packagist. See the official package for more information.
+
+
+
Added new bootstrap-icons.scss stylesheet for the icon font. This includes font name and path variables, plus a Sass map of icon names and unicode values.
+
+
+
Added new .bi CSS selector to the icon font ruleset (in addition to the attribute selectors we had through v1.5.0) to allow for easier @extending of icon styles. This has also been reflected in the new .scss stylesheet.
+
+
+
Our next minor release will continue to see improvements to our icon permalink pages, adding more options for copying and pasting our icons. If you have other suggestions, please don’t hesitate to open a new issue!
+
Bug fixes
+
We’ve fixed a few glitches with existing icons in this release:
+
+
droplet-fill now renders correctly thanks to an updated fill rule
+
lamp and lamp-fill now look more like lamps and less like toilets 😅
+
coin now renders correctly thanks to an updated fill rule
+
cloud now renders correctly thanks to an updated fill rule
+
textarea-resize is no longer incorrectly placed in the viewBox
+
+
Found another bug, or have a suggestion? Check out the issue tracker and open an issue if you don’t see one already opened.
The Figma file is now published to the Figma Community! It’s the same Bootstrap Icons Figma file you’ve seen from previous releases, just a little more accessible to those using the app.
Our latest patch release has arrived to improve our JavaScript plugins, address the / deprecation in Dart Sass, fix a few CSS bugs, and make some documentation improvements.
-
Sass division
-
One of the biggest fixes in Bootstrap v5.0.2 patches the deprecation of / for performing division in Sass. The Dart Sass team deprecated it due to the use of / characters in actual CSS (e.g., separating background values). The bad news was this shipped with deprecation notices, which in our case heavily polluted the build process for everyone. Our potential solutions included:
-
-
Ignore it entirely and silence the deprecation warnings
-
Drop implicit support for LibSass and use the Dart Sass math module
-
Figure out a custom fix to keep the widest possible Sass support
-
-
We chose the third option—keeping support for both LibSass and Dart Sass, even though the former is deprecated. There are many projects out there that simply haven’t or cannot update to Dart Sass (including Hugo, which we use to build our docs).
-
Our solution meant rolling a custom divide() function and replacing division with multiplication wherever possible. We wanted to limit the use of a custom function, so the situations where we used $value / 2 were replaced with $value * .5. This custom function has also been added to the RFS project in a new release. While the precision in our compiled CSS has been reduced by two decimal places, the output remains otherwise unchanged.
-
If you have any ideas or suggestions on further improvements, please don’t hesitate to open an issue.
-
Highlights
-
Here are some highlights from the changelog.
-
CSS
-
-
Fixed deprecation warnings in Sass for / division. Replaced most / division with multiplication and added a custom divide() function to avoid adding Dart Sass modules (as this would negate the usage of LibSass).
-
Individual .col-* grid classes can now override .row-cols.
-
Updated line-height for floating forms to fix cut-off select menu text.
-
Added missing transition to .form-select.
-
Fixed .dropdowns-menu-* position in RTL.
-
Decoupled --bs-table-bg and --bs-table-accent-bg to separate table accent highlights.
-
Improved support for complex expressions in add() and subtract() functions.
-
Fixed horizontal padding for select elements in Firefox.
-
Updated border color for popover header to match the outer border.
-
Fixed offcanvas header alignment for RTL.
-
-
JavaScript
-
-
Popovers now remove titles or content when they’re empty instead of returning empty HTML elements.
-
Dropdown items are now automatically selected when using arrow keys.
-
We now register only one DOMContentLoaded event listener in onDOMContentLoaded utility function.
-
Fixed arrow keys breaking animation when the carousel sliding.
-
Fixed handling of transitioned events dispatched by nested elements (e.g., modals didn’t transition when clicking buttons).
-
Fixed backdrop errors with stale body cause by unnecessary default and removeChild.
-
Fixed issue where the show.bs.modal event with the .fade class prevented modals from being displayed again.
-
Fixed isVisible false positives.
-
Added getOrCreateInstance method in our base component that is applied to all components.
-
-
Docs
-
-
Documented how to make utilities responsive using the API. Also added !important to the sample output CSS and mentioned the $enable-important-utilities global setting.
-
Added a mention of the breakpoint mixins changes from v4 to the migration guide.
-
Added a new example of positioned badges to the docs.
-
Clarified variable overrides in the Customizing > Sass page.
Our latest patch release has arrived to improve our JavaScript plugins, address the / deprecation in Dart Sass, fix a few CSS bugs, and make some documentation improvements.
+
Sass division
+
One of the biggest fixes in Bootstrap v5.0.2 patches the deprecation of / for performing division in Sass. The Dart Sass team deprecated it due to the use of / characters in actual CSS (e.g., separating background values). The bad news was this shipped with deprecation notices, which in our case heavily polluted the build process for everyone. Our potential solutions included:
+
+
Ignore it entirely and silence the deprecation warnings
+
Drop implicit support for LibSass and use the Dart Sass math module
+
Figure out a custom fix to keep the widest possible Sass support
+
+
We chose the third option—keeping support for both LibSass and Dart Sass, even though the former is deprecated. There are many projects out there that simply haven’t or cannot update to Dart Sass (including Hugo, which we use to build our docs).
+
Our solution meant rolling a custom divide() function and replacing division with multiplication wherever possible. We wanted to limit the use of a custom function, so the situations where we used $value / 2 were replaced with $value * .5. This custom function has also been added to the RFS project in a new release. While the precision in our compiled CSS has been reduced by two decimal places, the output remains otherwise unchanged.
+
If you have any ideas or suggestions on further improvements, please don’t hesitate to open an issue.
+
Highlights
+
Here are some highlights from the changelog.
+
CSS
+
+
Fixed deprecation warnings in Sass for / division. Replaced most / division with multiplication and added a custom divide() function to avoid adding Dart Sass modules (as this would negate the usage of LibSass).
+
Individual .col-* grid classes can now override .row-cols.
+
Updated line-height for floating forms to fix cut-off select menu text.
+
Added missing transition to .form-select.
+
Fixed .dropdowns-menu-* position in RTL.
+
Decoupled --bs-table-bg and --bs-table-accent-bg to separate table accent highlights.
+
Improved support for complex expressions in add() and subtract() functions.
+
Fixed horizontal padding for select elements in Firefox.
+
Updated border color for popover header to match the outer border.
+
Fixed offcanvas header alignment for RTL.
+
+
JavaScript
+
+
Popovers now remove titles or content when they’re empty instead of returning empty HTML elements.
+
Dropdown items are now automatically selected when using arrow keys.
+
We now register only one DOMContentLoaded event listener in onDOMContentLoaded utility function.
+
Fixed arrow keys breaking animation when the carousel sliding.
+
Fixed handling of transitioned events dispatched by nested elements (e.g., modals didn’t transition when clicking buttons).
+
Fixed backdrop errors with stale body cause by unnecessary default and removeChild.
+
Fixed issue where the show.bs.modal event with the .fade class prevented modals from being displayed again.
+
Fixed isVisible false positives.
+
Added getOrCreateInstance method in our base component that is applied to all components.
+
+
Docs
+
+
Documented how to make utilities responsive using the API. Also added !important to the sample output CSS and mentioned the $enable-important-utilities global setting.
+
Added a mention of the breakpoint mixins changes from v4 to the migration guide.
+
Added a new example of positioned badges to the docs.
+
Clarified variable overrides in the Customizing > Sass page.
Our final beta for Bootstrap 5 has come with some amazing new changes (including a new component!), documentation updates, and more. We’ve also fixed some important bugs since our last release, in particular with our dependencies. Next up is our stable release!
Thanks to our newest team member, @GeoSot, we have a brand new component to unveil in Beta 3—introducing offcanvas! Built on and sharing fundamental pieces of our modals, the offcanvas comes with configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the left, right, and bottom of the viewport. Configure these options with data attributes or via the JavaScript APIs.
-
We’re excited about iterating on the new offcanvas component and building additional examples and demos with you. Please share any feedback on an issue or pull request as you start to use it in your projects.
Our examples have been updated in Beta 3 as well. We’ve added four brand new snippet-heavy examples and refreshed a few others. New with this release are several snippets for headers, heroes, features, and sidebars. These new snippets will continue to grow with new additions over time, showing just how fun and easy it is to build with Bootstrap.
We’ve also updated our starter template with a refreshed, simplified design and more resource links. We’ll also incorporate this new look and feel into our npm starter project project, and eventually add a Parcel starter project.
-
Lastly, we’ve updated our pricing, checkout, and sign-in examples. We’ve also added a new jumbotron example to show you how to create your own jumbotron since we removed it in Bootstrap 5.
Since our last release, we’ve added a new section to nearly every component and utility documentation page for the source Sass code. Where appropriate, we now list Sass variables, maps, loops, and animation keyframes. These are directly linked from our source files, so whenever we ship new code, they’ll automatically be up-to-date.
-
And more!
-
Some highlights from the rest of our documentation updates and bugfixes include:
Updated .browserslistrc to drop Android and add Safari/iOS 12 as the new minimum version (completing our two latest major releases guideline for supported browsers).
A huge thanks to another new team member, @rohit2sharma95, for the dozens of pull requests, bug fixes, and code reviews for our JavaScript plugins.
-
Get the release
-
Head to https://getbootstrap.com to explore the new release. We’ve also published this updated as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.
-
npm i bootstrap@next
-
What’s next
-
Looking ahead, we’re eyeing our first stable release for Bootstrap 5! But we also have some other releases on the horizon:
As mentioned in our last release, after v5 goes stable, we’ll look to add some of the awesome features we’ve built up in our backlog. Check out the v5.1 project for an idea of what’s being planned. Feel free to open issues or pull requests if you have any additional ideas!
Our final beta for Bootstrap 5 has come with some amazing new changes (including a new component!), documentation updates, and more. We’ve also fixed some important bugs since our last release, in particular with our dependencies. Next up is our stable release!
Thanks to our newest team member, @GeoSot, we have a brand new component to unveil in Beta 3—introducing offcanvas! Built on and sharing fundamental pieces of our modals, the offcanvas comes with configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the left, right, and bottom of the viewport. Configure these options with data attributes or via the JavaScript APIs.
+
We’re excited about iterating on the new offcanvas component and building additional examples and demos with you. Please share any feedback on an issue or pull request as you start to use it in your projects.
Our examples have been updated in Beta 3 as well. We’ve added four brand new snippet-heavy examples and refreshed a few others. New with this release are several snippets for headers, heroes, features, and sidebars. These new snippets will continue to grow with new additions over time, showing just how fun and easy it is to build with Bootstrap.
We’ve also updated our starter template with a refreshed, simplified design and more resource links. We’ll also incorporate this new look and feel into our npm starter project project, and eventually add a Parcel starter project.
+
Lastly, we’ve updated our pricing, checkout, and sign-in examples. We’ve also added a new jumbotron example to show you how to create your own jumbotron since we removed it in Bootstrap 5.
Since our last release, we’ve added a new section to nearly every component and utility documentation page for the source Sass code. Where appropriate, we now list Sass variables, maps, loops, and animation keyframes. These are directly linked from our source files, so whenever we ship new code, they’ll automatically be up-to-date.
+
And more!
+
Some highlights from the rest of our documentation updates and bugfixes include:
Updated .browserslistrc to drop Android and add Safari/iOS 12 as the new minimum version (completing our two latest major releases guideline for supported browsers).
A huge thanks to another new team member, @rohit2sharma95, for the dozens of pull requests, bug fixes, and code reviews for our JavaScript plugins.
+
Get the release
+
Head to https://getbootstrap.com to explore the new release. We’ve also published this updated as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.
+
npm i bootstrap@next
+
What’s next
+
Looking ahead, we’re eyeing our first stable release for Bootstrap 5! But we also have some other releases on the horizon:
As mentioned in our last release, after v5 goes stable, we’ll look to add some of the awesome features we’ve built up in our backlog. Check out the v5.1 project for an idea of what’s being planned. Feel free to open issues or pull requests if you have any additional ideas!
We’re ironing out the kinks in our new font files with Bootstrap Icons v1.2.2! We went back to the Figma file and ironed out all the fill-rule details to ensure our SVGs translated into font files properly.
-
We also snuck in a few bug fixes to existing icons, docs, and some slight visual improvements to some existing icons. Get the details below!
-
Font files
-
Our icons fonts are (fingers crossed!) free of visual glitches that made so many unusable across Windows devices. For some reason macOS and iOS had no problems, but Windows butchered the font files. Turns out this was a result of inconsistent fill-rule values in our icons, and some font formats and renderers only support a non-zero fill rule. We revisited nearly every icon and got it all sorted out.
-
-
-
Massive shoutout to the Figma Fill Rule Editor plugin that made this relatively quick and painless to update. You can even see in the plugin’s image below how this rule affects rendering of SVGs.
A few icons got touched up with the work for our font files to clean up paths and make them more visually pleasing.
-
-
Locks are a little more legible—they’re taller and narrower.
-
Laptops now have a half pixel gap between their base and screen, making them look a little sleeker.
-
Shields are 1px taller now, with their inner icons now raised 1px as well. No reason to make them not take up the full viewBox.
-
Stopwatch icons look more like actual stopwatches with separate start/stop and lap buttons.
-
The bricks icon has its missing grout line restored.
-
Renamed patch fill icons to fix typos in their file names (fll to fill).
-
-
Have some other refinements we should consider? Open an issue to tell us about it.
-
Last but not least, we ironed out some docs issues. Our navbar is fully functional and inline with the v5 beta site. We also added new aliases for icon filtering on homepage.
We’re ironing out the kinks in our new font files with Bootstrap Icons v1.2.2! We went back to the Figma file and ironed out all the fill-rule details to ensure our SVGs translated into font files properly.
+
We also snuck in a few bug fixes to existing icons, docs, and some slight visual improvements to some existing icons. Get the details below!
+
Font files
+
Our icons fonts are (fingers crossed!) free of visual glitches that made so many unusable across Windows devices. For some reason macOS and iOS had no problems, but Windows butchered the font files. Turns out this was a result of inconsistent fill-rule values in our icons, and some font formats and renderers only support a non-zero fill rule. We revisited nearly every icon and got it all sorted out.
+
+
+
Massive shoutout to the Figma Fill Rule Editor plugin that made this relatively quick and painless to update. You can even see in the plugin’s image below how this rule affects rendering of SVGs.
A few icons got touched up with the work for our font files to clean up paths and make them more visually pleasing.
+
+
Locks are a little more legible—they’re taller and narrower.
+
Laptops now have a half pixel gap between their base and screen, making them look a little sleeker.
+
Shields are 1px taller now, with their inner icons now raised 1px as well. No reason to make them not take up the full viewBox.
+
Stopwatch icons look more like actual stopwatches with separate start/stop and lap buttons.
+
The bricks icon has its missing grout line restored.
+
Renamed patch fill icons to fix typos in their file names (fll to fill).
+
+
Have some other refinements we should consider? Open an issue to tell us about it.
+
Last but not least, we ironed out some docs issues. Our navbar is fully functional and inline with the v5 beta site. We also added new aliases for icon filtering on homepage.
Our first minor release for Bootstrap Icons is here, with over 30 new icons and a few bug fixes. New icons include fill variations for our emoji icons, including a few new emojis, and several new file type icons.
-
30+ new icons
-
Here’s a look at our file and emoji icons as of v1.1.0. New in this release for emojis are the wink and heart eyes, along with fill versions for the full set. In addition, we’ve added icons for Word, Excel, PowerPoint, and a general bar chart file type.
-
-
-
-
-
Changes
-
Here’s a more complete look at what’s changed in this release.
-
-
Fixed #415: Properly name grip-horizontal and grip-vertical
Our first minor release for Bootstrap Icons is here, with over 30 new icons and a few bug fixes. New icons include fill variations for our emoji icons, including a few new emojis, and several new file type icons.
+
30+ new icons
+
Here’s a look at our file and emoji icons as of v1.1.0. New in this release for emojis are the wink and heart eyes, along with fill versions for the full set. In addition, we’ve added icons for Word, Excel, PowerPoint, and a general bar chart file type.
+
+
+
+
+
Changes
+
Here’s a more complete look at what’s changed in this release.
+
+
Fixed #415: Properly name grip-horizontal and grip-vertical
Similarly, v4.5.1 already removed the min-width: 0 on .cols. This change was introduced to fix <pre> elements not fitting to a column. This an issue with how flexbox works, where a flex container cannot shrink beyond its children’s content. Rather than force this on every column, we recommend you apply this as needed with a custom utility. (We’ll also aim to add this as a new utility in v5.)
We know this kind of hiccups set you back, so please accept our apologies for the bugs. Be sure to read the referenced pull requests above to get up to speed on what happened and how we fixed it. This CodePen demo has all the known grid issues and fixes implemented in it.
We’re shipping our latest patch release today to fix a handful of bugs in Bootstrap 4. While our focus remains on v5’s second alpha release (coming in the next couple weeks), we want to keep v4 as stable and reliable as possible.
-
Our next couple releases for Bootstrap 4 will continue this trend, focusing on bug fixes, documentation improvements, and (later on) features that help bridge the gap to v5.
#30936: Add role="dialog" in modals via JavaScript
-
#30992: Avoid preventing input event onclick
-
#31155: Clear timeout before showing the toast
-
-
Build
-
-
#30797: Fix release script docs
-
#31011: Updated Babel config
-
#31296: Update to Ruby 2.7 and Bundler 2.x
-
-
Docs
-
-
#30809: Update docs callout for responsive SVG images
-
#30813: Mention Bootstrap Icons in extend/icons.md page
-
#30896: Improve wording on Downloads page
-
#30897: Prevent skip links from overlapping header in docs
-
#30973: Update some nav examples by removing .nav-item from .nav-link to be more consistent
-
#31070: Fix some broken examples and typos
-
#31135: Move color utility callouts to start of page
-
#31234: Clean up docs forms for accessibility
-
#31344: Mention toasts in the components requiring JavaScript page
-
-
Head to the v4.5 docs to see the latest in action. The full release has been published to npm and will soon appear on the BootstrapCDN and Rubygems.
-
Next up
-
We’ll be shipping our second alpha of v5 in the next few weeks. We’ve been a little delayed as we focus on ourselves during these unprecedented times and have all been taking a bit of time off here and there. We’re sorry to keep y’all waiting on v5 and hope you can understand.
-
After v5’s second alpha, we’ll be targeting a final alpha before our first beta, as well as more patches for v4. We’ll also be releasing the Bootstrap Icons soon. So stay tuned for more!
+
+ @mdo
+
+
+
+September 12, 2023
+
-
-
-
+ alt="" width="32" height="32" loading="lazy">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-