From 8737211e127769a0e20c02464e5f97e78bef8859 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 26 Jul 2023 08:28:55 +0000 Subject: [PATCH] deploy: a06130a35911250e00d5300ffb8c866f17139473 --- 2023/07/26/bootstrap-5-3-1/index.html | 437 ++++++++++++++++++++++++++ archive/index.html | 3 + feed.xml | 90 ++++-- index.html | 117 ++++--- page/10/index.html | 210 +++++++++++-- page/11/index.html | 113 ++----- page/12/index.html | 122 ++++--- page/13/index.html | 125 +++----- page/14/index.html | 199 +++++------- page/15/index.html | 147 +++++++-- page/16/index.html | 102 ++---- page/17/index.html | 102 ++++-- page/18/index.html | 270 ++-------------- page/19/index.html | 356 ++++++++++++++------- page/2/index.html | 91 +++--- page/20/index.html | 156 ++++++--- page/21/index.html | 69 ++-- page/22/index.html | 61 ++-- page/23/index.html | 63 ++-- page/24/index.html | 62 ++-- page/25/index.html | 29 +- page/3/index.html | 101 +++--- page/4/index.html | 101 +++--- page/5/index.html | 110 +++---- page/6/index.html | 170 ++++------ page/7/index.html | 169 ++++++---- page/8/index.html | 146 ++++----- page/9/index.html | 267 ++++++---------- sitemap.xml | 10 +- videos/index.html | 9 + 30 files changed, 2279 insertions(+), 1728 deletions(-) create mode 100644 2023/07/26/bootstrap-5-3-1/index.html diff --git a/2023/07/26/bootstrap-5-3-1/index.html b/2023/07/26/bootstrap-5-3-1/index.html new file mode 100644 index 000000000..7ee4c852d --- /dev/null +++ b/2023/07/26/bootstrap-5-3-1/index.html @@ -0,0 +1,437 @@ + + + + + + + + + + + + + + +Bootstrap 5.3.1 | Bootstrap Blog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+
+
+
+
+ + Bootstrap + +
+

The Bootstrap Blog

+

+ News and announcements for all things Bootstrap, + including new releases, Bootstrap Themes, + and Bootstrap Icons. +

+
+
+ + + + + +
+ +
+
+ +
+
+

Bootstrap 5.3.1

+
+ + + @mdo + + + + + + +July 26, 2023 +
+
+ +
+

Bootstrap v5.3.1 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights!

+
    +
  • Color modes: +
      +
    • Increased color contrast for dark mode by replacing $gray-500 with $gray-300 for the body color
      • +
    • Added our color mode switcher JavaScript to our examples ZIP download
      • +
    +
    • +
  • Components: +
      +
    • Improved disabled styling for all .nav-links, providing .disabled and :disabled for use with anchors and buttons
      • +
    • Add support for Home and End keys for navigating tabs by keyboard
      • +
    • Added some basic styling to toggle buttons when no modifier class is present
      • +
    • Fixed carousel colors in dark mode
      • +
    +
    • +
  • Forms: +
      +
    • Fixed floating label disabled text color
      • +
    +
    • +
  • Utilities: +
      +
    • .text-bg-* utilities now use CSS variables
      • +
    +
    • +
  • Sass: +
      +
    • Add new $navbar-dark-icon-color Sass variable
      • +
    • Removed duplicate $alert Sass variables
      • +
    • Added a new variable for $vr-border-width to customize the vertical rule helper width
      • +
    +
    • +
  • Documentation: +
      +
    • Added search to our homepage
      • +
    • Improved responsive behavior on Dashboard example
      • +
    • Improved dark mode rendering of Cheatsheet examples
      • +
    +
    • +
+

Get the release

+

Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:

+
npm i bootstrap@v5.3.1
+

Read the GitHub v5.3.1 changelog for a complete list of changes in this release.

+

Support the team

+

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

+ +
+ +
+

Related posts

+ + +
+
+
+
+
+ + + + + + + + diff --git a/archive/index.html b/archive/index.html index af6913131..2ca0980fa 100644 --- a/archive/index.html +++ b/archive/index.html @@ -259,6 +259,9 @@

The Bootstrap Blog

2023

If you’re submitting a pull request against 2.2.2-wip, be sure to read the Contributing to Bootstrap wiki page first.

-
-

- Update on the Glyphicons font -

- -
- - - @mdo - - - - - - -November 09, 2012 -
- - - - -

Earlier this week, I was excited to announce that our next release, 2.2.2-wip, would include the new Glyphicons icon font. In hindsight I got a little carried away and forgot about something.

-

IE7 doesn’t really do icon fonts.

-

I could put together a hack to add IE7 support, duplicating tons of code, but that doesn’t feel right as we’re dropping IE7 support in BS3. Instead of spending time on something we’ll just remove later on, we’re going to focus on things that will be here in the next major version.

-

So, it’s with some sadness that I inform you we will not be including the Glyphicons font in 2.2.2-wip.

-

Backwards compatibility is always a pain in the ass, and to avoid huge headaches for folks, we sometimes have to bend over, well, backwards. I hope this doesn’t screw up your plans too much and that you understand we have the community’s best interests at heart.

-

There’s some good news though. For you nerds who live on the edge, I’ve been working on tons of BS3-esque changes in the 3.0.0-wip branch on GitHub. If you really cannot wait for the Glyphicons font (and don’t mind using unsupported code), do check it out. I plan on accelerating work on it in the coming weeks. (Please don’t submit issues for it though, but rather email me or ping me on Twitter for questions.)

-

Thanks for listening, and as always, <3<3<3.

-
diff --git a/page/22/index.html b/page/22/index.html index c03c412b1..08c94a7db 100644 --- a/page/22/index.html +++ b/page/22/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- 2.2.1 hotfix released + Update on the Glyphicons font

@@ -268,6 +268,37 @@

alt="" width="32" height="32"> @mdo + + + + + +November 09, 2012 +

+ + + + +

Earlier this week, I was excited to announce that our next release, 2.2.2-wip, would include the new Glyphicons icon font. In hindsight I got a little carried away and forgot about something.

+

IE7 doesn’t really do icon fonts.

+

I could put together a hack to add IE7 support, duplicating tons of code, but that doesn’t feel right as we’re dropping IE7 support in BS3. Instead of spending time on something we’ll just remove later on, we’re going to focus on things that will be here in the next major version.

+

So, it’s with some sadness that I inform you we will not be including the Glyphicons font in 2.2.2-wip.

+

Backwards compatibility is always a pain in the ass, and to avoid huge headaches for folks, we sometimes have to bend over, well, backwards. I hope this doesn’t screw up your plans too much and that you understand we have the community’s best interests at heart.

+

There’s some good news though. For you nerds who live on the edge, I’ve been working on tons of BS3-esque changes in the 3.0.0-wip branch on GitHub. If you really cannot wait for the Glyphicons font (and don’t mind using unsupported code), do check it out. I plan on accelerating work on it in the coming weeks. (Please don’t submit issues for it though, but rather email me or ping me on Twitter for questions.)

+

Thanks for listening, and as always, <3<3<3.

+ +
+

+ 2.2.1 hotfix released +

+ +
+ + + @mdo + @@ -404,34 +435,6 @@

Next up

More bug fixes, more feature improvements. 2.1.2 will be coming shortly and we’ll work to improve a handful of issues that we punted on for 2.1.1. Beyond that, we’ve scoped out the next few releases around a set of key components like modals and carousels.

We’ll continue to add new features as appropriate, but we’re primarily focused on improving current functionality in the next few months.

-
-

- New RSS feed -

- -
- - - @mdo - - - - - - -August 22, 2012 -
- - - - -

Roughly two weeks ago we upgraded the blog to use Jekyll and GitHub Pages instead of WordPress. When we did that, we forgot about the RSS feed. A few awesome folks noted we were missing it and so we’ve added it back. Unfortunately it’s not the same URL, but it’s there nonetheless.

-

Here’s the URL for the new feed: https://blog.getbootstrap.com/feed.xml.

-

It’s also in the <head> of the blog’s pages, so entering just the root URL should resolve fine for you in most RSS apps. Again, sorry for the oversight and please continue to let us know if we can do anything else to improve the blog.

