Bootstrap Blog https://blog.getbootstrap.com/ Recent content on Bootstrap Blog Hugo en Mon, 25 Aug 2025 15:22:00 +0000 Bootstrap 5.3.8 https://blog.getbootstrap.com/2025/08/25/bootstrap-5-3-8/ Mon, 25 Aug 2025 15:22:00 +0000 https://blog.getbootstrap.com/2025/08/25/bootstrap-5-3-8/ <p>Bootstrap v5.3.8 is out with a reversion for a dropdown focus bug, some CSS updates, and several docs updates. The plan is for this to be the last patch release before v5.4.0 drops.</p> <p>To start, there&rsquo;s a brief update on Bootstrap Themes, with more communication to come. The team has decided to sunset <a href="https://themes.getbootstrap.com">https://themes.getbootstrap.com</a>. As such, we&rsquo;ve removed links to and mentions of the Themes site from our docs in this release to start. Stay tuned for more info.</p> GitHub Secure Open Source Fund https://blog.getbootstrap.com/2025/08/10/github-secure-open-source-fund/ Sun, 10 Aug 2025 08:40:00 +0000 https://blog.getbootstrap.com/2025/08/10/github-secure-open-source-fund/ <p><a href="https://github.com/mdo">Mark</a> and <a href="https://github.com/julien-deramond/">Julien</a> recently represented Bootstrap in the second round of the <a href="https://github.blog/open-source/maintainers/securing-the-supply-chain-at-scale-starting-with-71-important-open-source-projects/">GitHub Secure Open Source Fund</a> this past June. The program is designed to programmatically and financially improve the security and sustainability of open source projects, and we were honored to be a part of it.</p> <p>GitHub brought together open source maintainers, security experts, and ecosystem partners for an intensive, hands-on learning experience. Throughout three weeks, we had a few days of mixed expert-led presentations, collaborative workshops, and dedicated office hours with security specialists. Between sessions, we had homework: concrete, project-specific actions to immediately strengthen our codebase, workflows, and processes.</p> Bootstrap 5.3.7 https://blog.getbootstrap.com/2025/06/17/bootstrap-5-3-7/ Tue, 17 Jun 2025 15:22:00 +0000 https://blog.getbootstrap.com/2025/06/17/bootstrap-5-3-7/ <p>Bootstrap v5.3.7 was just released with some follow-up fixes from our migration to Astro, plus a handful of small fixes. We expect to have another patch release shortly due to at least one recent regression, so stay tuned for that.</p> <p>In the mean time, here are some highlights!</p> <h3 id="docs">Docs</h3> <ul> <li>Fixed broken <strong>&ldquo;View on GitHub&rdquo;</strong> URLs</li> <li>Corrected HTML <code>&lt;head&gt;</code> content generated by the <strong>&ldquo;Download examples&rdquo;</strong> button</li> <li>Refined sanitizer documentation for clarity and completeness</li> <li>Improved accessibility in the <strong>&ldquo;On this page&rdquo;</strong> table of contents and section heading anchor links</li> <li>Relocated ads to the right sidebar to minimize content reflow</li> <li>Added a new section on the <strong>Download</strong> page for the <em>Intelissence</em> extension</li> <li>Clarified the <strong>&ldquo;Via JavaScript&rdquo;</strong> usage example for <em>Accordion Collapse</em></li> <li>Made internal documentation improvements to support future maintenance <em>(no visible user impact)</em></li> <li>Mention CDN <code>integrity</code> and <code>crossorigin</code> attributes in introduction page</li> <li>Enhance floating labels <code>placeholder</code> usage description</li> <li>Add example of showing dynamic range value with output</li> </ul> <h3 id="sass">Sass</h3> <ul> <li>Consolidated multiple <code>'none'</code> values in the <code>box-shadow</code> Sass mixin for cleaner output</li> </ul> <h3 id="javascript">JavaScript</h3> <ul> <li>Fixed popover and tooltip behavior with a <code>trigger: &quot;hover click&quot;</code> configuration</li> </ul> <h3 id="build-tools">Build tools</h3> <ul> <li>Added recommended <strong>VSCode extensions and settings</strong> configuration to the repository</li> </ul> <p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.7">Read the GitHub v5.3.7 changelog</a> for a full list of changes (including a ton of documentation and dependency updates) in this release.</p> Bootstrap Icons v1.12 and v1.13 https://blog.getbootstrap.com/2025/05/09/bootstrap-icons-1-12-1-13/ Fri, 09 May 2025 00:01:00 +0000 https://blog.getbootstrap.com/2025/05/09/bootstrap-icons-1-12-1-13/ <p>In the last few weeks, a handful of new <a href="https://icons.getbootstrap.com">Bootstrap Icons</a> releases have gone out. Here&rsquo;s a recap of what&rsquo;s new in our v1.12.x and v1.13.x releases so far.</p> <h2 id="v112">v1.12</h2> <p>v1.12.0 added a single icon, mostly because people wouldn&rsquo;t stop asking for it haha, and v1.12.1 added a page to the docs for it. That was all for <a href="https://icons.getbootstrap.com/icons/bluesky/">Bluesky</a>.</p> <h2 id="v1130-and-v1131">v1.13.0 and v1.13.1</h2> <p>New in v1.13.0 are several icons, some guidance around how to use Sass files with Vite, and a few little bug fixes to some fill rules. v1.13.1 was a hotfix to resolve an issue with search on our docs.</p> Bootstrap 5.3.6 https://blog.getbootstrap.com/2025/05/05/bootstrap-5-3-6/ Mon, 05 May 2025 15:22:00 +0000 https://blog.getbootstrap.com/2025/05/05/bootstrap-5-3-6/ <p>Bootstrap v5.3.6 was just released to migrate our documentation to Astro from Hugo. Also included are a few bug fixes and documentation updates.</p> <p>Here are some highlights:</p> <ul> <li>Ported the docs from Hugo to Astro for our own sanity!</li> <li>Added usage docs for Accordion JavaScript</li> <li>Prevent <code>.visually-hidden</code> overflowing children to become focusable</li> <li>Limit <code>.card-group</code> selectors to immediate children to fix some inheritance issues</li> </ul> <p>Most importantly, a massive thank you and shoutout to Bootstrap maintainer <a href="https://github.com/julien-deramond">Julien</a> for all the work that went into our Astro migration. <a href="https://www.reddit.com/r/interestingasfuck/comments/1g3db1e/the_blue_marlin_the_ship_that_ships_shipping_ships/">What a massive ship.</a></p> Bootstrap 5.3.5 https://blog.getbootstrap.com/2025/04/04/bootstrap-5-3-5/ Fri, 04 Apr 2025 15:22:00 +0000 https://blog.getbootstrap.com/2025/04/04/bootstrap-5-3-5/ <p>Bootstrap v5.3.5 was released as a hotfix for a regression from upstream in Autoprefixer that caused floating form labels to always be &ldquo;floated&rdquo; in Firefox due to unintended CSS output.</p> <p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.5">Read the GitHub v5.3.5 changelog</a> for a full list of changes (including a ton of documentation and dependency updates) in this release.</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&rsquo;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 [email protected] </span></span></code></pre></div><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>&rsquo; GitHub profiles to help support the maintainers contributing to Bootstrap.</p> Bootstrap 5.3.4 https://blog.getbootstrap.com/2025/04/03/bootstrap-5-3-4/ Thu, 03 Apr 2025 15:22:00 +0000 https://blog.getbootstrap.com/2025/04/03/bootstrap-5-3-4/ <p>Bootstrap v5.3.4 is here with several bug fixes and a load of documentation updates. Here are a handful of highlights from the CSS and JS changes:</p> <ul> <li>Fixed modal and offcanvas headers collapsing when any padding variables were set to <code>0</code>.</li> <li>Fixed close button display in color modes.</li> <li>Fixed light mode carousel when in dark mode.</li> <li>Updated floating labels for better <code>&lt;select&gt;</code> alignment and other styling issues.</li> <li>Fixed a Sass 1.77.7 deprecation for nested rules</li> <li>Fixed popover toggling twice to close.</li> </ul> <p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.4">Read the GitHub v5.3.4 changelog</a> for a full list of changes (including a ton of documentation and dependency updates) in this release.</p> Bootstrap 5.3.3 https://blog.getbootstrap.com/2024/02/20/bootstrap-5-3-3/ Tue, 20 Feb 2024 15:22:00 +0000 https://blog.getbootstrap.com/2024/02/20/bootstrap-5-3-3/ <p>Bootstrap v5.3.3 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights!</p> <h2 id="highlights">Highlights</h2> <ul> <li>Fixed a breaking change introduced with color modes where it was required to manually import <code>variables-dark.scss</code> when building Bootstrap with Sass. Now, <code>_variables.scss</code> will automatically import <code>_variables-dark.scss</code>. If you were already importing <code>_variables-dark.scss</code> manually, you should keep doing it as it won&rsquo;t break anything and will be the way to go in v6.</li> <li>Fixed a regression in the selector engine that wasn&rsquo;t able to handle multiple IDs anymore.</li> </ul> <h2 id="color-modes">Color modes</h2> <ul> <li>Badges now use the <code>.text-bg-*</code> text utilities to be certain that the text is always readable (especially when the customized colors are different in light and dark modes).</li> <li>Fixed our <code>color-modes.js</code> script to handle the case where the OS is set to light mode and the auto color mode is used on the website. If you copied the script from our docs, you should apply <a href="https://github.com/twbs/bootstrap/commit/73e1dcf43eff8371dde52ce41bd1d9fdc2b47d1f">this change</a> to your own script.</li> <li>Fixed color schemes description in the color modes documentation to show that <code>color-scheme()</code> only accept <code>light</code> and <code>dark</code> values as parameters.</li> </ul> <h2 id="miscellaneous">Miscellaneous</h2> <ul> <li>Allowed <code>&lt;dl&gt;</code>, <code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code> in the sanitizer.</li> <li>Dropped evenly items distribution for modal and offcanvas headers.</li> <li>Fixed the accordion CSS selectors to avoid inheritance issues when nesting accordions.</li> <li>Fixed the focus box-shadow for the validation stated form controls.</li> <li>Fixed the focus ring on focused checked buttons.</li> <li>Fixed the product example mobile navbar toggler.</li> <li>Changed the RTL processing of carousel control icons.</li> </ul> <h2 id="docs">Docs</h2> <ul> <li>Dropped unnecessary right margin for example code blocks.</li> <li>Fixed emphasis text utilities usage in <a href="https://getbootstrap.com/docs/5.3/utilities/background/#background-color">background utilities examples</a> section.</li> <li>Added an technical explanation on how to render an accordion expanded by default.</li> <li>Changed Vite config path import in Vite guide.</li> <li>Enhanced the card image description of the <code>.card-img-*</code> classes.</li> <li>Mentioned <code>shift-color()</code> function in the Sass customization page among <code>tint-color()</code> and <code>shade-color()</code>.</li> <li>Added missing <code>type=&quot;button&quot;</code> attribute to the Cheatsheet examples navigation buttons.</li> <li>Updated the colors table in the customization page to be responsive.</li> </ul> <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&rsquo;s also been pushed to npm:</p> Bootstrap 5.3.2 https://blog.getbootstrap.com/2023/09/14/bootstrap-5-3-2/ Thu, 14 Sep 2023 14:30:00 +0000 https://blog.getbootstrap.com/2023/09/14/bootstrap-5-3-2/ <p>Bootstrap v5.3.2 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights!</p> <h2 id="highlights">Highlights</h2> <ul> <li>Passing a percentage unit to the global <code>abs()</code> is deprecated since Dart Sass v1.65.0. It resulted in a deprecation warning when compiling Bootstrap with Dart Sass. This has been fixed internally by changing the values passed to the <code>divide()</code> function. The <code>divide()</code> function has not been fixed itself so that we can keep supporting node-sass cross-compatibility. In v6, this won&rsquo;t be an issue as we plan to drop support for node-sass.</li> <li>Using multiple ids in a collapse target wasn&rsquo;t working anymore and has been fixed.</li> </ul> <h2 id="color-modes">Color modes</h2> <ul> <li>Increased color contrast of form range track background in light and dark modes.</li> <li>Fixed table state rendering for color modes with a focus on the striped table in dark mode to increase color contrast.</li> <li>Allow <code>&lt;mark&gt;</code> color customization for color modes.</li> </ul> <h2 id="docs">Docs</h2> <ul> <li>Added alternative CDNs section in <a href="https://getbootstrap.com/docs/5.3/getting-started/download/#alternative-cdns">Getting started -&gt; Download</a>.</li> <li>Added Discord and Bootstrap subreddit links in <a href="https://github.com/twbs/bootstrap/blob/main/README.md">README</a> and <a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/">Getting started -&gt; Introduction</a>: <ul> <li><a href="https://discord.gg/bZUvakRU3M">Discord</a> maintained by the community</li> <li><a href="https://www.reddit.com/r/bootstrap/">Bootstrap subreddit</a></li> </ul> </li> </ul> <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&rsquo;s also been pushed to npm:</p> 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&rsquo;re now at <strong>over 2,000 icons</strong>!</p> <h2 id="100-new-icons">100 new icons</h2> <p>Here&rsquo;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" width="1920" height="648" loading="lazy"> </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>