-

Thanks!

-
diff --git a/page/23/index.html b/page/23/index.html index a22f676ef..1b8ed435e 100644 --- a/page/23/index.html +++ b/page/23/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- Bootstrap 2.1.0 released + New RSS feed

@@ -268,6 +268,34 @@

alt="" width="32" height="32"> @mdo + + + + + +August 22, 2012 +

+ + + + +

Roughly two weeks ago we upgraded the blog to use Jekyll and GitHub Pages instead of WordPress. When we did that, we forgot about the RSS feed. A few awesome folks noted we were missing it and so we’ve added it back. Unfortunately it’s not the same URL, but it’s there nonetheless.

+

Here’s the URL for the new feed: https://blog.getbootstrap.com/feed.xml.

+

It’s also in the <head> of the blog’s pages, so entering just the root URL should resolve fine for you in most RSS apps. Again, sorry for the oversight and please continue to let us know if we can do anything else to improve the blog.

+

Thanks!

+ +
+

+ Bootstrap 2.1.0 released +

+ +
+ + + @mdo + @@ -427,39 +455,6 @@

CSS

For a full changelog, visit the now complete 2.0.4 milestone on GitHub.

-
-

- New release strategy -

- -
- - - @mdo - - - - - - -April 30, 2012 -
- - - - -

After three large point releases focusing on massive amounts of bugfixes and documentation changes, we’re going to change up our release strategy to push out smaller, more frequent updates.

-

Why?

-

Releases with a hundred bugfixes are difficult to test, take much longer to ship, make changelogs super long and verbose, and have a tendency to introduce additional unforeseen bugs. In hindsight, our 2.0.3 release should have been a 2.1 given its sheer scope and the time it took to ship. Going forward, we’ll try to improve the frequency of the patches to get you better code faster.

-

So what’s next?

-

At the Twitter UK Open House in London last week, we said 2.1 was our next priority. While that’s still true, we’re backing up and rethinking it’s scope. Bootstrap 2.1 may end up much narrower in focus to help us ship it earlier. We’ll still tackle all the same issues and new features we originally planned for, but across more releases. In addition, 2.1 might not be our very next release as some of those unforeseen bugs have already cropped up.

-

tl;dr

-

To keep up with the community and improve code quality, we’ll be shipping more releases more frequently.

-
-

Questions? Mention us on Twitter.

-
diff --git a/page/24/index.html b/page/24/index.html index 504ec35db..02feac466 100644 --- a/page/24/index.html +++ b/page/24/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- Talking about Bootstrap + New release strategy

@@ -268,6 +268,39 @@

alt="" width="32" height="32"> @mdo + + + + + +April 30, 2012 +

+ + + + +

After three large point releases focusing on massive amounts of bugfixes and documentation changes, we’re going to change up our release strategy to push out smaller, more frequent updates.

+

Why?

+

Releases with a hundred bugfixes are difficult to test, take much longer to ship, make changelogs super long and verbose, and have a tendency to introduce additional unforeseen bugs. In hindsight, our 2.0.3 release should have been a 2.1 given its sheer scope and the time it took to ship. Going forward, we’ll try to improve the frequency of the patches to get you better code faster.

+

So what’s next?

+

At the Twitter UK Open House in London last week, we said 2.1 was our next priority. While that’s still true, we’re backing up and rethinking it’s scope. Bootstrap 2.1 may end up much narrower in focus to help us ship it earlier. We’ll still tackle all the same issues and new features we originally planned for, but across more releases. In addition, 2.1 might not be our very next release as some of those unforeseen bugs have already cropped up.

+

tl;dr

+

To keep up with the community and improve code quality, we’ll be shipping more releases more frequently.

+
+

Questions? Mention us on Twitter.

+ +
+

+ Talking about Bootstrap +

+ +
+ + + @mdo + @@ -491,33 +524,6 @@

How?

We’re only human, and we’re bound to make a few mistakes in our code as Bootstrap continues to grow. Thanks in advance for all your help and support—it’s appreciated more than you know.

-
-

- Bootstrap's first intercontinental release -

- -
- - - @mdo - - - - - - -April 14, 2012 -
- - - - -

As you may have heard, Jacob and I are heading to London in a week to talk Bootstrap—and we’re pretty stoked about it! The event is already sold out, but we’ll be there for a few days to be sure to chat and hang with folks in the area.

-

As part of our visit and talk, we’ll be releasing Bootstrap 2.0.3 on April 24 from London, our first intercontinental release. It’s been a long time coming, and we know lots of you have been anxiously awaiting its arrival, but we want to do this release the best we can. In addition to the release itself, the rest of our talk will focus on the future of Bootstrap. We’re not exactly sure what that will be yet, but the 2.1 milestone on GitHub might give away some of it.

-

Stay tuned for more info and feel free to hit us up on Twitter for questions, opportunities to meet up, and more.

-
diff --git a/page/25/index.html b/page/25/index.html index 0180979a6..48cdc4110 100644 --- a/page/25/index.html +++ b/page/25/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- 25,000 + Bootstrap's first intercontinental release

@@ -268,6 +268,33 @@

alt="" width="32" height="32"> @mdo + + + + + +April 14, 2012 +

+ + + + +

As you may have heard, Jacob and I are heading to London in a week to talk Bootstrap—and we’re pretty stoked about it! The event is already sold out, but we’ll be there for a few days to be sure to chat and hang with folks in the area.

+

As part of our visit and talk, we’ll be releasing Bootstrap 2.0.3 on April 24 from London, our first intercontinental release. It’s been a long time coming, and we know lots of you have been anxiously awaiting its arrival, but we want to do this release the best we can. In addition to the release itself, the rest of our talk will focus on the future of Bootstrap. We’re not exactly sure what that will be yet, but the 2.1 milestone on GitHub might give away some of it.

+

Stay tuned for more info and feel free to hit us up on Twitter for questions, opportunities to meet up, and more.

+ +
+

+ 25,000 +

+ +
+ + + @mdo + diff --git a/page/3/index.html b/page/3/index.html index 6650a550e..52ceef9c5 100644 --- a/page/3/index.html +++ b/page/3/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- Bootstrap Icons v1.9.0 + Bootstrap v4.6.2

@@ -268,6 +268,56 @@

alt="" width="32" height="32"> @mdo + + + + + +July 19, 2022 +

+
+ +
+ + + + +

After several months, we’ve finally shipped Bootstrap v4.6.2, one of our last releases for the v4. It’s a bit of a maintenance patch featuring bug fixes, dependency updates, and some docs updates.

+

Read on for the highlights or head to the v4.6.x docs to see the latest in action.

+

What’s changed

+

There are two big highlights in v4.6.2:

+
    +
  • +

    First, we’ve added an example to our Collapse plugin docs to show how to use horizontal collapsing. This has long been possible via our JS, but we never had an official class to utilize it.

    +
    • +
  • +

    Second, we’ve replaced the deprecated color-adjust with print-color-adjust in our Sass files as part of the Autoprefixer v10.4.6 issues. This should quiet the issues folks have seen from that dependency change. If you’re using our distribution CSS files, like bootstrap.min.css, you may still see the warning.

    +
    • +
+

Beyond that, we’ve addressed a few other things:

+
    +
  • Tweaked the size of small and .small to compute to a whole pixel value (was 12.8px and now is 14px).
    • +
  • Improved accessibility around our dropdowns, color contrast, and role attributes.
    • +
  • Fixed some broken links to supporting documentation.
    • +
  • Updated dependencies across the board.
    • +
+

Review the GitHub v4.6.2 release changelog for more details.

+

From here, we don’t expect to ship any meaningful updates to v4.6.x other than major security or dependency updates. Everything will focus on v5 and beyond after this release, starting with the stable release of v5.2.0. Bootstrap 4 will officially end of life January 1, 2023, though you’re obviously welcome to continue using it longer than that. Follow our release repo to stay in the loop on release maintenance status.

+

Support the team

+

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

+ +
+

+ Bootstrap Icons v1.9.0 +

+ +
+ + + @mdo + @@ -276,7 +326,7 @@

July 13, 2022

- +
@@ -720,53 +770,6 @@

Get the release

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

-
-

- Bootstrap Icons v1.8.0 -

- -
- - - @mdo - - - - - - -January 31, 2022 -
-
- -
- - - - -

Bootstrap Icons v1.8.0 is here with over 140 new icons, including dozens of new heart icons ready for Valentine’s Day and dozens of filetype icons. We’re now at almost 1,700 icons and is once again our second largest release. Keep reading to see what’s new.

-

140+ new icons

-

Perfect for Valentine’s Day or any other time you need to show a little heart, there are dozens of icons to choose from.

-

New love icons in v1.8.0 -

-

Want to visually show the extensions of your files? There are tons of new options for programming languages, audio and video, images, and more.

-

New filetype icons in v1.8.0 -

-

Elsewhere we’ve expanded a number of other categories of icons. There are some new medical icons (more are planned), lots of new clipboard icons, additional tools, and more.

-

Miscellaneous new icons in v1.8.0 -

-

Looking for more new icons? Head to the issue tracker to check for open requests or submit a new one.

-

Install

-

To get started, install or update via npm:

-
npm i bootstrap-icons
-

Or Composer:

-
composer require twbs/bootstrap-icons
-

You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).

-

Figma

-

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.

-
diff --git a/page/4/index.html b/page/4/index.html index fac7b9c1a..f25a221a4 100644 --- a/page/4/index.html +++ b/page/4/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- Bootstrap Icons v1.7.0 + Bootstrap Icons v1.8.0

@@ -268,6 +268,53 @@

alt="" width="32" height="32"> @mdo + + + + + +January 31, 2022 +

+
+ +
+ + + + +

Bootstrap Icons v1.8.0 is here with over 140 new icons, including dozens of new heart icons ready for Valentine’s Day and dozens of filetype icons. We’re now at almost 1,700 icons and is once again our second largest release. Keep reading to see what’s new.

+

140+ new icons

+

Perfect for Valentine’s Day or any other time you need to show a little heart, there are dozens of icons to choose from.

+

New love icons in v1.8.0 +

+

Want to visually show the extensions of your files? There are tons of new options for programming languages, audio and video, images, and more.

+

New filetype icons in v1.8.0 +

+

Elsewhere we’ve expanded a number of other categories of icons. There are some new medical icons (more are planned), lots of new clipboard icons, additional tools, and more.

+

Miscellaneous new icons in v1.8.0 +

+

Looking for more new icons? Head to the issue tracker to check for open requests or submit a new one.

+

Install

+

To get started, install or update via npm:

+
npm i bootstrap-icons
+

Or Composer:

+
composer require twbs/bootstrap-icons
+

You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).

+

Figma

+

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.7.0 +

+ +
+ + + @mdo + @@ -276,7 +323,7 @@

November 01, 2021

- +
@@ -483,56 +530,6 @@

Get the release

npm i bootstrap

Review the GitHub v5.1.2 release changelog for a complete list of changes since our last release.

Support the team

-

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

- -
-

- Bootstrap 5.1.1 -

- -
- - - @mdo - - - - - - -September 07, 2021 -
-
- -
- - - - -

Bootstrap v5.1.1 has landed with a handful of bug fixes and documentation improvements. Following this release, we’ll be shipping another bugfix and docs update before moving onto additional new features. Keep reading for the highlights.

-

Highlights

-
    -
  • Fixed broken .bg-body utility. This was caused by the same --body-rgb CSS variable for both text and background. --body-rgb is now split into --body-color-rgb and --body-bg-rgb for proper usage. While this could be considered a breaking change, the current implementation was outright broken, so we’ve chosen to address this head-on.
    • -
  • All CSS dist builds now include _root.scss and all our :root-level CSS variables. The goal here is consistency across the distribution files so that no matter what CSS build you use, you have the same level of customization potential.
    • -
  • Updated global options page to document $enable-smooth-scroll variable.
    • -
  • Added callout to the Stacks page about gap browser support with flexbox.
    • -
  • Cleaned up documentation and usage of disabled links, especially for <a> based buttons.
    • -
  • Fixed toggle between modal regression. See docs example.
    • -
  • Fixed regression in tooltips where content doesn’t update after the first show().
    • -
  • Fixed collapse toggle unintentionally hiding descendant tab panels.
    • -
  • Improved Alerts live example documentation.
    • -
  • Updated $dropdown-link-hover-color to modify the $dropdown-link-color instead of base $gray-900 variable for improved customization.
    • -
  • Clarified JavaScript import usage for our Webpack guide.
    • -
-

About Sass compilers

-

We’ve had a number of Visual Studio users mention that Sass compiling for Bootstrap 5.1.0 is broken when using the Web Compiler extension. This extension hasn’t been updated in more than five years, so we recommend moving to a newer alternative. Some users mentioned the Sass Compiler extension as a successful alternative. If you have additional recommendations, please leave a comment to share.

-

Get the release

-

Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:

-
npm i bootstrap
-

Review the GitHub v5.1.1 release changelog for a complete list of changes since our last release.

-

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

diff --git a/page/5/index.html b/page/5/index.html index 92c13b86f..770bcbecb 100644 --- a/page/5/index.html +++ b/page/5/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- Ten Years of Bootstrap + Bootstrap 5.1.1

@@ -268,6 +268,56 @@

alt="" width="32" height="32"> @mdo + + + + + +September 07, 2021 +

+
+ +
+ + + + +

Bootstrap v5.1.1 has landed with a handful of bug fixes and documentation improvements. Following this release, we’ll be shipping another bugfix and docs update before moving onto additional new features. Keep reading for the highlights.

+

Highlights

+
    +
  • Fixed broken .bg-body utility. This was caused by the same --body-rgb CSS variable for both text and background. --body-rgb is now split into --body-color-rgb and --body-bg-rgb for proper usage. While this could be considered a breaking change, the current implementation was outright broken, so we’ve chosen to address this head-on.
    • +
  • All CSS dist builds now include _root.scss and all our :root-level CSS variables. The goal here is consistency across the distribution files so that no matter what CSS build you use, you have the same level of customization potential.
    • +
  • Updated global options page to document $enable-smooth-scroll variable.
    • +
  • Added callout to the Stacks page about gap browser support with flexbox.
    • +
  • Cleaned up documentation and usage of disabled links, especially for <a> based buttons.
    • +
  • Fixed toggle between modal regression. See docs example.
    • +
  • Fixed regression in tooltips where content doesn’t update after the first show().
    • +
  • Fixed collapse toggle unintentionally hiding descendant tab panels.
    • +
  • Improved Alerts live example documentation.
    • +
  • Updated $dropdown-link-hover-color to modify the $dropdown-link-color instead of base $gray-900 variable for improved customization.
    • +
  • Clarified JavaScript import usage for our Webpack guide.
    • +
+

About Sass compilers

+

We’ve had a number of Visual Studio users mention that Sass compiling for Bootstrap 5.1.0 is broken when using the Web Compiler extension. This extension hasn’t been updated in more than five years, so we recommend moving to a newer alternative. Some users mentioned the Sass Compiler extension as a successful alternative. If you have additional recommendations, please leave a comment to share.

+

Get the release

+

Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:

+
npm i bootstrap
+

Review the GitHub v5.1.1 release changelog for a complete list of changes since our last release.

+

Support the team

+

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

+ +
+

+ Ten Years of Bootstrap +

+ +
+ + + @mdo + @@ -276,7 +326,7 @@

August 19, 2021

- +
@@ -671,62 +721,6 @@

Get the release

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

-
-

- Bootstrap Icons v1.5.0 -

- -
- - - @mdo - - - - - - -May 10, 2021 -
-
- -
- - - - -

Bootstrap Icons v1.5.0 adds 45 new icons across a few categories as I continue to round out the set. Keep reading to see what’s new!

-

45 new icons

-

New icons in v1.5.0 -

-

The primary goal with this release was to round out some of the most requested icons to date. Here’s the lowdown:

-
    -
  • -

    First up are large versions of our dash, plus, slash, x, and other alert signage icons. The existing icons are based on their placement in other shapes, so rather than upsize those ones and potentially break things for folks, I’ve added new large options.

    -
    • -
  • -

    Commerce icons have a huge update with new currency options, banks, insert credit card, vaults/safes, and even a couple piggy banks.

    -
    • -
  • -

    For people and identity, we’ve added our first gender icons for female, male, trans, and ambiguous. It’s just the start, as I’m sure there are significant gender and identity roles I’m missing. Please open an issue with feedback if there are improvements I can make here to be more inclusive of everyone.

    -
    • -
  • -

    On the communications side, there’s finally a translate icon and bells with slash.

    -
    • -
  • -

    And to round it out, there’s a new VR headset icon, a couple new geo pin icons, and some new social options like Messenger, Reddit, WhatsApp, and more.

    -
    • -
-

Head to the Bootstrap Icons docs to see them in action.

-

Install

-

To get started, install or update via npm:

-
npm i bootstrap-icons
-

You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).

-

Figma

-

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.

-
diff --git a/page/6/index.html b/page/6/index.html index 9dfac444e..7a3b4af71 100644 --- a/page/6/index.html +++ b/page/6/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- Bootstrap 5 + Bootstrap Icons v1.5.0

@@ -268,6 +268,62 @@

alt="" width="32" height="32"> @mdo + + + + + +May 10, 2021 +

+
+ +
+ + + + +

Bootstrap Icons v1.5.0 adds 45 new icons across a few categories as I continue to round out the set. Keep reading to see what’s new!

+

45 new icons

+

New icons in v1.5.0 +

+

The primary goal with this release was to round out some of the most requested icons to date. Here’s the lowdown:

+
    +
  • +

    First up are large versions of our dash, plus, slash, x, and other alert signage icons. The existing icons are based on their placement in other shapes, so rather than upsize those ones and potentially break things for folks, I’ve added new large options.

    +
    • +
  • +

    Commerce icons have a huge update with new currency options, banks, insert credit card, vaults/safes, and even a couple piggy banks.

    +
    • +
  • +

    For people and identity, we’ve added our first gender icons for female, male, trans, and ambiguous. It’s just the start, as I’m sure there are significant gender and identity roles I’m missing. Please open an issue with feedback if there are improvements I can make here to be more inclusive of everyone.

    +
    • +
  • +

    On the communications side, there’s finally a translate icon and bells with slash.

    +
    • +
  • +

    And to round it out, there’s a new VR headset icon, a couple new geo pin icons, and some new social options like Messenger, Reddit, WhatsApp, and more.

    +
    • +
+

Head to the Bootstrap Icons docs to see them in action.

+

Install

+

To get started, install or update via npm:

+
npm i bootstrap-icons
+

You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).

+

Figma

+

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 5 +

+ +
+ + + @mdo + @@ -276,7 +332,7 @@

May 05, 2021

- +
@@ -727,116 +783,6 @@

Install

Figma

For the Figma users out there, you can also snag the icons from Figma.

-
-

- Bootstrap 5 Beta 2 -

- -
- - - @mdo - - - - - - -February 10, 2021 -
-
- -
- - - - -

Our second beta has arrived for Bootstrap 5! We delayed its release to iron out some issues with third-party libraries and stabilize our major changes. We’ve also once again shipped some awesome updates to our documentation.

-

Next up is our final beta, which we may even promote to a stable release depending on how development proceeds. Stay tuned for that!

- -

Dropdown docs screenshot -

-

Dropdowns saw a lot of work in Beta 2 because of how much has changed in both our JavaScript and in Popper.js (which we depend on for most dropdown, popover, and toolip positioning). We’ve modified our dropdown plugin to add a new data attribute to help separate our own positioning styles with that of Popper’s. The issues we saw—like a .dropstart menu overlapping a button or an incorrect responsive .dropdown-menu-end class—were largely the result of competing positioning.

-

Now when dropdown menus have data-bs-display="static", we’ll add data-bs-popper="static" via JavaScript to their associated .dropdown-menu. When dropdowns are in our navbars, their menus will have data-bs-popper="none" added. This separates two different positioning libraries, ours and Poppers, and ensures all behaviors are supported. You can see all the options in a new example in our docs. We updated our CSS selectors to use these new data attributes, too.

-

In addition, we’ve removed the initial margins from dropdowns and popovers, instead of relying on Popper’s offsets. These also conflicted with the default styling for elements positioned by Popper.js. Relatedly, there was a bug in how popover arrows were aligned that has now been resolved.

-

Color utility docs

-

Sass docs screenshot -

-

We’ve overhauled our color utility documentation, separating the text color classes from our background-color ones. We’ve also made extensive use of our scss-docs shortcode to include tons more code snippets in our docs.

- -

Both pages now include a new Sass section, showing relevant snippets of our source code that are related to each set of utilities. We list all our available color variables, our theme color variables and maps, associated mixins and loops, and even where these utilities are generated in the utilities API.

-

Expect this kind of documentation improvements to continue into our next release. Follow along in the draft pull request that adds Sass docs to all our components on GitHub.

-

JS updates

-

We’ve spent a significant amount of time in Beta 2 improving our JavaScript plugins to fix bugs and improve behaviors since dropping jQuery.

-
    -
  • Dropdown now emits events on the .dropdown-toggle instead of the .dropdown.
    • -
  • Restored the offset option for dropdowns.
    • -
  • Fixed modal toggling when clicking on data-bs-toggle="modal".
    • -
  • We now build our base component as a separate .js file.
    • -
  • We now prevent getSelector from returning URLs as selector which caused errors in dropdown and scrollspy plugins.
    • -
  • Refactored components to use a utility function to define jQuery plugins
    • -
-

Miscellaneous updates

-

Across the board, we’ve made a few small changes to other components that are worth a brief mention here.

-
    -
  • Navbars: -
      -
    • Added a new .navbar-nav-scroll class to enable vertical scrolling when a collapsed navbar is opened. It’s customizable via Sass and a CSS variable. Read more in the docs.
      • -
    • We’ve re-added flex-grow to the .navbar-collapse to restore the flexbox behaviors from v4 and prevent some content from being inadvertently squished.
      • -
    -
    • -
  • Forms: -
      -
    • Removed vertical-align from .form-select
      • -
    • Form validation mixin updated with additional parameters
      • -
    • Fixed validation icon placement in .form-select
      • -
    • Checkboxes and radio buttons are aligned better in input groups
      • -
    -
    • -
  • Buttons: -
      -
    • Added variables for tinting and shading button state colors
      • -
    • Suppressed the default focus outline for buttons in Chromium
      • -
    -
    • -
  • Toasts: -
      -
    • Added word-break to .toast-body
      • -
    • Added a live example to the docs to trigger a real toast
      • -
    -
    • -
  • Bundles: -
      -
    • Added our helpers to the utilities CSS bundle
      • -
    -
    • -
  • Carousels: -
      -
    • Updated docs examples to use <button>s wherever possible instead of <a> elements.
      • -
    • CSS selectors changed for using <button>s as indicators (from .carousel-indicators li to .carousel-indicators [data-bs-target]).
      • -
    -
    • -
-

For a more complete list of changes, check out the v5 Beta 2 project board or list of issues and PRs in this release.

-

Get started

-

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

-

We have three releases coming up next for the team:

-
    -
  • Bootstrap v5.0.0-beta3 (possibly promoted to v5 stable)
    • -
  • Bootstrap v4.6.1 (bringing in some more bugfixes and alignment with the latest in v5)
    • -
  • Bootstrap Icons v1.4.0
    • -
-

Our v5 Beta 3 will continue to focus on JavaScript issues and documentation improvements. Tooltips in particular need some attention after our fixes to dropdowns and popovers. After v5 goes stable, we’ll look to adding 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.

-

Support the team

-

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

-
diff --git a/page/7/index.html b/page/7/index.html index 1d11fa5e6..7bc0014df 100644 --- a/page/7/index.html +++ b/page/7/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- Bootstrap v4.6.0 + Bootstrap 5 Beta 2

@@ -268,6 +268,116 @@

alt="" width="32" height="32"> @mdo + + + + + +February 10, 2021 +

+
+ +
+ + + + +

Our second beta has arrived for Bootstrap 5! We delayed its release to iron out some issues with third-party libraries and stabilize our major changes. We’ve also once again shipped some awesome updates to our documentation.

+

Next up is our final beta, which we may even promote to a stable release depending on how development proceeds. Stay tuned for that!

+ +

Dropdown docs screenshot +

+

Dropdowns saw a lot of work in Beta 2 because of how much has changed in both our JavaScript and in Popper.js (which we depend on for most dropdown, popover, and toolip positioning). We’ve modified our dropdown plugin to add a new data attribute to help separate our own positioning styles with that of Popper’s. The issues we saw—like a .dropstart menu overlapping a button or an incorrect responsive .dropdown-menu-end class—were largely the result of competing positioning.

+

Now when dropdown menus have data-bs-display="static", we’ll add data-bs-popper="static" via JavaScript to their associated .dropdown-menu. When dropdowns are in our navbars, their menus will have data-bs-popper="none" added. This separates two different positioning libraries, ours and Poppers, and ensures all behaviors are supported. You can see all the options in a new example in our docs. We updated our CSS selectors to use these new data attributes, too.

+

In addition, we’ve removed the initial margins from dropdowns and popovers, instead of relying on Popper’s offsets. These also conflicted with the default styling for elements positioned by Popper.js. Relatedly, there was a bug in how popover arrows were aligned that has now been resolved.

+

Color utility docs

+

Sass docs screenshot +

+

We’ve overhauled our color utility documentation, separating the text color classes from our background-color ones. We’ve also made extensive use of our scss-docs shortcode to include tons more code snippets in our docs.

+ +

Both pages now include a new Sass section, showing relevant snippets of our source code that are related to each set of utilities. We list all our available color variables, our theme color variables and maps, associated mixins and loops, and even where these utilities are generated in the utilities API.

+

Expect this kind of documentation improvements to continue into our next release. Follow along in the draft pull request that adds Sass docs to all our components on GitHub.

+

JS updates

+

We’ve spent a significant amount of time in Beta 2 improving our JavaScript plugins to fix bugs and improve behaviors since dropping jQuery.

+
    +
  • Dropdown now emits events on the .dropdown-toggle instead of the .dropdown.
    • +
  • Restored the offset option for dropdowns.
    • +
  • Fixed modal toggling when clicking on data-bs-toggle="modal".
    • +
  • We now build our base component as a separate .js file.
    • +
  • We now prevent getSelector from returning URLs as selector which caused errors in dropdown and scrollspy plugins.
    • +
  • Refactored components to use a utility function to define jQuery plugins
    • +
+

Miscellaneous updates

+

Across the board, we’ve made a few small changes to other components that are worth a brief mention here.

+
    +
  • Navbars: +
      +
    • Added a new .navbar-nav-scroll class to enable vertical scrolling when a collapsed navbar is opened. It’s customizable via Sass and a CSS variable. Read more in the docs.
      • +
    • We’ve re-added flex-grow to the .navbar-collapse to restore the flexbox behaviors from v4 and prevent some content from being inadvertently squished.
      • +
    +
    • +
  • Forms: +
      +
    • Removed vertical-align from .form-select
      • +
    • Form validation mixin updated with additional parameters
      • +
    • Fixed validation icon placement in .form-select
      • +
    • Checkboxes and radio buttons are aligned better in input groups
      • +
    +
    • +
  • Buttons: +
      +
    • Added variables for tinting and shading button state colors
      • +
    • Suppressed the default focus outline for buttons in Chromium
      • +
    +
    • +
  • Toasts: +
      +
    • Added word-break to .toast-body
      • +
    • Added a live example to the docs to trigger a real toast
      • +
    +
    • +
  • Bundles: +
      +
    • Added our helpers to the utilities CSS bundle
      • +
    +
    • +
  • Carousels: +
      +
    • Updated docs examples to use <button>s wherever possible instead of <a> elements.
      • +
    • CSS selectors changed for using <button>s as indicators (from .carousel-indicators li to .carousel-indicators [data-bs-target]).
      • +
    +
    • +
+

For a more complete list of changes, check out the v5 Beta 2 project board or list of issues and PRs in this release.

+

Get started

+

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

+

We have three releases coming up next for the team:

+
    +
  • Bootstrap v5.0.0-beta3 (possibly promoted to v5 stable)
    • +
  • Bootstrap v4.6.1 (bringing in some more bugfixes and alignment with the latest in v5)
    • +
  • Bootstrap Icons v1.4.0
    • +
+

Our v5 Beta 3 will continue to focus on JavaScript issues and documentation improvements. Tooltips in particular need some attention after our fixes to dropdowns and popovers. After v5 goes stable, we’ll look to adding 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.

+

Support the team

+

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

+ +
+

+ Bootstrap v4.6.0 +

+ +
+ + + @mdo + @@ -276,7 +386,7 @@

January 19, 2021

- +
@@ -575,61 +685,6 @@ 

npm i bootstrap-icons

You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).

-

-

- Bootstrap Icons v1.2.0 -

- -
- - - @mdo - - - - - - -December 11, 2020 -
-
- -
- - - - -

Our latest Bootstrap Icons release includes dozens of new icons, redesigned documentation, and the most highly requested new feature—icon fonts!

-

New social icons

-

We’re starting slow with social icons—just a handful of the biggest sites and networks folks are likely to need. We’ll keep this list purposefully small as the intent isn’t for full coverage. We’ll aim to add a few over time, but this should suffice for the time being!

-

Social icons -

-

New media icons

-

The other main addition is our extended suite of media icons. We had folks ask for more options when it came to media controls, as well as different media types, so we’re getting the ball rolling with this update.

-

Media icons -

-

Icon fonts!

-

Finally, they’re here! We’re now generating web fonts for our icons thanks to a wonderful project, Fantasticon. To start, we’re generating two web font formats—.woff and .woff2. We’re also including an HTML index of all icons in web font format, powered by a generated CSS file.

-

Web fonts index -

-

This is our first foray into icon fonts, and we’re likely to make some tweaks along the way. Help us iron out any kinks by testing the fonts yourself and sharing any feedback in an issue.

-

Refreshed docs

-

New Icons homepage -

-

The homepage for Bootstrap Icons has a new look thanks to an updated hero. The new hero features a new colorful icon image, clearer project description, and an upfront npm i snippet to help folks get started faster. A new notice at the top links to the blog post to tell folks what’s new, too.

-

New Icons permalink -

-

Individual icon permalink pages have also been refreshed and greatly simplified. We’ve reduced the main example down to one instance of the icon, and expanded the examples below it to include the icon in more Bootstrap components.

-

The new permalink sidebar also features new and improved access to the icons. Need just an SVG or two? Use the new Download SVG button. Looking for the HTML for the new icon fonts? Just copy-paste. And as always, want the raw SVG HTML? That’s still there, too.

-

Install

-

To get started, install via npm:

-
npm i bootstrap-icons
-

You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).

-

Figma

-

For the Figma users out there, you can also snag the icons from Figma.

-
diff --git a/page/8/index.html b/page/8/index.html index c34d02a02..b3b80f5e5 100644 --- a/page/8/index.html +++ b/page/8/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- Bootstrap 5 Beta 1 + Bootstrap Icons v1.2.0

@@ -268,6 +268,61 @@

alt="" width="32" height="32"> @mdo + + + + + +December 11, 2020 +

+
+ +
+ + + + +

Our latest Bootstrap Icons release includes dozens of new icons, redesigned documentation, and the most highly requested new feature—icon fonts!

+

New social icons

+

We’re starting slow with social icons—just a handful of the biggest sites and networks folks are likely to need. We’ll keep this list purposefully small as the intent isn’t for full coverage. We’ll aim to add a few over time, but this should suffice for the time being!

+

Social icons +

+

New media icons

+

The other main addition is our extended suite of media icons. We had folks ask for more options when it came to media controls, as well as different media types, so we’re getting the ball rolling with this update.

+

Media icons +

+

Icon fonts!

+

Finally, they’re here! We’re now generating web fonts for our icons thanks to a wonderful project, Fantasticon. To start, we’re generating two web font formats—.woff and .woff2. We’re also including an HTML index of all icons in web font format, powered by a generated CSS file.

+

Web fonts index +

+

This is our first foray into icon fonts, and we’re likely to make some tweaks along the way. Help us iron out any kinks by testing the fonts yourself and sharing any feedback in an issue.

+

Refreshed docs

+

New Icons homepage +

+

The homepage for Bootstrap Icons has a new look thanks to an updated hero. The new hero features a new colorful icon image, clearer project description, and an upfront npm i snippet to help folks get started faster. A new notice at the top links to the blog post to tell folks what’s new, too.

+

New Icons permalink +

+

Individual icon permalink pages have also been refreshed and greatly simplified. We’ve reduced the main example down to one instance of the icon, and expanded the examples below it to include the icon in more Bootstrap components.

+

The new permalink sidebar also features new and improved access to the icons. Need just an SVG or two? Use the new Download SVG button. Looking for the HTML for the new icon fonts? Just copy-paste. And as always, want the raw SVG HTML? That’s still there, too.

+

Install

+

To get started, install via npm:

+
npm i bootstrap-icons
+

You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).

+

Figma

+

For the Figma users out there, you can also snag the icons from Figma.

+ +
+

+ Bootstrap 5 Beta 1 +

+ +
+ + + @mdo + @@ -276,7 +331,7 @@

December 07, 2020

- +
@@ -659,93 +714,6 @@

Misc

Next up

We’ll be back to v5 with our third alpha release coming in a couple of weeks. After that, we’ll ship another v4 update with v4.6.0 that continues the v5 backports and feature development. Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.

Support the team

-

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

- -
-

- Bootstrap 5 Alpha 2 -

- -
- - - @mdo - - - - - - -September 29, 2020 -
-
- -
- - - - -

We’re back at it again with a brand new alpha release of Bootstrap 5! Our second alpha has brought some new and improved features, color contrast improvements, improved helpers and utilities, and some documentation design updates.

-

Check out the latest in the docs at https://v5.getbootstrap.com. Read the release notes for a full list of changes since Alpha 1. Our migration guide has also been updated with a new section for Alpha 2.

-

Updated docs nav

-

We’ve cleaned up the navigation in our docs to make things a little easier to use while on a mobile device or a narrow viewport. We’ve redesigned the main navbar to hide links on small devices, and when expanded, those navigation links now have larger tap targets.

-

Updated Bootstrap nav home -

-

Our subnav has also be streamlined to take up a single horizontal bad on mobile, giving more space for documentation. We’ve also differentiated the expanding and collapsing menu icons between the two navs.

-

Updated Bootstrap nav docs -

-

Together this should make it a little faster and easier to navigate our docs, and serve as a fun little demo for others.

- -

Add .carousel-dark to any .carousel to switch from the default white text, controls, and indicators to black.

-

Example dark carousel -

-

Values are configurable via Sass variables. To save on filesize, we’re using a CSS filter to invert out SVGs for the carouse controls. Pretty neat if you ask us!

-

Dark dropdowns

-

For the first time since Bootstrap v1 nearly nine years ago, we have dark dropdown menus! Add .dropdown-menu-dark to any dropdown menu to change the appearance. Dark dropdowns are opt-in, so you’ll need to add the class as you go.

-

Example dark dropdowns -

-

We’d like to revisit some of this later in v5 with minor releases that advance dark mode throughout the entire project. Until then, enjoy the new classes!

-

Redesigned close button

-

Our close button has been renamed, redesigned, new focus state, and a new color option.

-

Example close button -

-

We’ve renamed the class from the rather generic .close to .btn-close. In addition, we’ve dropped the use of &times; in our HTML for an SVG background-image via CSS. With updated styling all around, the close button has a clearer focus state and even an all-new white variant (also powered by a CSS filter).

-

Position utilities

-

Thanks to our contributors, we’ve added new directional positioning utilities. Quickly position an element with our new top, right, bottom, and left utilities with support for 0, 50%, and 100% by default.

-

Example position utilities -

-

Combine with new translate utilities to center elements on an edge or corner, too! The new utilities are configurable and extensible thanks to the utilities API and some smart Sass map defaults.

-

More highlights

-

Some other incremental changes to a few components and changes include:

-
    -
  • Container horizontal padding has been updated to match the row gutters variables and values.
    • -
  • Checkboxes and radios downsized to 1em from 1.25em for improved font scaling support.
    • -
  • Improved colors with green and cyan getting new values, plus higher contrast ratios all around.
    • -
  • Improved toast styling, now without overflow: hidden.
    • -
  • Badge padding increased a smidge.
    • -
  • Revamped “responsive embed” helpers, now called ratio helpers. New class names across the board, more flexible styles, and a new CSS variable for custom dynamic and responsive ratios.
    • -
  • Screen reader classes are now “visually hidden” classes.
    • -
  • New .border-width utility.
    • -
-

See all the changes in the v5 Alpha 2 project board and be sure to read the Migration guide for details on what’s changed since Alpha 1.

-

Coming in Alpha 3

-

We’ve pushed some additional breaking changes and important component updates to Alpha 3. To give you a heads up, here are some important upcoming moves:

-
    -
  • Offcanvas support is coming thanks to new side modals!
    • -
  • We’re revamping the input group component, dropping support for quite a few variations. It’s too complex, supports too many variations, and has had the most annoying border-radius bug through all of v4. (I’m so sorry about that!)
    • -
  • We’re upgrading floating labels from a docs Example into a fully fledge form layout option, with support for textual inputs, selects, and textareas.
    • -
  • We’re adding font-size utilities and updating our font-weight utilities.
    • -
  • RTL is still coming! The PR is being reviewed by our team and we’re hoping to land it in Alpha 3 so we can get some folks testing with it.
    • -
-

For a more up to date list of changes, be sure to follow along with the v5 Alpha 3 project board. More docs improvements are planned with the potential for more breaking changes as well. From there it’s onto final breaking changes in Beta 3.

-

Release expectations

-

We’ll be alternating releases across v4 and v5 to keep the momentum up. We’re shipping v4.5.3 next and then moving right back to v5 for Alpha 3. We’ve noted our intended release schedule in our release repo. We’ll also keep updating that repo’s readme as we go.

-

Get started

-

Head to https://v5.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
-

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

diff --git a/page/9/index.html b/page/9/index.html index ad22a61c1..48cdbf085 100644 --- a/page/9/index.html +++ b/page/9/index.html @@ -258,7 +258,7 @@

The Bootstrap Blog

- Bootstrap Icons v1.0.0 + Bootstrap 5 Alpha 2

@@ -268,6 +268,93 @@

alt="" width="32" height="32"> @mdo + + + + + +September 29, 2020 +

+
+ +
+ + + + +

We’re back at it again with a brand new alpha release of Bootstrap 5! Our second alpha has brought some new and improved features, color contrast improvements, improved helpers and utilities, and some documentation design updates.

+

Check out the latest in the docs at https://v5.getbootstrap.com. Read the release notes for a full list of changes since Alpha 1. Our migration guide has also been updated with a new section for Alpha 2.

+

Updated docs nav

+

We’ve cleaned up the navigation in our docs to make things a little easier to use while on a mobile device or a narrow viewport. We’ve redesigned the main navbar to hide links on small devices, and when expanded, those navigation links now have larger tap targets.

+

Updated Bootstrap nav home +

+

Our subnav has also be streamlined to take up a single horizontal bad on mobile, giving more space for documentation. We’ve also differentiated the expanding and collapsing menu icons between the two navs.

+

Updated Bootstrap nav docs +

+

Together this should make it a little faster and easier to navigate our docs, and serve as a fun little demo for others.

+ +

Add .carousel-dark to any .carousel to switch from the default white text, controls, and indicators to black.

+

Example dark carousel +

+

Values are configurable via Sass variables. To save on filesize, we’re using a CSS filter to invert out SVGs for the carouse controls. Pretty neat if you ask us!

+

Dark dropdowns

+

For the first time since Bootstrap v1 nearly nine years ago, we have dark dropdown menus! Add .dropdown-menu-dark to any dropdown menu to change the appearance. Dark dropdowns are opt-in, so you’ll need to add the class as you go.

+

Example dark dropdowns +

+

We’d like to revisit some of this later in v5 with minor releases that advance dark mode throughout the entire project. Until then, enjoy the new classes!

+

Redesigned close button

+

Our close button has been renamed, redesigned, new focus state, and a new color option.

+

Example close button +

+

We’ve renamed the class from the rather generic .close to .btn-close. In addition, we’ve dropped the use of &times; in our HTML for an SVG background-image via CSS. With updated styling all around, the close button has a clearer focus state and even an all-new white variant (also powered by a CSS filter).

+

Position utilities

+

Thanks to our contributors, we’ve added new directional positioning utilities. Quickly position an element with our new top, right, bottom, and left utilities with support for 0, 50%, and 100% by default.

+

Example position utilities +

+

Combine with new translate utilities to center elements on an edge or corner, too! The new utilities are configurable and extensible thanks to the utilities API and some smart Sass map defaults.

+

More highlights

+

Some other incremental changes to a few components and changes include:

+
    +
  • Container horizontal padding has been updated to match the row gutters variables and values.
    • +
  • Checkboxes and radios downsized to 1em from 1.25em for improved font scaling support.
    • +
  • Improved colors with green and cyan getting new values, plus higher contrast ratios all around.
    • +
  • Improved toast styling, now without overflow: hidden.
    • +
  • Badge padding increased a smidge.
    • +
  • Revamped “responsive embed” helpers, now called ratio helpers. New class names across the board, more flexible styles, and a new CSS variable for custom dynamic and responsive ratios.
    • +
  • Screen reader classes are now “visually hidden” classes.
    • +
  • New .border-width utility.
    • +
+

See all the changes in the v5 Alpha 2 project board and be sure to read the Migration guide for details on what’s changed since Alpha 1.

+

Coming in Alpha 3

+

We’ve pushed some additional breaking changes and important component updates to Alpha 3. To give you a heads up, here are some important upcoming moves:

+
    +
  • Offcanvas support is coming thanks to new side modals!
    • +
  • We’re revamping the input group component, dropping support for quite a few variations. It’s too complex, supports too many variations, and has had the most annoying border-radius bug through all of v4. (I’m so sorry about that!)
    • +
  • We’re upgrading floating labels from a docs Example into a fully fledge form layout option, with support for textual inputs, selects, and textareas.
    • +
  • We’re adding font-size utilities and updating our font-weight utilities.
    • +
  • RTL is still coming! The PR is being reviewed by our team and we’re hoping to land it in Alpha 3 so we can get some folks testing with it.
    • +
+

For a more up to date list of changes, be sure to follow along with the v5 Alpha 3 project board. More docs improvements are planned with the potential for more breaking changes as well. From there it’s onto final breaking changes in Beta 3.

+

Release expectations

+

We’ll be alternating releases across v4 and v5 to keep the momentum up. We’re shipping v4.5.3 next and then moving right back to v5 for Alpha 3. We’ve noted our intended release schedule in our release repo. We’ll also keep updating that repo’s readme as we go.

+

Get started

+

Head to https://v5.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
+

Support the team

+

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

+ +
+

+ Bootstrap Icons v1.0.0 +

+ +
+ + + @mdo + @@ -276,7 +363,7 @@

August 28, 2020

- +
@@ -477,182 +564,6 @@

Coming in v1 stable

Download

Alpha 5 has been published to GitHub and npm (package name bootstrap-icons). Get your hands on it from GitHub, by updating to v1.0.0-alpha5, or by snagging the icons from Figma.

-
-

- Bootstrap 5 alpha! -

- -
- - - @mdo - - - - - - -June 16, 2020 -
-
- -
- - - - -

Bootstrap 5’s very first alpha has arrived! We’ve been working hard for several months to refine the work we started in v4, and while we’re feeling great about our progress, there’s still even more to do.

-

We’ve been focused on making the migration from v4 to v5 more approachable, but we’ve also not been afraid to step away from what’s outdated or no longer appropriate. As such, we’re very happy to say that with v5, Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer. We’re sharpening our focus on building tools that are more future-friendly, and while we’re not fully there yet, the promise of CSS variables, faster JavaScript, fewer dependencies, and better APIs certainly feel right to us.

-

Before you jump to updating, please remember v5 is now in alpha—breaking changes will continue to occur until our first beta. We haven’t finished adding or removing everything, so check for open issues and pull requests as you have questions or feedback.

-

Now let’s dig in with some highlights!

-

New look and feel

-

We’ve built on the improvements to our docs homepage in v4.5.0 with an updated look and feel for the rest of our docs. Our docs pages are no longer full-width to improve readability and make our site feel less app-like and more content-like. In addition, we’ve upgraded our sidebar to use expandable sections (powered by our own Collapse plugin) for faster navigation.

-

New Bootstrap docs layout -

-

We’re also sporting a brand new logo! More on that when v5 goes stable, but suffice to say we wanted to give the ol’ B in a rounded square a small upgrade.

-

New Bootstrap logo -

-

Inspired by the CSS that created the very beginnings of this project, our logo embodies the feeling of a rule set—style bounded by curly braces. We love it and think you will, too. Expect to see it roll out to v4’s documentation, our blog, and more over time as we continue to refine things and ship new releases.

-

jQuery and JavaScript

-

jQuery brought unprecedented access to complex JavaScript behaviors to millions (billions?) of people over the last decade and a half. Personally, I’m forever grateful for the empowerment and support it gave me to continue writing front-end code, learning new things, and embracing plugins from the community. Perhaps most importantly, it’s forever changed JavaScript itself, and that in itself is a monument to jQuery’s success. Thank you to every jQuery contributor and maintainer who made that possible for folks like me.

-

Thanks to advancement made in front-end development tools and browser support, we’re now able to drop jQuery as a dependency, but you’d never notice otherwise. This migration was a huge undertaking by @Johann-S, our primary JavaScript maintainer these days. It marks one of the largest changes to the framework in years and means projects built on Bootstrap 5 will be significantly lighter on file size and page load moving forward.

-

In addition to dropping jQuery, we’ve made a handful of other changes and enhancements to our JavaScript in v5 that focus on code quality and bridging the gap between v4 and v5. One of our other larger changes was dropping the bulk of our Button plugin for an HTML and CSS only approach to toggle states. Now toggle buttons are powered by checkboxes and radio buttons and are much more reliable.

-

You can see the full list of JS related changes in the first v5 alpha project on GitHub.

-

Interested in helping out on Bootstrap’s JavaScript? We’re always looking for new contributors to the team to help write new plugins, review pull requests, and fix bugs. Let us know!

-

CSS custom properties

-

As mentioned, we’ve begun using CSS custom properties in Bootstrap 5 thanks to dropping support for Internet Explorer. In v4 we only included a handful of root variables for color and fonts, and now we’ve added them for a handful of components and layout options.

-

Take for example our .table component, where we’ve added a handful of local variables to make striped, hoverable, and active table styles easier:

-
.table {
-  --bs-table-bg: #{$table-bg};
-  --bs-table-accent-bg: transparent;
-  --bs-table-striped-color: #{$table-striped-color};
-  --bs-table-striped-bg: #{$table-striped-bg};
-  --bs-table-active-color: #{$table-active-color};
-  --bs-table-active-bg: #{$table-active-bg};
-  --bs-table-hover-color: #{$table-hover-color};
-  --bs-table-hover-bg: #{$table-hover-bg};
-
-  // Styles here...
-}
-

We’re working to utilize the superpowers of both Sass and CSS custom properties for a more flexible system. You can read more about this in the Tables docs page and expect to see more usage in components like buttons in the near future.

-

Improved customizing docs

-

We’ve hunkered down and improved our documentation in several places, giving more explanation, removing ambiguity, and providing much more support for extending Bootstrap. It all starts with a whole new Customize section.

-

Bootstrap 5 customize docs -

-

v5’s Customize docs expand on v4’s Theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. We’ve fleshed out more content here and even provided a starter npm project for you to get started with faster and easier. It’s also available as a template repo on GitHub, so you can freely fork and go.

-

Bootstrap 5 color palette -

-

We’ve expanded our color palette in v5, too. With an extensive color system built-in, you can more easily customize the look and feel of your app without ever leaving the codebase. We’ve also done some work to improve color contrast, and even provided color contrast metrics in our Color docs. Hopefully, this will continue to help make Bootstrap-powered sites more accessible to folks all over.

-

Updated forms

-

In addition to the new Customize section, we’ve overhauled our Forms documentation and components. We’ve consolidated all our forms styles into a new Forms section (including the input group component) to give them the emphasis they deserve.

-

New Bootstrap 5 forms docs -

-

Alongside new docs pages, we’ve redesigned and de-duped all our form controls. In v4 we introduced an extensive suite of custom form controls—checks, radios, switches, files, and more—but those were in addition to whatever defaults each browser provided. With v5, we’ve gone fully custom.

-

New Bootstrap 5 checks -

-

If you’re familiar with v4’s form markup, this shouldn’t look too far off for you. With a single set of form controls and a focus on redesigning existing elements vs generating new ones via pseudo-elements, we have a much more consistent look and feel.

-
<div class="form-check">
-  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
-  <label class="form-check-label" for="flexCheckDefault">
-    Default checkbox
-  </label>
-</div>
-
-<div class="form-check">
-  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
-  <label class="form-check-label" for="flexRadioDefault1">
-    Default radio
-  </label>
-</div>
-
-<div class="form-check form-switch">
-  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
-  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
-</div>
-

Every checkbox, radio, select, file, range, and more includes a custom appearance to unify the style and behavior of form controls across OS and browser. These new form controls are all built on completely semantic, standard form controls—no more superfluous markup, just form controls and labels.

-

Be sure to explore the new forms docs and let us know what you think.

-

Utilities API

-

We love seeing how many folks are building new and interesting CSS libraries and toolkits, challenging the way we’ve built on the web for the last decade-plus. It’s refreshing, to say the least, and affords us all an opportunity to discuss and iterate. As such, we’ve implemented a brand new utility API into Bootstrap 5.

-
$utilities: () !default;
-$utilities: map-merge(
-  (
-    // ...
-    "width": (
-      property: width,
-      class: w,
-      values: (
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%,
-        auto: auto
-      )
-    ),
-    // ...
-    "margin": (
-      responsive: true,
-      property: margin,
-      class: m,
-      values: map-merge($spacers, (auto: auto))
-    ),
-    // ...
-  ), $utilities);
-

Ever since utilities become a preferred way to build, we’ve been working to find the right balance to implement them in Bootstrap while providing control and customization. In v4, we did this with global $enable-* classes, and we’ve even carried that forward in v5. But with an API based approach, we’ve created a language and syntax in Sass to create your own utilities on the fly while also being able to modify or remove those we provide. This is all thanks to @MartijnCuppens, who also maintains the RFS project, and is responsible for the initial PR and subsequent improvements.

-

We think this will be a game-changer for those who build on Bootstrap via our source files, and if you haven’t built a Bootstrap-powered project that way yet, your mind will be blown.

-

Heads up! We’ve moved some of our former v4 utilities to a new Helpers section. These helpers are snippets of code that are longer than your usual property-value pairing for our utilities. Just our way of reorganizing things for easier naming and improved documentation.

-

Enhanced grid system

-

By design Bootstrap 5 isn’t a complete departure from v4. We wanted everyone to be able to more easily upgrade to this future version after hearing about the difficulties from the v3 to v4 upgrade path. We’ve kept the bulk of the build system in place (minus jQuery) for this reason, and we’ve also built on the existing grid system instead of replacing it with something newer and hipper.

-

Here’s a rundown of what’s changed in our grid:

-
    -
  • We’ve added a new grid tier! Say hello to xxl.
    • -
  • .gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. We’ve also added options to your grid gutter spacing that matches the spacing utilities you’re already familiar with.
    • -
  • Form layout options have been replaced with the new grid system.
    • -
  • Vertical spacing classes have been added.
    • -
  • Columns are no longer position: relative by default.
    • -
-

Here’s a quick example of how to use the new grid gutter classes:

-
<div class="row g-5">
-  <div class="col">...</div>
-  <div class="col">...</div>
-  <div class="col">...</div>
-</div>
-

Take a look at the redesigned and restructured Layout docs to learn more.

-

CSS’s grid layout is increasingly ready for prime time, and while we haven’t made use of it here yet, we’re continuing to experiment and learn from it. Look to future releases of v5 to embrace it in more ways.

-

Docs

-

We switched our documentation static site generator from Jekyll to Hugo. Jekyll has long been our generator of choice given how easy it is to get up and running, and its simplicity with deploying to GitHub Pages.

-

Unfortunately, we’ve reached two major issues with Jekyll over the years:

-
    -
  1. Jekyll requires Ruby to be installed
    2. -
  2. Site generation was very slow
    3. -
-

Hugo on the other hand is written in Go, so it has no external runtime dependencies, and it’s much faster. We build our current master branch site, including the doc’s Sass -> CSS in ~1.6s. Our local server reloads in milliseconds instead of 8-12 seconds, so working on the docs has become a pleasant experience again.

-

The Hugo switch wouldn’t have been possible without Hugo’s main developer work, Bjørn Erik Pedersen (@bep), who made quite a few codebase changes to make the transition possible and smooth!

-

Also a shoutout to @xhmikosr who led the charge here in converting hundreds of files and working with the Hugo developers to make sure our local development was fast, efficient, and maintainable.

-

Coming soon: RTL, offcanvas, and more

-

There’s a ton we just didn’t have time to tackle in our first alpha that’s still on the todo list for future alphas. We wanted to give them some love here so you know what’s on our radar throughout v5’s development.

-
    -
  • -

    RTL is coming! We’ve spiked out a PR using RTLCSS and are continuing to explore logical properties as well. Personally, I’m sorry for taking so long for us to officially tackle this knowing all the effort that’s gone into it community efforts and pull requests to the project. Hopefully, the wait is worth it.

    -
    • -
  • -

    There’s a forked version of our modal that’s implementing an offcanvas menu. We still have some work to do here to get this right without adding too much overhead, but the idea of having an offcanvas wrapper to place any sidebar-worth content—navigation, shopping cart, etc—is huge. Personally, I know we’re behind the times on this one, but it should be awesome nonetheless.

    -
    • -
  • -

    We’re evaluating a number of other changes to our codebase, including the Sass module system, increased usage of CSS custom properties, embedding SVGs in our HTML instead of our CSS, and more.

    -
    • -
-

There’s a ton yet to come, including more documentation improvements, bug fixes, and quality of life changes. Be sure to review our open issues and PRs to see where you can help out by providing feedback, testing community PRs, or sharing your ideas.

-

Get started

-

Head to https://v5.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

-

We still have more work to do in v5, including some breaking changes, but we’re incredibly excited about this release. Let the feedback rip and we’ll do our best to keep up with y’all. Our goal is to ship another alpha within 3-4 weeks, and likely a couple more after that. We’ll also be shipping a v4.5.1 release to fix a couple of regressions and continue to bridge the gap between v4 and v5.

-

Beyond that, keep an eye for more updates to the Bootstrap Icons project, our RFS project (now enabled by default in v5), and the npm starter project.

-

Support the team

-

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

-
diff --git a/sitemap.xml b/sitemap.xml index 867d68bac..e3e627d5e 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -2,14 +2,18 @@ https://blog.getbootstrap.com/archive/ - 2023-05-30T07:35:00+00:00 + 2023-07-26T08:05:00+00:00 - https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/ - 2023-05-30T07:35:00+00:00 + https://blog.getbootstrap.com/2023/07/26/bootstrap-5-3-1/ + 2023-07-26T08:05:00+00:00 https://blog.getbootstrap.com/ + 2023-07-26T08:05:00+00:00 + + + https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/ 2023-05-30T07:35:00+00:00 diff --git a/videos/index.html b/videos/index.html index 97c60e881..9c46d2086 100644 --- a/videos/index.html +++ b/videos/index.html @@ -259,6 +259,15 @@

The Bootstrap Blog

+ +
+

+ Bootstrap 5.3.1 +

+ 26 Jul 2023 +
+
+