diff options
| author | XhmikosR <XhmikosR@users.noreply.github.com> | 2022-02-28 22:27:43 +0300 |
|---|---|---|
| committer | XhmikosR <XhmikosR@users.noreply.github.com> | 2022-02-28 22:27:43 +0300 |
| commit | 3993abceed721fa7a7bce49f5f758d65a8fbef79 (patch) | |
| tree | f28de3f9591ca3abd9b6334fe782d8554e444642 | |
| parent | 32dbd0ffc617c7f3276f91251e7c4576d0687a85 (diff) | |
deploy: 7840f9329ff59e754a3084419ac15e434e5f3c2d
135 files changed, 1232 insertions, 1232 deletions
diff --git a/2012/03/22/combining-badges-less-and-labels-less-in-2-0-3/index.html b/2012/03/22/combining-badges-less-and-labels-less-in-2-0-3/index.html index 34401232..b0529290 100644 --- a/2012/03/22/combining-badges-less-and-labels-less-in-2-0-3/index.html +++ b/2012/03/22/combining-badges-less-and-labels-less-in-2-0-3/index.html @@ -8,7 +8,7 @@ <meta name="description" content="For one reason or another, in 2.0.2 we made badges have separate LESS files. The CSS is 95% the same, but we knew that some folks might need one or the other, or even both. With 2.0.3, we’ll be simplifying some of those styles into a single .less file and scoping the :hover state to anchors only. Moving forward, we’ll have the following as a shared set of base styles. As you can see, when combined, there isn’t much extra weight at all for those who want just badges or labels."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -184,28 +184,28 @@ Moving forward, we’ll have the following as a shared set of base styles. A </div> <p>For one reason or another, in 2.0.2 we made badges have separate LESS files. The CSS is 95% the same, but we knew that some folks might need one or the other, or even both. With <a href="https://github.com/twbs/bootstrap/issues?milestone=10&q=is%3Aopen">2.0.3</a>, we’ll be simplifying some of those styles into a single .less file and scoping the <code>:hover</code> state to anchors only.</p> <p>Moving forward, we’ll have the following as a shared set of base styles. As you can see, when combined, there isn’t much extra weight at all for those who want just badges or labels.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.label</span><span class="o">,</span> -<span class="nc">.badge</span> <span class="p">{</span> - <span class="na">font-size</span><span class="o">:</span> <span class="o">@</span><span class="n">baseFontSize</span> <span class="o">*</span> <span class="mf">.846</span><span class="p">;</span> - <span class="na">font-weight</span><span class="o">:</span> <span class="ni">bold</span><span class="p">;</span> - <span class="na">line-height</span><span class="o">:</span> <span class="mi">13</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// ensure proper line-height if floated -</span><span class="c1"></span> <span class="na">color</span><span class="o">:</span> <span class="o">@</span><span class="ni">white</span><span class="p">;</span> - <span class="na">vertical-align</span><span class="o">:</span> <span class="ni">middle</span><span class="p">;</span> - <span class="na">white-space</span><span class="o">:</span> <span class="ni">nowrap</span><span class="p">;</span> - <span class="na">text-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="o">-</span><span class="mi">1</span><span class="kt">px</span> <span class="mi">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,.</span><span class="mi">25</span><span class="p">);</span> - <span class="na">background-color</span><span class="o">:</span> <span class="o">@</span><span class="n">grayLight</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div><p>One file, multiple components. We’ve done it before with our multiple types of navigation, so it’s nothing folks familiar with Bootstrap haven’t seen before.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nc">.label</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"><span class="nc">.badge</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="na">font-size</span><span class="o">:</span> <span class="o">@</span><span class="n">baseFontSize</span> <span class="o">*</span> <span class="mf">.846</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">font-weight</span><span class="o">:</span> <span class="ni">bold</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">line-height</span><span class="o">:</span> <span class="mi">13</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// ensure proper line-height if floated +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="na">color</span><span class="o">:</span> <span class="o">@</span><span class="ni">white</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">vertical-align</span><span class="o">:</span> <span class="ni">middle</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">white-space</span><span class="o">:</span> <span class="ni">nowrap</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">text-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="o">-</span><span class="mi">1</span><span class="kt">px</span> <span class="mi">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,.</span><span class="mi">25</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="na">background-color</span><span class="o">:</span> <span class="o">@</span><span class="n">grayLight</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>One file, multiple components. We’ve done it before with our multiple types of navigation, so it’s nothing folks familiar with Bootstrap haven’t seen before.</p> <p>On a related note, we’ve changed how we handle hover states for badges and labels. Instead of having a default hover state on an inherently static element, one made with say a <code>span</code>, we relegate the hover state (a cursor and background change) to anchors only.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nt">a</span> <span class="p">{</span> - <span class="k">&</span><span class="nc">.label</span><span class="nd">:hover</span><span class="o">,</span> - <span class="k">&</span><span class="nc">.badge</span><span class="nd">:hover</span> <span class="p">{</span> - <span class="na">color</span><span class="o">:</span> <span class="o">@</span><span class="ni">white</span><span class="p">;</span> - <span class="na">text-decoration</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span> - <span class="na">cursor</span><span class="o">:</span> <span class="ni">pointer</span><span class="p">;</span> - <span class="p">}</span> -<span class="p">}</span> -</code></pre></div><p>For the alternate colors on badges and labels, we’ve also relegated those styles to anchors only (those with an <code>href</code> attribute).</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nt">a</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="k">&</span><span class="nc">.label</span><span class="nd">:hover</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="k">&</span><span class="nc">.badge</span><span class="nd">:hover</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="na">color</span><span class="o">:</span> <span class="o">@</span><span class="ni">white</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">text-decoration</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">cursor</span><span class="o">:</span> <span class="ni">pointer</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>For the alternate colors on badges and labels, we’ve also relegated those styles to anchors only (those with an <code>href</code> attribute).</p> </div> diff --git a/2012/03/22/coming-up-in-bootstrap/index.html b/2012/03/22/coming-up-in-bootstrap/index.html index dbe4c445..000175fd 100644 --- a/2012/03/22/coming-up-in-bootstrap/index.html +++ b/2012/03/22/coming-up-in-bootstrap/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/2012/03/22/coming-up-in-bootstrap/"> <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/03/22/what-up-nerds/index.html b/2012/03/22/what-up-nerds/index.html index 846c24e1..7ff00c6a 100644 --- a/2012/03/22/what-up-nerds/index.html +++ b/2012/03/22/what-up-nerds/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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. Quick links Bootstrap homepage GitHub project page Roadmap Open issues "> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/03/30/25000/index.html b/2012/03/30/25000/index.html index d8b3f3f4..53c520e0 100644 --- a/2012/03/30/25000/index.html +++ b/2012/03/30/25000/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Earlier today Bootstrap passed 25,000 watchers on GitHub. For the last few months it has been the most watched project and continues to grow at an alarming rate. In fact, I recall writing about 8,700 watchers back in October. Jacob and I are still both in awe of how this former internal pet project has grown into one of the most popular front-end frameworks on the Web. We’ve still got a lot ahead of us for features, refinement, and more, but we wanted to take a moment once again to thank the community for making Bootstrap the success that it is today."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/04/14/bootstraps-first-international-release/index.html b/2012/04/14/bootstraps-first-international-release/index.html index 3030d19f..4eecb5ea 100644 --- a/2012/04/14/bootstraps-first-international-release/index.html +++ b/2012/04/14/bootstraps-first-international-release/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/04/15/help-test-bootstrap-2-0-3/index.html b/2012/04/15/help-test-bootstrap-2-0-3/index.html index f7ded352..7f47d20d 100644 --- a/2012/04/15/help-test-bootstrap-2-0-3/index.html +++ b/2012/04/15/help-test-bootstrap-2-0-3/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Our next release, 2.0.3, is almost ready to rock, but we need your help to get the finish line in the best shape possible. Similar to what we did for the big 2.0 launch, we’re asking for the community’s help in testing out the release’s work-in-progress branch. We have a ton of bug fixes—another 80 or so since 2.0.2—and want to have the highest quality release we can. Why? Good question."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/04/19/bootstrap-jshint-and-recess/index.html b/2012/04/19/bootstrap-jshint-and-recess/index.html index db2c1698..63098861 100644 --- a/2012/04/19/bootstrap-jshint-and-recess/index.html +++ b/2012/04/19/bootstrap-jshint-and-recess/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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 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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -188,16 +188,16 @@ JSHint JSHint is an awesome community-driven linting tool, used to detect errors <p>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.</p> <p>To begin with, Bootstrap’s JS will use the following options (stored in a .jshintrc file in the js dir):</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="p">{</span> - <span class="nt">"validthis"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"laxcomma"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"laxbreak"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"browser"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"boss"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"expr"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"asi"</span> <span class="p">:</span> <span class="kc">true</span> -<span class="p">}</span> -</code></pre></div><p>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 <a href="https://jshint.com/">check it out right now</a>!</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nt">"validthis"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"laxcomma"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"laxbreak"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"browser"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"boss"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"expr"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"asi"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>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 <a href="https://jshint.com/">check it out right now</a>!</p> <h3 id="recesshttpstwittergithubiorecess"><a href="https://twitter.github.io/recess/">Recess</a></h3> <p>Recess is a project developed at Twitter to help support our internal style guide.</p> <p><img src="/assets/img/2012/04/recess.png" alt="Recess screenshot"></p> diff --git a/2012/04/24/bootstrap-2-0-3-released/index.html b/2012/04/24/bootstrap-2-0-3-released/index.html index 0830477b..541b8d58 100644 --- a/2012/04/24/bootstrap-2-0-3-released/index.html +++ b/2012/04/24/bootstrap-2-0-3-released/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Today we’re releasing Bootstrap 2.0.3, another bugfix release that aims to squash as many regressions and documentation inaccuracies as possible. There are almost 100 closed issues in the 2.0.3 milestone on GitHub, but below is a comprehensive list of the most important fixes with clear explanations of what’s changed. Makefile In the spirit of always improving the LESS functionality and build tools, we’ve updated our makefile to utilize JSHint and Recess, linters for JavaScript and CSS."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -185,8 +185,8 @@ Makefile In the spirit of always improving the LESS functionality and build tool <p>Today we’re releasing <a href="https://getbootstrap.com/">Bootstrap 2.0.3</a>, another bugfix release that aims to squash as many regressions and documentation inaccuracies as possible. There are almost 100 closed issues in the <a href="https://github.com/twbs/bootstrap/issues?sort=created&direction=desc&state=closed&page=1&milestone=10">2.0.3 milestone</a> on GitHub, but below is a comprehensive list of the most important fixes with clear explanations of what’s changed.</p> <h2 id="makefile">Makefile</h2> <p>In the spirit of always improving the LESS functionality and build tools, we’ve updated our makefile to utilize <a href="https://jshint.com/">JSHint</a> and <a href="https://twitter.github.io/recess/">Recess</a>, linters for JavaScript and CSS. To continue to run <code>make</code> via Terminal, do the following:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">npm install -g recess jshint -</code></pre></div><p>We’ve also removed the bootstrap.zip file from the repository, so make runs much faster as it has no need to compress any files. For more info, see the <a href="https://github.com/twbs/bootstrap/blob/v2.0.3/README.md">updated readme</a>.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g recess jshint +</span></span></code></pre></div><p>We’ve also removed the bootstrap.zip file from the repository, so make runs much faster as it has no need to compress any files. For more info, see the <a href="https://github.com/twbs/bootstrap/blob/v2.0.3/README.md">updated readme</a>.</p> <h2 id="html-and-css">HTML and CSS</h2> <ul> <li>Overhauled the responsive utility classes to simplify required CSS, add <code>!important</code> to all declarations, and use <code>display: inherit</code> in place of <code>display: block</code> to account for different types of elements.</li> diff --git a/2012/04/27/talking-about-bootstrap/index.html b/2012/04/27/talking-about-bootstrap/index.html index b8a39e21..87c655c1 100644 --- a/2012/04/27/talking-about-bootstrap/index.html +++ b/2012/04/27/talking-about-bootstrap/index.html @@ -8,7 +8,7 @@ <meta name="description" content="There is a thread on the mailing list about how to describe Bootstrap and instead of isolating our response to just one email, I’ll just blog about it. As it stands, some folks are unsure how to describe Bootstrap to those unfamiliar with it. So here it is, straight from the official horse’s mouth. Name Casually, it’s just Bootstrap. That’s noun and verb, for those wondering—Bootstrap the project and “to Bootstrap a project”, respectively."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/04/30/new-release-strategy/index.html b/2012/04/30/new-release-strategy/index.html index 0b59aa9e..0b9e3adc 100644 --- a/2012/04/30/new-release-strategy/index.html +++ b/2012/04/30/new-release-strategy/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/06/01/bootstrap-2-0-4-released/index.html b/2012/06/01/bootstrap-2-0-4-released/index.html index 5ac50a7f..e26a7243 100644 --- a/2012/06/01/bootstrap-2-0-4-released/index.html +++ b/2012/06/01/bootstrap-2-0-4-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Following up on the large 2.0.3 release a few weeks ago, we have a fresh update to address some documentation issues and basic CSS bugs. 2.0.4 includes around thirty closed issues and is our first version under our updated release approach (shorter, more concise releases). As always, here’s a quick overview of some of the top changes. Docs Added type="button" to all dismiss buttons in alerts and modals to avoid a bug in which they prevent their parent’s form from properly submitting."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/08/11/now-powered-by-jekyll-and-github-pages/index.html b/2012/08/11/now-powered-by-jekyll-and-github-pages/index.html index c37ed373..c5bce5b9 100644 --- a/2012/08/11/now-powered-by-jekyll-and-github-pages/index.html +++ b/2012/08/11/now-powered-by-jekyll-and-github-pages/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/08/13/help-test-bootstrap-2-1/index.html b/2012/08/13/help-test-bootstrap-2-1/index.html index 78b663f3..a84ead72 100644 --- a/2012/08/13/help-test-bootstrap-2-1/index.html +++ b/2012/08/13/help-test-bootstrap-2-1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="We’re stoked to release Bootstrap 2.1 next week Monday at our first birthday party, but to make it a great release, we need your help testing it out. While 2.0.4 was a smaller release, 2.1 is a much larger effort that closes nearly 100 issues and adds a handful of great features. You can see the full list of changes changes in 2.1 thus far by browsing the milestone on GitHub."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/08/20/bootstrap-2-1-0-released/index.html b/2012/08/20/bootstrap-2-1-0-released/index.html index c90a71f8..20aab4de 100644 --- a/2012/08/20/bootstrap-2-1-0-released/index.html +++ b/2012/08/20/bootstrap-2-1-0-released/index.html @@ -8,7 +8,7 @@ <meta name="description" content="After a smaller 2.0.4 release, we’ve got another huge update that resolves tons of bugs, improves the flexibility and durability of our code, and introduces a few awesome new features. It’s a big release wrapped in a brand new set of docs and we couldn’t be more stoked to launch it. tl;dr New docs, affix plugin, submenus on dropdowns, block buttons, image styles, fluid grid offsets, new navbar, increased font-size and line-height, 120+ closed bugs, and more."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/08/22/new-rss-feed/index.html b/2012/08/22/new-rss-feed/index.html index f2bbfcad..137d05d2 100644 --- a/2012/08/22/new-rss-feed/index.html +++ b/2012/08/22/new-rss-feed/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/09/04/bootstrap-2-1-1-released/index.html b/2012/09/04/bootstrap-2-1-1-released/index.html index b5389d30..3cb032fd 100644 --- a/2012/09/04/bootstrap-2-1-1-released/index.html +++ b/2012/09/04/bootstrap-2-1-1-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Two weeks later, we’ve closed another 500 issues against Bootstrap. That includes all the dupes—you nerds like reporting typos—and invalid issues that don’t end up making it on the official release milestone. But, what’s awesome is that we have 2.1.1 ready to rock with 73 bugfixes. Get it Head on over to https://getbootstrap.com and get your fix, or download the latest master ZIP right from GitHub. What’s changed Here’s the rundown:"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/09/29/onward/index.html b/2012/09/29/onward/index.html index 7685883b..b3105491 100644 --- a/2012/09/29/onward/index.html +++ b/2012/09/29/onward/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/10/29/bootstrap-2-2-0-released/index.html b/2012/10/29/bootstrap-2-2-0-released/index.html index 32391bf0..e80e63d4 100644 --- a/2012/10/29/bootstrap-2-2-0-released/index.html +++ b/2012/10/29/bootstrap-2-2-0-released/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Aww yeah, our first release since leaving Twitter is here with Bootstrap 2.2.0! We originally planned to release this as 2.1.2, but given the timing and scope we’re bumping the version. Included in this release are dozens of bug fixes, documentation enhancements, and a few new and improved features. tl;dr 2.1.2 is now 2.2.0: four new example templates, added media component, new typographic scale, fixed that box-shadow mixin bug, fixed z-index issues, and more."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/10/30/2-2-1-hotfix-released/index.html b/2012/10/30/2-2-1-hotfix-released/index.html index 1c35483e..05a1ab18 100644 --- a/2012/10/30/2-2-1-hotfix-released/index.html +++ b/2012/10/30/2-2-1-hotfix-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="After the 2.2.0 release last night, a few bugs were reported, but only one major one: malfunctioning carousels. To address that, @fat just pushed out a 2.2.1 hotfix release that fixes the bug. Upgrading should be super simple given the scope of this release. Download Bootstrap 2.2.1 (latest master ZIP) Once more, apologies for any hiccups and happy Bootstrapping!"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/11/09/glyphicons-font/index.html b/2012/11/09/glyphicons-font/index.html index 7930960d..f6dd7b91 100644 --- a/2012/11/09/glyphicons-font/index.html +++ b/2012/11/09/glyphicons-font/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/12/02/help-test-2.2.2/index.html b/2012/12/02/help-test-2.2.2/index.html index ad0cebd4..5b28c916 100644 --- a/2012/12/02/help-test-2.2.2/index.html +++ b/2012/12/02/help-test-2.2.2/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/2012/12/02/help-test-2.2.2/"> <meta name="description" content="In the next week or so, we plan on releasing v2.2.2. To date, there are over 50 CSS and documentation related issues already closed, and we want to get those out in your hands. We still have some significant JavaScript issues to work out, but those will be punted to 2.2.3 so we don’t hold up development. Our hope is to have that release out by end of year at the latest."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -195,7 +195,7 @@ <p>We would love to have folks help test these changes to prevent further regressions.</p> <ul> <li>Checkout the <code>2.2.2-wip</code> branch, or browse the release candidate docs so you can easily load it up on devices and such for testing. <strong>Note: downloads on the RC docs do not work.</strong></li> -<li>Take a look at the docs and give ‘em a run on the docs, on your phone, your (least?) favorite browser, etc.</li> +<li>Take a look at the docs and give ’em a run on the docs, on your phone, your (least?) favorite browser, etc.</li> <li><a href="https://github.com/twbs/bootstrap/issues?sort=created&direction=desc&state=open">Open a new issue on GitHub</a> to report bugs. Please include as much context and information as possible. If it’s a visual bug, please include a screenshot. If it pertains to JavaScript, consider including a <a href="https://jsfiddle.net/">jsfiddle</a>.</li> </ul> <p>If you’re submitting a pull request against 2.2.2-wip, be sure to read the <a href="https://github.com/twbs/bootstrap/wiki/Contributing-to-Bootstrap">Contributing to Bootstrap</a> wiki page first.</p> diff --git a/2012/12/08/bootstrap-2-2-2-released/index.html b/2012/12/08/bootstrap-2-2-2-released/index.html index 72e1cb92..cd7c0622 100644 --- a/2012/12/08/bootstrap-2-2-2-released/index.html +++ b/2012/12/08/bootstrap-2-2-2-released/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2012/12/10/bootstrap-3-plans/index.html b/2012/12/10/bootstrap-3-plans/index.html index f9249f63..03f26151 100644 --- a/2012/12/10/bootstrap-3-plans/index.html +++ b/2012/12/10/bootstrap-3-plans/index.html @@ -8,7 +8,7 @@ <meta name="description" content="With 2.2.2 out the door, our attention has shifted almost entirely to the next major update to the project, Bootstrap 3. Things are coming together and we want to give you an update on what’s next and give you a chance to share your thoughts. Specifics of v3 Overall, Bootstrap 3 will be rather narrow in focus compared to the last major update. In short, we’ll drop legacy code, improve responsive CSS, and centralize community efforts."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/02/07/bootstrap-2-3-released/index.html b/2013/02/07/bootstrap-2-3-released/index.html index 7894e7e3..c41d257c 100644 --- a/2013/02/07/bootstrap-2-3-released/index.html +++ b/2013/02/07/bootstrap-2-3-released/index.html @@ -8,7 +8,7 @@ <meta name="description" content="It has been far too long, friends. Nearly three months has gone by since we pushed out a new version of Bootstrap, but fret not, for that void comes to a most excellent halt tonight. After numerous delays, including a bout with the flu, we’re happy to announce the release of Bootstrap 2.3. Oh shit what Bootstrap 2.3 includes some new features, as well as the standard bunch of bug fixes and docs improvements."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/03/01/bootstrap-2-3-1-released/index.html b/2013/03/01/bootstrap-2-3-1-released/index.html index 8bce3c63..1043ceea 100644 --- a/2013/03/01/bootstrap-2-3-1-released/index.html +++ b/2013/03/01/bootstrap-2-3-1-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="While Bootstrap 2.3 was the last planned release ahead of 3.0, we’ve just pushed out a small patch to address a few lingering JavaScript bugs. Bootstrap 3 is still under development and is trucking along quite nicely. We’ll have more to share there soon. Until then, here’s what’s new with 2.3.1: Fix missing event type in dropdown plugin Fix delegated data-attrs for popover/tooltip Make carousel actually pause when you click cycle Fix jshint ref in makefile Fix trying to remove backdrop when no backdrop is set Check out the 2."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/03/03/bootstrap-expo/index.html b/2013/03/03/bootstrap-expo/index.html index c1fb5521..e2547e0c 100644 --- a/2013/03/03/bootstrap-expo/index.html +++ b/2013/03/03/bootstrap-expo/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Today we’re launching a new project to showcase the absolute best projects built on Bootstrap, the Bootstrap Expo. The Bootstrap Expo is all hosted on GitHub, meaning recommending new sites is as easy as opening a new issue. It also keeps the primary Bootstrap repo focused on code and documentation, and not dozens of extraneous images. As a side note, the Expo is the second project appearing under the twbs organization (this blog is already there in private mode)."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/05/17/bootstrap-2-3-2-released/index.html b/2013/05/17/bootstrap-2-3-2-released/index.html index 4b78a8d8..d7af9f3d 100644 --- a/2013/05/17/bootstrap-2-3-2-released/index.html +++ b/2013/05/17/bootstrap-2-3-2-released/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/07/18/ante-up/index.html b/2013/07/18/ante-up/index.html index 1557573e..b835a296 100644 --- a/2013/07/18/ante-up/index.html +++ b/2013/07/18/ante-up/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/2013/07/18/ante-up/"> <meta name="description" content="August 19."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/07/27/bootstrap-3-rc1/index.html b/2013/07/27/bootstrap-3-rc1/index.html index 234b1bc1..3bee4274 100644 --- a/2013/07/27/bootstrap-3-rc1/index.html +++ b/2013/07/27/bootstrap-3-rc1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Today we’re releasing the first of at least two release candidates for Bootstrap 3, and along with it a slew of updates to the project and community. Buckle up. New organization We’ve mentioned it a few times in previous updates, but today it’s Facebook Official: Bootstrap has moved to @twbs/bootstrap. Watchers, stars, and the like are all maintained in the move, as is all Git history. New digs, same code."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/08/13/bootstrap-3-rc2/index.html b/2013/08/13/bootstrap-3-rc2/index.html index 0b032f41..41355824 100644 --- a/2013/08/13/bootstrap-3-rc2/index.html +++ b/2013/08/13/bootstrap-3-rc2/index.html @@ -10,7 +10,7 @@ Key changes from RC1 Without listing all the minor changes (there have been over 500 commits since RC1!), here’s a quick overview of the changes. Docs changes: The Customizer is back!"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/08/19/bootstrap-3-released/index.html b/2013/08/19/bootstrap-3-released/index.html index 65190c14..6d934e7a 100644 --- a/2013/08/19/bootstrap-3-released/index.html +++ b/2013/08/19/bootstrap-3-released/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Today, on the two year anniversary of releasing Bootstrap to the world, we’re shipping Bootstrap 3.0. It’s been a crazy long ride to say the least and we’re stoked to finally have this out in the wild. Thanks to everyone who’s tested our RCs (er, betas), reported bugs, and contributed code. We couldn’t have done it without you beautiful nerds. What’s new For those who haven’t been following along too closely, here’s a recap of all the biggest changes shipping with Bootstrap 3:"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/10/29/bootstrap-3-0-1-released/index.html b/2013/10/29/bootstrap-3-0-1-released/index.html index 80e4dbd2..76fc022a 100644 --- a/2013/10/29/bootstrap-3-0-1-released/index.html +++ b/2013/10/29/bootstrap-3-0-1-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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). Download Bootstrap 3.0.1 or hit the GitHub repository Changes Compared to previous releases, we’re going into a bit more detail here with the docs and bug fixes."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/11/06/bootstrap-3-0-2-released/index.html b/2013/11/06/bootstrap-3-0-2-released/index.html index 48bc47e9..331417c1 100644 --- a/2013/11/06/bootstrap-3-0-2-released/index.html +++ b/2013/11/06/bootstrap-3-0-2-released/index.html @@ -10,7 +10,7 @@ Download Bootstrap 3.0.2 or hit the GitHub repository Key changes Here’s the rundown on what’s changed: #10039: Remove window.jQuery for jQuery. #11273: Add branch alias for composer.json. #11295: Restore offset, push, and pull zero classes (e.g., .col-md-offset-0) #11315: Add navigation role to example navbars."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2013/12/05/bootstrap-3-0-3-released/index.html b/2013/12/05/bootstrap-3-0-3-released/index.html index 01ce8e0f..6ab17670 100644 --- a/2013/12/05/bootstrap-3-0-3-released/index.html +++ b/2013/12/05/bootstrap-3-0-3-released/index.html @@ -10,7 +10,7 @@ Download Bootstrap 3.0.3 or hit the GitHub repository Key changes There are a few dozen bug fixes and changes in this release, but we’ve called out the ones we think matter most: Padding of .navbar-collapse and alignment of .navbar-right:last-child elements has been reworked. Added a max-width: 100%; to .containers. Restored the twelfth column’s float: left; at all grid tiers."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2014/01/30/bootstrap-3-1-0-released/index.html b/2014/01/30/bootstrap-3-1-0-released/index.html index f96ce303..39a45d17 100644 --- a/2014/01/30/bootstrap-3-1-0-released/index.html +++ b/2014/01/30/bootstrap-3-1-0-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Today we’re stoked to ship Bootstrap v3.1. We’ve got a handful of new features, plenty of bug fixes and improvements, and updated build tools. New docs We’ve made tons of changes across the board, most notably to our documentation. Just like v2.1 brought a brand new design, v3.1 overhauls the docs to refocus on the actual documentation rather than the chrome around it. Our new homepage restores the quick run through of key features and showcases some awesome examples from the Expo."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -224,15 +224,15 @@ We’ve made tons of changes across the board, most notably to our documenta <p>Get downloading now, or see the list below for more information on what’s new in this release. Download it from GitHub or snag it from the CDN:</p> <p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.1.0.zip">Download Bootstrap 3.1.0</a></p> <p>Or, hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a>.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div><hr> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div><hr> <h2 id="full-changelog">Full changelog</h2> <h3 id="new-features">New features</h3> <ul> @@ -287,7 +287,7 @@ We’ve made tons of changes across the board, most notably to our documenta <li><a href="https://github.com/twbs/bootstrap/pull/12247">#12247</a>: Add and use <code>.text-emphasis-variant()</code> mixin for emphasis classes. Also updated emphasis classes to only apply <code>:hover</code> styles to linked content.</li> <li><a href="https://github.com/twbs/bootstrap/pull/12248">#12248</a>: Add and use <code>.bg-variant()</code> mixin to generate background classes.</li> <li><a href="https://github.com/twbs/bootstrap/pull/12249">#12249</a>: Add and use <code>@modal-md</code> Less variable for uniformity.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/12250">#12250</a>: Remove print <code>margin</code>s per upstream H5BP change, thus deferring to browser defaults, or users' custom values should they set them.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/12250">#12250</a>: Remove print <code>margin</code>s per upstream H5BP change, thus deferring to browser defaults, or users’ custom values should they set them.</li> <li><a href="https://github.com/twbs/bootstrap/pull/12286">#12286</a>: Only remove appropriate <code>border-radius</code> from first and last tables or list groups in panels.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12353">#12353</a>: Scope table border reset in panels to first-child rows.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12359">#12359</a>: Reset <code>min-width</code> on <code><fieldset></code>s so they don’t break responsive tables and behave more like standard block level elements.</li> diff --git a/2014/02/13/bootstrap-3-1-1-released/index.html b/2014/02/13/bootstrap-3-1-1-released/index.html index 9b1b62c5..64c13eca 100644 --- a/2014/02/13/bootstrap-3-1-1-released/index.html +++ b/2014/02/13/bootstrap-3-1-1-released/index.html @@ -12,7 +12,7 @@ Download Bootstrap 3.1.1 Hit the project repository or Sass repository for more options. Bootstrap CDN Update your CDN links to point to the v3.1.1 files: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -204,15 +204,15 @@ Bootstrap CDN Update your CDN links to point to the v3.1.1 files: <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>Update your CDN links to point to the v3.1.1 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div><h2 id="full-changelog">Full changelog</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div><h2 id="full-changelog">Full changelog</h2> <h3 id="css">CSS</h3> <ul> <li><a href="https://github.com/twbs/bootstrap/issues/11659">#11659</a>, <a href="https://github.com/twbs/bootstrap/issues/12349">#12349</a>, <a href="https://github.com/twbs/bootstrap/issues/12698">#12698</a>: Always show the input above appended buttons in input groups for proper focus and disabled state borders.</li> @@ -277,10 +277,10 @@ Bootstrap CDN Update your CDN links to point to the v3.1.1 files: </ul> <h3 id="build-tools">Build tools</h3> <ul> -<li><a href="https://github.com/twbs/bootstrap/issues/12466">#12466</a>: Add the examples' CSS to the <code>csslint</code> task.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/12466">#12466</a>: Add the examples’ CSS to the <code>csslint</code> task.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12531">#12531</a>: Add <code>/docs/dist/</code> to the <code>clean</code> task.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12534">#12534</a>: Allow the bootstrap package in npm to directly expose CSS and Less files.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/12568">#12568</a>: Add the examples' CSS to the <code>csscomb</code> task.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/12568">#12568</a>: Add the examples’ CSS to the <code>csscomb</code> task.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12581">#12581</a>, <a href="https://github.com/twbs/bootstrap/issues/12583">#12583</a>: Reorganize all Grunt tasks into one directory so that <code>grunt</code> runs properly in Bower installations.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12605">#12605</a>: Use license object instead of licenses array in Grunt.</li> </ul> diff --git a/2014/02/25/ratchet-2/index.html b/2014/02/25/ratchet-2/index.html index d79ffcf7..d59530f7 100644 --- a/2014/02/25/ratchet-2/index.html +++ b/2014/02/25/ratchet-2/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2014/03/05/ratchet-2-0-1-released/index.html b/2014/03/05/ratchet-2-0-1-released/index.html index 2268e897..388c4c38 100644 --- a/2014/03/05/ratchet-2-0-1-released/index.html +++ b/2014/03/05/ratchet-2-0-1-released/index.html @@ -11,7 +11,7 @@ Download Ratchet right from GitHub or, go to the project repository. Download Ratchet 2.0.1 For a complete list of changes, see the v2.0.1 milestone. In other news Since releasing Ratchet 2.0.0 we’ve reached over 7,000 stars and over 650 forks on GitHub!"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2014/04/02/ratchet-2-0-2-released/index.html b/2014/04/02/ratchet-2-0-2-released/index.html index a9efc0eb..f23e0d35 100644 --- a/2014/04/02/ratchet-2-0-2-released/index.html +++ b/2014/04/02/ratchet-2-0-2-released/index.html @@ -11,7 +11,7 @@ Download Ratchet right from GitHub or, go to the project repository. Download Ratchet 2.0.2 For a complete list of changes, see the v2.0.2 milestone. What’s next We’re going to be working on the v2.1.0 release next. This will mark the first feature release for Ratchet 2."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2014/06/09/bootstrap-npm/index.html b/2014/06/09/bootstrap-npm/index.html index dc5b9474..00d330bb 100644 --- a/2014/06/09/bootstrap-npm/index.html +++ b/2014/06/09/bootstrap-npm/index.html @@ -9,7 +9,7 @@ <meta name="description" content="It’s taken us awhile, but we’ve finally published Bootstrap on npm. We’ve taken over the existing bootstrap package and just published the latest release, v3.1.1. The package is managed by the twbs user, just like on GitHub. In the future, when we release new versions of Bootstrap, we’ll update npm as well. Speaking of releases, you can expect v3.2.0 sometime later this month. Woohoo! <3"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2014/06/25/lmvtfy/index.html b/2014/06/25/lmvtfy/index.html index 23aa0e25..72ad8ed8 100644 --- a/2014/06/25/lmvtfy/index.html +++ b/2014/06/25/lmvtfy/index.html @@ -8,7 +8,7 @@ <meta name="description" content="If you’ve been following the Bootstrap issue tracker lately, you might have noticed the launch of our new bot, @twbs-lmvtfy, on June 15th. After seeing many reports of Bootstrap bugs that ended up actually being caused by folks using invalid HTML, we decided to do what all programmers do when confronted with a repetitive task: Automate it! To that end, we are excited to announce the availability of Let Me Validate That For You (LMVTFY), an open-source bot that uses the power of the GitHub webhooks API and the validator."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2014/06/26/bootstrap-3-2-0-released/index.html b/2014/06/26/bootstrap-3-2-0-released/index.html index 8ed0cff0..fb4c4954 100644 --- a/2014/06/26/bootstrap-3-2-0-released/index.html +++ b/2014/06/26/bootstrap-3-2-0-released/index.html @@ -10,7 +10,7 @@ Download Bootstrap Download the latest release—source code, compiled assets, and documentation—as a zip file directly from GitHub: Download Bootstrap 3.2.0 Hit the project repository or Sass repository for more options."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -198,15 +198,15 @@ Hit the project repository or Sass repository for more options." /> <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.2.0 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div><h2 id="whats-new">What’s new</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div><h2 id="whats-new">What’s new</h2> <p>Here’s a look at some of the highlights of this release.</p> <h3 id="responsive-embeds">Responsive embeds</h3> <p>As seen in <a href="https://suitcss.github.io/">SUIT CSS</a>, we’ve added a few classes for creating responsive embeds. They’re great for proportionally scaling down YouTube videos and other <code>iframe</code> or <code>embed</code> elements. <a href="https://getbootstrap.com/components/#responsive-embed">Head to the docs</a> to check them out.</p> diff --git a/2014/09/23/bootlint/index.html b/2014/09/23/bootlint/index.html index 997f6ad8..c4e604da 100644 --- a/2014/09/23/bootlint/index.html +++ b/2014/09/23/bootlint/index.html @@ -8,7 +8,7 @@ <meta name="description" content="After hanging out on the Bootstrap issue tracker for a long time, you start to notice some common mistakes folks make (besides just plain invalid HTML). Many of them are covered in our documentation, but our docs can be lengthy and some of the mistakes are pretty subtle or have non-obvious causes. Pointing out the same mistakes repeatedly gets tiring, so once again, we decided to try automating things. The result of our efforts is Bootlint, an HTML linting tool for projects using vanilla Bootstrap."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2014/10/13/rorschach/index.html b/2014/10/13/rorschach/index.html index a636f0af..e2a72fa1 100644 --- a/2014/10/13/rorschach/index.html +++ b/2014/10/13/rorschach/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Bootstrap receives tons of awesome pull requests every week. Many of them come from folks new to contributing to the project. As such, there are a few beginner mistakes we’ve noticed over time. So, we made Rorschach, a bot that runs a few quick checks on every new pull request. Rorschach automatically gives instant feedback on Bootstrap pull requests that suffer from one of several simple mistakes, thus decreasing turnaround time on fixing the pull request."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2014/10/29/bootstrap-3-3-0-released/index.html b/2014/10/29/bootstrap-3-3-0-released/index.html index 4aeef3f7..a2229df3 100644 --- a/2014/10/29/bootstrap-3-3-0-released/index.html +++ b/2014/10/29/bootstrap-3-3-0-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Bootstrap 3.3.0 is here! This release has been all about bug fixes, accessibility improvements, and documentation updates. We’ve had over 700 commits from 28 contributors since our last release. Woohoo! Here are some of the highlights: Added a handful of new Less variables for easier customization. Removed recent progress bar changes for low percentages. Removed all instances of translate3d as they improved repaint performance, but also added several cross browser bugs."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2014/11/12/bootstrap-3-3-1-released/index.html b/2014/11/12/bootstrap-3-3-1-released/index.html index 9b3bdb2a..63d5d5ee 100644 --- a/2014/11/12/bootstrap-3-3-1-released/index.html +++ b/2014/11/12/bootstrap-3-3-1-released/index.html @@ -11,7 +11,7 @@ For a complete breakdown, read the release changelog or the v3.3.1 milestone. Download Bootstrap Download the latest release—source code, compiled assets, and documentation—as a zip file directly from GitHub: Download Bootstrap 3.3.1 Hit the project repository or Sass repository for more options."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -202,15 +202,15 @@ Hit the project repository or Sass repository for more options." /> <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.1 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> <div class="related"> diff --git a/2015/01/19/bootstrap-3-3-2-released/index.html b/2015/01/19/bootstrap-3-3-2-released/index.html index 9ae9c34f..c00d5534 100644 --- a/2015/01/19/bootstrap-3-3-2-released/index.html +++ b/2015/01/19/bootstrap-3-3-2-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -211,15 +211,15 @@ Here are some of the highlights: <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.2 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> <div class="related"> diff --git a/2015/03/16/bootstrap-3-3-4-released/index.html b/2015/03/16/bootstrap-3-3-4-released/index.html index ce5910a9..6999a2a2 100644 --- a/2015/03/16/bootstrap-3-3-4-released/index.html +++ b/2015/03/16/bootstrap-3-3-4-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Bootstrap 3.3.4 is here! This release has been focused on bug fixes and documentation improvements. We’ve had over 325 commits from 29 contributors since our last release! Nice. Here are some of the highlights: Fixes for a few significant bugs in the Modal plugin. Fixes for a couple annoying bugs in the ScrollSpy plugin. Bootstrap is now also available as a Meteor package in the Atmosphere package index. Convenience aliases have been added for currency symbol Glyphicons based on their related 3-letter ISO currency codes."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -207,15 +207,15 @@ Here are some of the highlights: <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.4 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> <div class="related"> diff --git a/2015/06/15/bootstrap-3-3-5-released/index.html b/2015/06/15/bootstrap-3-3-5-released/index.html index a6c8a534..7459da0d 100644 --- a/2015/06/15/bootstrap-3-3-5-released/index.html +++ b/2015/06/15/bootstrap-3-3-5-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Bootstrap 3.3.5 is here! This release has focused on bug fixes, accessibility improvements, and documentation updates. We’ve had over 330 commits and 160 closed issues and pull requests from over 40 contributors since our last release! Hell yeah. Here are some of the highlights: Updated to Normalize.css v3.0.3. Updated main in bower.json to comply with recent update to the bower.json specification List groups now support <button> elements. Cleaned up some extraneous padding on jumbotrons across various viewports."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -209,30 +209,30 @@ Here are some of the highlights: <h2 id="wiredep-and-bower">wiredep and Bower</h2> <p>Due to vagueness in Bower’s specification, wiredep made some questionable assumptions about how the <code>main</code> field in <code>bower.json</code> works. Recently, <a href="https://github.com/bower/spec/pull/43">Bower updated their spec to address this and clarify how <code>main</code> should work</a>, and we <a href="https://github.com/twbs/bootstrap/pull/16359">updated our <code>bower.json</code> accordingly</a>. Unfortunately, <a href="https://github.com/twbs/bootstrap/issues/16663">wiredep broke as a result</a> if you were using it with Bootstrap’s vanilla precompiled CSS. Bower is <a href="https://github.com/bower/spec/issues/47">working to further update their spec</a> to address this problem and better assist tools like wiredep.</p> <p>In the meantime, a quick-and-dirty workaround to get wiredep to work with Bootstrap again is to add the following to your project’s <code>bower.json</code>:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="s2">"overrides"</span><span class="err">:</span> <span class="p">{</span> - <span class="nt">"bootstrap"</span><span class="p">:</span> <span class="p">{</span> - <span class="nt">"main"</span><span class="p">:</span> <span class="p">[</span> - <span class="s2">"dist/js/bootstrap.js"</span><span class="p">,</span> - <span class="s2">"dist/css/bootstrap.css"</span><span class="p">,</span> - <span class="s2">"less/bootstrap.less"</span> - <span class="p">]</span> - <span class="p">}</span> -<span class="p">}</span> -</code></pre></div><h2 id="download-bootstrap">Download Bootstrap</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="s2">"overrides"</span><span class="err">:</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nt">"bootstrap"</span><span class="p">:</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nt">"main"</span><span class="p">:</span> <span class="p">[</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"dist/js/bootstrap.js"</span><span class="p">,</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"dist/css/bootstrap.css"</span><span class="p">,</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"less/bootstrap.less"</span> +</span></span><span class="line"><span class="cl"> <span class="p">]</span> +</span></span><span class="line"><span class="cl"> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><h2 id="download-bootstrap">Download Bootstrap</h2> <p>Download the latest release—source code, compiled assets, and documentation—as a ZIP file directly from GitHub:</p> <p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.3.5.zip">Download Bootstrap 3.3.5</a></p> <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.5 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> <div class="related"> diff --git a/2015/08/04/no-carrier/index.html b/2015/08/04/no-carrier/index.html index d69869cb..d6f22cd3 100644 --- a/2015/08/04/no-carrier/index.html +++ b/2015/08/04/no-carrier/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Say hello to our newest bot, No Carrier. Inspired by the classic modem disconnection error message of yesteryear, No Carrier helps us track issues that appear to have been abandoned by the original poster. Issues that go without a reply to our questions for two weeks are closed with a friendly explanation by No Carrier. To date, we’ve handled abandoned issues just like any other issues—with ad-hoc reviews. We felt that could be improved, so we made a bot to automate the process."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2015/08/19/bootstrap-4-alpha/index.html b/2015/08/19/bootstrap-4-alpha/index.html index ac13d0bf..6c402c12 100644 --- a/2015/08/19/bootstrap-4-alpha/index.html +++ b/2015/08/19/bootstrap-4-alpha/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we’re finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re stoked to share it with you and hear your feedback. We’ve got a lot of news to share with you, so let’s jump right into it."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2015/11/24/bootstrap-3-3-6-released/index.html b/2015/11/24/bootstrap-3-3-6-released/index.html index be3019be..1c56c3cc 100644 --- a/2015/11/24/bootstrap-3-3-6-released/index.html +++ b/2015/11/24/bootstrap-3-3-6-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -204,15 +204,15 @@ Here are some of the highlights: <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.6 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> <div class="related"> diff --git a/2015/12/08/bootstrap-4-alpha-2/index.html b/2015/12/08/bootstrap-4-alpha-2/index.html index b274fbfb..72adf703 100644 --- a/2015/12/08/bootstrap-4-alpha-2/index.html +++ b/2015/12/08/bootstrap-4-alpha-2/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Bootstrap 4 alpha 2 is now available. Since our last release, nearly 100 people have pushed over 900 commits to v4 and we’ve closed over 400 issues and pull requests. Those numbers are outrageously awesome to see, and we’ve still got a ton of work ahead of us this year for v4. As mentioned in our last post, the general plan for v4’s development starts with a few alpha releases. We’re a little behind on that, but should be getting caught up as the year winds down."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2016/07/25/bootstrap-3-3-7-released/index.html b/2016/07/25/bootstrap-3-3-7-released/index.html index cd10da76..28073696 100644 --- a/2016/07/25/bootstrap-3-3-7-released/index.html +++ b/2016/07/25/bootstrap-3-3-7-released/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Bootstrap 3.3.7 is here! We’ve had over 220 commits and 80 closed issues and pull requests from nearly 30 contributors since our last release. Woohoo! Here are some of the highlights: Added support for jQuery 3. Added inline source files into sourcemap eliminating 4xx errors on the CDN. Updated several devDependencies and gems. Removed unsupported vendor prefixes for @viewport. For a complete breakdown, read the release changelog and the v3."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -203,15 +203,15 @@ Here are some of the highlights: <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.7 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> <div class="related"> diff --git a/2016/07/27/bootstrap-4-alpha-3/index.html b/2016/07/27/bootstrap-4-alpha-3/index.html index ea78943a..b278180e 100644 --- a/2016/07/27/bootstrap-4-alpha-3/index.html +++ b/2016/07/27/bootstrap-4-alpha-3/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Alpha 3 has landed! We have an overhauled grid, updated form controls, a new font stack, tons of bug fixes, and more. It’s been several months since our last update, but the size of this update should help get us back on track. Work on Alpha 3 started rather broadly, addressing bug fixes and docs updates of all shapes and sizes, but finished with a narrow focus on our form controls and grid system."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -233,19 +233,19 @@ Work on Alpha 3 started rather broadly, addressing bug fixes and docs updates of <p>Speaking of validation states, we have <strong>brand new form validation and help text options</strong>. Validation states can now be applied on a per-input basis (with <code>.form-control-{state}</code>) and optional validation feedback can be shown with <code>.form-control-feedback</code>. Independent form help text can now be controlled with the new <code>.form-text</code> class.</p> </li> </ul> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-group has-success"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"inputSuccess1"</span><span class="p">></span> - Input with success - <span class="p"></</span><span class="nt">label</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control form-control-success"</span> <span class="na">id</span><span class="o">=</span><span class="s">"inputSuccess1"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control-feedback"</span><span class="p">></span> - Success! You've done it. - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-text text-muted"</span><span class="p">></span> - Example help text that remains unchanged. - <span class="p"></</span><span class="nt">small</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><ul> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-group has-success"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"inputSuccess1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Input with success +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control form-control-success"</span> <span class="na">id</span><span class="o">=</span><span class="s">"inputSuccess1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control-feedback"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Success! You've done it. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-text text-muted"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Example help text that remains unchanged. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><ul> <li> <p>Fixed a few form related bugs, like the horizontal label padding in <a href="https://github.com/twbs/bootstrap/issues/17498">#17498</a>, misuse of <code><fieldset></code>s for form groups, sizing classes not applying to <code><select></code>s, and more.</p> </li> diff --git a/2016/09/05/bootstrap-4-alpha-4/index.html b/2016/09/05/bootstrap-4-alpha-4/index.html index 9b2190a6..befb4f41 100644 --- a/2016/09/05/bootstrap-4-alpha-4/index.html +++ b/2016/09/05/bootstrap-4-alpha-4/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Alpha 4 is here to address those pesky build and package errors, a few CSS bugs, and some documentation inconsistencies we introduced in our last release. This is a super small release compared to our previous alphas, so here’s the rundown on what’s changed: Fixed package.json errors Additional migration notices for more components Fix broken flexbox utilities on flexbox grid page Fix inconsistent checkbox and radio markup, as well as validation styles Minor tweaks to cards, alerts, utilities, and input groups At the time of release, the Bootstrap CDN hasn’t been updated for Alpha 4."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -200,12 +200,12 @@ This is a super small release compared to our previous alphas, so here’s t <p>At the time of release, the Bootstrap CDN hasn’t been updated for Alpha 4. Apologies for the delay, and stay tuned for an update on when they’re live.</p> <p>For more details on this release’s changes, take a look at the <a href="https://github.com/twbs/bootstrap/issues/20373">Alpha 4 ship list issue</a>, as well as the <a href="https://github.com/twbs/bootstrap/milestone/40?closed=1">closed Alpha 4 milestone</a>. Be sure to <a href="https://bootstrap-slack.herokuapp.com">join our official Slack room!</a> and dive into <a href="https://github.com/twbs/bootstrap/issues/">our issue tracker</a> with bug reports, questions, and general feedback whenever possible.</p> <p><strong>Using the Bootstrap CDN?</strong> Review the changelog and update your CDN links to point to the latest files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> <div class="related"> diff --git a/2016/10/19/bootstrap-4-alpha-5/index.html b/2016/10/19/bootstrap-4-alpha-5/index.html index 07fffe23..99b2b019 100644 --- a/2016/10/19/bootstrap-4-alpha-5/index.html +++ b/2016/10/19/bootstrap-4-alpha-5/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -240,12 +240,12 @@ New CSS bundles We’ve updated our build process to include compiled versio <hr> <p>For more details on this release’s changes, take a look at the <a href="https://github.com/twbs/bootstrap/issues/20630">Alpha 5 ship list issue</a>, as well as the <a href="https://github.com/twbs/bootstrap/milestone/36?closed=1">closed Alpha 5 milestone</a>. Be sure to <a href="https://bootstrap-slack.herokuapp.com">join our official Slack room!</a> and dive into <a href="https://github.com/twbs/bootstrap/issues/">our issue tracker</a> with bug reports, questions, and general feedback whenever possible.</p> <p><strong>Using the Bootstrap CDN?</strong> Review the changelog and update your CDN links to point to the latest files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> <div class="related"> diff --git a/2017/01/06/bootstrap-4-alpha-6/index.html b/2017/01/06/bootstrap-4-alpha-6/index.html index c18bb89b..2b132716 100644 --- a/2017/01/06/bootstrap-4-alpha-6/index.html +++ b/2017/01/06/bootstrap-4-alpha-6/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Alpha 6 has landed, and it’s one of our biggest ships to date. We’ve rewritten our grid system and all major components in flexbox, forging ahead with it as our default layout option as we drop IE9 support. With 700 commits since our last release, we have some catching up to do. Read one for highlights from this release. We also recommend reviewing the ship list and milestone for a more detailed look at what’s changed."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -234,12 +234,12 @@ Read one for highlights from this release. We also recommend reviewing the ship <hr> <p>For more details on this release’s changes, take a look at the <a href="https://github.com/twbs/bootstrap/issues/20939">Alpha 6 ship list issue</a>, as well as the <a href="https://github.com/twbs/bootstrap/milestone/39?closed=1">closed Alpha 6 milestone</a>. Be sure to <a href="https://bootstrap-slack.herokuapp.com">join our official Slack room!</a> and dive into <a href="https://github.com/twbs/bootstrap/issues/">our issue tracker</a> with bug reports, questions, and general feedback whenever possible.</p> <p><strong>Using the Bootstrap CDN?</strong> Review the changelog and update your CDN links to point to the latest files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div><script src="https://static.jsbin.com/js/embed.min.js"></script> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div><script src="https://static.jsbin.com/js/embed.min.js"></script> </div> diff --git a/2017/08/10/bootstrap-4-beta/index.html b/2017/08/10/bootstrap-4-beta/index.html index 09650ff2..a397eaaf 100644 --- a/2017/08/10/bootstrap-4-beta/index.html +++ b/2017/08/10/bootstrap-4-beta/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Two years in the making, we finally have our first beta release of Bootstrap 4. In that time, we’ve broken all the things at least twenty-seven times over with nearly 5,000 commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted. We also shipped six major alpha releases, a trio of official Themes, and even a job board for good measure. Put simply? It’s about time. Beta!? Long story short, shipping a beta means we’re done breaking all your stuff until our next major version (v5)."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2017/10/19/bootstrap-4-beta-2/index.html b/2017/10/19/bootstrap-4-beta-2/index.html index 5ef6f8d0..f81f4322 100644 --- a/2017/10/19/bootstrap-4-beta-2/index.html +++ b/2017/10/19/bootstrap-4-beta-2/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Just over two months ago we shipped our first beta for Bootstrap 4, and now we’re ready to share our second with you. We’ve improved customization, documentation, build tooling, and naming inconsistencies all while fixing hella bugs. We’ve done our best to prevent breaking changes, but we had to sneak some in. Regrettably, we’ll also have a few more coming in Beta 3, too. However, we’re clearly outlining all of them for you to make the upgrade and testing process as easy as possible."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2017/12/28/bootstrap-4-beta-3/index.html b/2017/12/28/bootstrap-4-beta-3/index.html index 2af1f1eb..dd8cdca2 100644 --- a/2017/12/28/bootstrap-4-beta-3/index.html +++ b/2017/12/28/bootstrap-4-beta-3/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Welcome to the final beta of v4! It’s been over two months since we shipped our second beta and we’ve been busy making the last breaking changes before moving to our next stable release, v4.0.0! We have a few more breaking changes than we were planning, but fret not, we’ve detailed them all. Beta 3 primarily focuses around our forms, but it also includes key fixes to tables, some global styles, our documentation, and some JavaScript bugs."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2018/01/18/bootstrap-4/index.html b/2018/01/18/bootstrap-4/index.html index 960302f8..79cfd170 100644 --- a/2018/01/18/bootstrap-4/index.html +++ b/2018/01/18/bootstrap-4/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2018/02/21/new-bootstrap-themes/index.html b/2018/02/21/new-bootstrap-themes/index.html index d924f96c..bf318219 100644 --- a/2018/02/21/new-bootstrap-themes/index.html +++ b/2018/02/21/new-bootstrap-themes/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Just over a month ago, we shipped the long awaited Bootstrap 4 stable release. With a brand new codebase designed to better support customization with all new components and documentation, it was the perfect time to debut some brand new themes built. Today, we’d like to introduce you to our brand new Bootstrap Themes marketplace. 10 new themes Over the last several months, we’ve been hard at work with theme creators to build the best themes for you."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2018/04/09/bootstrap-4-1/index.html b/2018/04/09/bootstrap-4-1/index.html index 0e8f2fa6..44a2b105 100644 --- a/2018/04/09/bootstrap-4-1/index.html +++ b/2018/04/09/bootstrap-4-1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Two months ago we shipped the first major release of Bootstrap 4 and we’re thrilled y’all love the latest release and our brand new themes so much. Today we’re shipping our first minor release, v4.1! This release comes later than expected and some of the fixes we intended, but there’s still a boatload of fixes, docs updates, build tool changes, and even a few small new features. Updated docs URL With the release of v4 stable, we moved to a versioned docs setup, meaning each minor release would bring with it a new hosted version of our docs."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2018/04/30/bootstrap-4-1-1/index.html b/2018/04/30/bootstrap-4-1-1/index.html index bff45d74..49752f03 100644 --- a/2018/04/30/bootstrap-4-1-1/index.html +++ b/2018/04/30/bootstrap-4-1-1/index.html @@ -9,7 +9,7 @@ <meta name="description" content="We’re a few weeks out from v4.1 and we have our first patch release of Bootstrap 4! It’s a straightforward set of bug fixes and build tool quality of life updates. Here’s a quick rundown of some of the changes: Added validation styles for file inputs Improved printing of dark tables Suppressed that text-hide deprecation notice by default Fixed an issue where Collapse wasn’t working in Internet Explorer Cleaned up some JS globals and improve coverage Bumped dependencies, namely Jekyll Fixed docs issue with incorrect name for our monospace font utility Checkout the full v4."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2018/07/12/bootstrap-4-1-2/index.html b/2018/07/12/bootstrap-4-1-2/index.html index ed46478a..01012a18 100644 --- a/2018/07/12/bootstrap-4-1-2/index.html +++ b/2018/07/12/bootstrap-4-1-2/index.html @@ -8,7 +8,7 @@ <meta name="description" content="We’ve been busy these last couple months since launching v4.1.1, but we’re back with another bug fix and some sweeping changes to how we build and publish our docs after the issues stemming from our v4.1.x launches. When we launched v4.1, we ran into unexpected issues with having to rearrange asset paths after deploying, resulting in broken image URLs, a busted service worker, and more. Since then, we’re ironed out most of the kinks and introduced a new docs directory structure inside the repo."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2018/07/24/bootstrap-4-1-3/index.html b/2018/07/24/bootstrap-4-1-3/index.html index abd956a8..5bbab37f 100644 --- a/2018/07/24/bootstrap-4-1-3/index.html +++ b/2018/07/24/bootstrap-4-1-3/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2018/12/13/bootstrap-3-4-0/index.html b/2018/12/13/bootstrap-3-4-0/index.html index 86577caf..5dc2e0f9 100644 --- a/2018/12/13/bootstrap-3-4-0/index.html +++ b/2018/12/13/bootstrap-3-4-0/index.html @@ -8,7 +8,7 @@ <meta name="description" content="That’s not a typo—today we’re shipping Bootstrap 3.4.0, a long overdue update to address some quality of life issues, XSS fixes, and build tooling updates to make it easier for us, and you, to develop. While we’d planned for ages to do a fresh v3.x update, we lost steam as energy was focused on all the work in v4. Early this year, one issue in particular gained a ton of momentum from the community and the core team decided to do a huge push to pull together a solid release."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2018/12/21/bootstrap-4-2-1/index.html b/2018/12/21/bootstrap-4-2-1/index.html index e5ab2e6b..ddc74b72 100644 --- a/2018/12/21/bootstrap-4-2-1/index.html +++ b/2018/12/21/bootstrap-4-2-1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Look out world, we’re shipping Bootstrap v4.2.1 with a slew of new features, bug fixes, and docs updates. On the new features side, we have spinners, toasts, switches, and (finally!) touch support in the carousel. That’s just the tip of the iceberg though. Heads up! v4.2.0 was incorrectly published to npm, so we’ve had to immediately turnaround a v4.2.1 release. npm i bootstrap@latest should now return 4.2.1. Apologies for the inconvenience!"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2019/02/11/bootstrap-4-3-0/index.html b/2019/02/11/bootstrap-4-3-0/index.html index bf281ccc..688a848f 100644 --- a/2019/02/11/bootstrap-4-3-0/index.html +++ b/2019/02/11/bootstrap-4-3-0/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Bootstrap v4.3 has landed with over 120 combined closed issues and merged pull requests. This release brings improvements to our utilities, some prep work for moving on to v5’s development, and the standard bug fixes and documentation updates. During our last release, we shared a small preview of where we’re taking the project next. That’s getting clearer in the coming weeks as our attention turns towards embracing Hugo for ultra fast docs development, removing jQuery in favor of regular JavaScript, and addressing our growing code base."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2019/02/13/bootstrap-4-3-1-and-3-4-1/index.html b/2019/02/13/bootstrap-4-3-1-and-3-4-1/index.html index adbadb94..8c354321 100644 --- a/2019/02/13/bootstrap-4-3-1-and-3-4-1/index.html +++ b/2019/02/13/bootstrap-4-3-1-and-3-4-1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Today we’re shipping Bootstrap v4.3.1 and v3.4.1 to patch an XSS vulnerability, CVE-2019-8331. Also included in v4.3.1 is a small fix to some RFS (responsive font sizes) mixins that were added in v4.3.0. Earlier this week a developer reported an XSS issue similar to the data-target vulnerability that was fixed in v4.1.2 and v3.4.0: the data-template attribute for our tooltip and popover plugins lacked proper XSS sanitization of the HTML that can be passed into the attribute’s value."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2019/07/24/lts-plan/index.html b/2019/07/24/lts-plan/index.html index a2188dd9..2145c1ea 100644 --- a/2019/07/24/lts-plan/index.html +++ b/2019/07/24/lts-plan/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2019/11/26/bootstrap-4-4-0/index.html b/2019/11/26/bootstrap-4-4-0/index.html index fd684b9b..b535a417 100644 --- a/2019/11/26/bootstrap-4-4-0/index.html +++ b/2019/11/26/bootstrap-4-4-0/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Bootstrap 4 has a new update with a handful of feature changes. We’ve had quite the lengthy pull request to add responsive containers—big thanks to the developers who contribute to Bootstrap for sticking with it and helping us along the way. Nearly all new features will be carried forward into Bootstrap 5, so feel free to start using them now. Highlights Here’s what you need to know about v4.4.0. Remember that with every minor and major release of Bootstrap, we ship a new URL for our hosted docs to ensure URLs continue to work."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -205,7 +205,7 @@ Highlights Here’s what you need to know about v4.4.0. Remember that with e <p>We’ve shipped a lot more in this release, so be sure to check out the <a href="https://github.com/twbs/bootstrap/issues?q=project%3Atwbs%2Fbootstrap%2F18+is%3Aclosed+sort%3Aupdated-desc">v4.4.0 ship list of closed issues and merged pull requests</a> for more details.</p> <p><a href="https://getbootstrap.com/docs/4.4/">Head to to the v4.4.0 docs</a> to see the latest in action. The full release has been published to npm and will soon appear on the BootstrapCDN and Rubygems.</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> +<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> </div> diff --git a/2019/11/26/bootstrap-icons/index.html b/2019/11/26/bootstrap-icons/index.html index be0286cd..4838d98d 100644 --- a/2019/11/26/bootstrap-icons/index.html +++ b/2019/11/26/bootstrap-icons/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Say hello to Bootstrap Icons, our very first icon set that’s designed entirely by our team and open sourced for everyone to use, with or without Bootstrap. It’s still in alpha, but we’re incredibly excited to share it with y’all ahead of our v5 alpha. For the longest time, I’ve wanted to design an icon set to better lean how to better draw with different pen tools and to better understand SVGs."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2019/11/28/bootstrap-4-4-1/index.html b/2019/11/28/bootstrap-4-4-1/index.html index 05cbca4b..4880b509 100644 --- a/2019/11/28/bootstrap-4-4-1/index.html +++ b/2019/11/28/bootstrap-4-4-1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Today we’re shipping Bootstrap v4.4.1! In v4.4.0, we added add() and subtract() functions to avoid errors when using zero values in CSS’s built in calc() function. While these functions work as expected with our build system, which is based on node-sass, some alert developers noticed that things broke when using another Sass compiler like Dart Sass or Ruby Sass. To resolve this issue, we’ve tweaked these functions a bit to output what we would expect."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2019/12/14/bootstrap-icons-alpha2/index.html b/2019/12/14/bootstrap-icons-alpha2/index.html index 3f1918a5..668b35a6 100644 --- a/2019/12/14/bootstrap-icons-alpha2/index.html +++ b/2019/12/14/bootstrap-icons-alpha2/index.html @@ -8,7 +8,7 @@ <meta name="description" content="There’s a brand new update of Bootstrap Icons today with our second alpha release! We’ve updated nearly 20 icons and added over 100 new icons since our last release just a few weeks ago. New icons With over 120 new and updated icons, this is likely going to be our largest update before we our first stable release. We have some renamed icons, fixed bugs, new tools icons, new typography icons, tons of new arrows, and so much more."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -219,7 +219,7 @@ New icons With over 120 new and updated icons, this is likely going to be our la </ul> </li> </ul> -<h2 id="get-em">Get ‘em</h2> +<h2 id="get-em">Get ’em</h2> <p>Alpha 2 has been published to GitHub and npm (package name <code>bootstrap-icons</code>). Get your hands on it <a href="https://github.com/twbs/icons/releases">from GitHub</a>, by updating to <code>v1.0.0-alpha2</code>, or by snagging the <a href="https://www.figma.com/file/0xfDVFogWu6g15bVOvBzxS/Bootstrap-Icons-v1.0.0-alpha2">icons from Figma</a>.</p> </div> diff --git a/2020/03/19/bootstrap-icons-alpha-3/index.html b/2020/03/19/bootstrap-icons-alpha-3/index.html index 4be41554..2299e216 100644 --- a/2020/03/19/bootstrap-icons-alpha-3/index.html +++ b/2020/03/19/bootstrap-icons-alpha-3/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2020/05/12/bootstrap-4-5-0/index.html b/2020/05/12/bootstrap-4-5-0/index.html index 89b2f901..9de23a43 100644 --- a/2020/05/12/bootstrap-4-5-0/index.html +++ b/2020/05/12/bootstrap-4-5-0/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Bootstrap v4.5.0 has landed with dozens of bug fixes, some small new features, and some changes to our development. Originally planned as a v4.4.2 patch release, we’ve bumped this to a minor release on account of our new features that help bridge the gap between v4 and our upcoming v5. Highlights Here’s what you need to know about v4.5.0. Remember that with every minor and major release of Bootstrap, we ship a new URL for our hosted docs to ensure URLs continue to work."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -201,7 +201,7 @@ Highlights Here’s what you need to know about v4.5.0. Remember that with e <p>We’ve shipped a lot more in this release, so be sure to check out the <a href="https://github.com/twbs/bootstrap/releases/tag/v4.5.0">v4.5.0 GitHub release</a> and the <a href="https://github.com/twbs/bootstrap/projects/20">v4.5.0 project for closed issues and merged pull requests</a> for more details.</p> <p><a href="https://getbootstrap.com/docs/4.5/">Head to the v4.5.0 docs</a> to see the latest in action. The full release has been published to npm and will soon appear on the BootstrapCDN and Rubygems.</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> +<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> </div> diff --git a/2020/05/21/bootstrap-icons-alpha4/index.html b/2020/05/21/bootstrap-icons-alpha4/index.html index 33586e6f..db1daf53 100644 --- a/2020/05/21/bootstrap-icons-alpha4/index.html +++ b/2020/05/21/bootstrap-icons-alpha4/index.html @@ -8,7 +8,7 @@ <meta name="description" content="We’re closing in on 700 icons in Bootstrap Icons with today’s release, Alpha 4! We’ve spent some time under the hood of our build process to improve a few things, added tons of new icons, and fixed some bugs and inconsistencies. We’ve shipped tons of new commerce icons for all your shopping cart needs, added tons of calendar options (I couldn’t settle on one design), tons of new shape arrows, and more."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2020/06/16/bootstrap-5-alpha/index.html b/2020/06/16/bootstrap-5-alpha/index.html index efb6a44a..3492e356 100644 --- a/2020/06/16/bootstrap-5-alpha/index.html +++ b/2020/06/16/bootstrap-5-alpha/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -192,7 +192,7 @@ We’ve been focused on making the migration from v4 to v5 more approachable <h2 id="new-look-and-feel">New look and feel</h2> <p>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.</p> <p><a href="https://v5.getbootstrap.com"><img src="/assets/img/2020/06/v5-home.png" alt="New Bootstrap docs layout"></a></p> -<p>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.</p> +<p>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.</p> <p><img src="/assets/img/2020/06/v5-new-logo.png" alt="New Bootstrap logo"></p> <p>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.</p> <h2 id="jquery-and-javascript">jQuery and JavaScript</h2> @@ -204,19 +204,19 @@ We’ve been focused on making the migration from v4 to v5 more approachable <h2 id="css-custom-properties">CSS custom properties</h2> <p>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.</p> <p>Take for example our <code>.table</code> component, where we’ve added a handful of local variables to make striped, hoverable, and active table styles easier:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.table</span> <span class="p">{</span> - <span class="na">--bs-table-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-bg</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-accent-bg</span><span class="o">:</span> <span class="ni">transparent</span><span class="p">;</span> - <span class="na">--bs-table-striped-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-striped-color</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-striped-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-striped-bg</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-active-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-active-color</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-active-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-active-bg</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-hover-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-hover-color</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-hover-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-hover-bg</span><span class="si">}</span><span class="p">;</span> - - <span class="c1">// Styles here... -</span><span class="c1"></span><span class="p">}</span> -</code></pre></div><p>We’re working to utilize the superpowers of both Sass and CSS custom properties for a more flexible system. You can <a href="https://v5.getbootstrap.com/docs/5.0/content/tables/#how-do-the-variants-and-accented-tables-work">read more about this in the Tables docs page</a> and expect to see more usage in components like buttons in the near future.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nc">.table</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-bg</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-accent-bg</span><span class="o">:</span> <span class="ni">transparent</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-striped-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-striped-color</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-striped-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-striped-bg</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-active-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-active-color</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-active-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-active-bg</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-hover-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-hover-color</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-hover-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-hover-bg</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"> <span class="c1">// Styles here... +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> +</span></span></code></pre></div><p>We’re working to utilize the superpowers of both Sass and CSS custom properties for a more flexible system. You can <a href="https://v5.getbootstrap.com/docs/5.0/content/tables/#how-do-the-variants-and-accented-tables-work">read more about this in the Tables docs page</a> and expect to see more usage in components like buttons in the near future.</p> <h2 id="improved-customizing-docs">Improved customizing docs</h2> <p>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 <a href="https://v5.getbootstrap.com/docs/5.0/customize/overview/">new Customize section</a>.</p> <p><img src="/assets/img/2020/06/v5-customize.png" alt="Bootstrap 5 customize docs"></p> @@ -229,53 +229,53 @@ We’ve been focused on making the migration from v4 to v5 more approachable <p>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.</p> <p><img src="/assets/img/2020/06/v5-checks.png" alt="New Bootstrap 5 checks"></p> <p>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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> - Default checkbox - <span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> - Default radio - <span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>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.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default checkbox +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default radio +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>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.</p> <p>Be sure to <a href="https://v5.getbootstrap.com/docs/5.0/forms/overview/">explore the new forms docs</a> and let us know what you think.</p> <h2 id="utilities-api">Utilities API</h2> <p>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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> - <span class="p">(</span> - <span class="c1">// ...</span> - <span class="s2">"width"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">property</span><span class="o">:</span> <span class="ni">width</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="n">w</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="p">(</span> - <span class="na">25</span><span class="o">:</span> <span class="mi">25</span><span class="kt">%</span><span class="o">,</span> - <span class="na">50</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> - <span class="na">75</span><span class="o">:</span> <span class="mi">75</span><span class="kt">%</span><span class="o">,</span> - <span class="na">100</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> - <span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span> - <span class="p">)</span> - <span class="p">)</span><span class="o">,</span> - <span class="c1">// ...</span> - <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> - <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> - <span class="p">)</span><span class="o">,</span> - <span class="c1">// ...</span> - <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> -</code></pre></div><p>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 <code>$enable-*</code> 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 <a href="https://github.com/martijncuppens">@MartijnCuppens</a>, who also maintains <a href="https://github.com/twbs/rfs">the RFS project</a>, and is responsible for the initial PR and subsequent improvements.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"width"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="ni">width</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="n">w</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mi">25</span><span class="kt">%</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mi">75</span><span class="kt">%</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> +</span></span></code></pre></div><p>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 <code>$enable-*</code> 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 <a href="https://github.com/martijncuppens">@MartijnCuppens</a>, who also maintains <a href="https://github.com/twbs/rfs">the RFS project</a>, and is responsible for the initial PR and subsequent improvements.</p> <p>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.</p> <p><strong>Heads up!</strong> 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 <code>property-value</code> pairing for our utilities. Just our way of reorganizing things for easier naming and improved documentation.</p> <h2 id="enhanced-grid-system">Enhanced grid system</h2> @@ -289,12 +289,12 @@ We’ve been focused on making the migration from v4 to v5 more approachable <li>Columns are no longer <code>position: relative</code> by default.</li> </ul> <p>Here’s a quick example of how to use the new grid gutter classes:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"row g-5"</span><span class="o">></span> - <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> - <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> - <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> -<span class="o"></</span><span class="nt">div</span><span class="o">></span> -</code></pre></div><p>Take a look at the <a href="https://v5.getbootstrap.com/docs/5.0/layout/">redesigned and restructured Layout docs to learn more</a>.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"row g-5"</span><span class="o">></span> +</span></span><span class="line"><span class="cl"> <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> +</span></span><span class="line"><span class="cl"> <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> +</span></span><span class="line"><span class="cl"> <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> +</span></span><span class="line"><span class="cl"><span class="o"></</span><span class="nt">div</span><span class="o">></span> +</span></span></code></pre></div><p>Take a look at the <a href="https://v5.getbootstrap.com/docs/5.0/layout/">redesigned and restructured Layout docs to learn more</a>.</p> <p><em>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.</em></p> <h2 id="docs">Docs</h2> <p>We switched our documentation static site generator from <a href="https://jekyllrb.com/">Jekyll</a> to <a href="https://gohugo.io/">Hugo</a>. 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.</p> @@ -322,12 +322,12 @@ We’ve been focused on making the migration from v4 to v5 more approachable <p>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.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://v5.getbootstrap.com">https://v5.getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</code></pre></div><h2 id="whats-next">What’s next</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@next +</span></span></code></pre></div><h2 id="whats-next">What’s next</h2> <p>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.</p> <p>Beyond that, keep an eye for more updates to the <a href="https://icons.getbootstrap.com">Bootstrap Icons</a> project, our <a href="https://github.com/twbs/rfs">RFS project</a> (now enabled by default in v5), and the <a href="https://github.com/twbs/bootstrap-npm-starter">npm starter project</a>.</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> +<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> </div> diff --git a/2020/06/26/bootstrap-icons-alpha5/index.html b/2020/06/26/bootstrap-icons-alpha5/index.html index 51037247..bac593d7 100644 --- a/2020/06/26/bootstrap-icons-alpha5/index.html +++ b/2020/06/26/bootstrap-icons-alpha5/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Today we’re shipping our fifth and final alpha release of Bootstrap Icons. After today’s alpha release, we’ll be moving onto final touch ups of existing icons, closing out some more requests, and buttoning things up for a stable v1 release. Stay tuned! 1,000+ icons This release adds nearly 300 new glyphs, taking us right past 1,000 icons. We’ve fleshed out all our calendar icons to add ranges and events, added a suite of new phone icons, added tons of new devices and hardware icons, dozens of badges, and so much more."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -193,16 +193,16 @@ <h2 id="new-svg-sprite">New SVG sprite</h2> <p>In addition to hundreds of new icons, we’ve added a new <code>bootstrap-icons.svg</code> sprite. For those new to SVG sprites, it allows you to load a single asset and reference fragments of it across your project without inserting the entire HTML for the SVG.</p> <p>Here’s a quick look at how it works once imported:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#heart-fill"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span> -<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#toggles"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span> -<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#shop"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span> -</code></pre></div><p>We hope to include some optimizations around this in the future as it’s our first endeavor into an SVG sprite system. Feedback and ideas are always welcome in our issues!</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#heart-fill"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#toggles"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#shop"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span> +</span></span></code></pre></div><p>We hope to include some optimizations around this in the future as it’s our first endeavor into an SVG sprite system. Feedback and ideas are always welcome in our issues!</p> <h2 id="coming-in-v1-stable">Coming in v1 stable</h2> <p>The single biggest feature coming in v1’s stable release will be <a href="https://github.com/twbs/icons/pull/287">icon web fonts</a>. There’s a PR underway that requires further SVG path cleanup, as well as some tooling improvements. Overall it feels pretty promising!</p> <p>While icon fonts are great for a handful of implementation reasons, please be aware that they are not inherently the most accessible option for your visitors. SVGs provide more control and styling options, and allow you to be accessible from the start with <code>aria</code> roles and <code><title></code>s.</p> diff --git a/2020/08/04/bootstrap-4-5-1/index.html b/2020/08/04/bootstrap-4-5-1/index.html index 467a021d..fccae7aa 100644 --- a/2020/08/04/bootstrap-4-5-1/index.html +++ b/2020/08/04/bootstrap-4-5-1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -198,7 +198,7 @@ Our next couple releases for Bootstrap 4 will continue this trend, focusing on b <li>#30922: Fix color on disabled checked state for custom controls</li> <li>#30932: Restore <code>word-break: break-word;</code> on <code>.text-break</code> utility.</li> <li>#30940: Prevent <code>.row</code> from shrinking in flex containers</li> -<li>#30957: Nullify custom form states' <code>box-shadow</code></li> +<li>#30957: Nullify custom form states’ <code>box-shadow</code></li> <li>#30959: Toasts in IE11</li> <li>#30960: Fix IE11 validation tooltip alignment in input groups</li> <li>#30965: Improve floating labels example in IE</li> @@ -241,7 +241,7 @@ Our next couple releases for Bootstrap 4 will continue this trend, focusing on b <p>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.</p> <p>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!</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> +<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> </div> diff --git a/2020/08/06/bootstrap-4-5-2/index.html b/2020/08/06/bootstrap-4-5-2/index.html index edd38080..464dc2f5 100644 --- a/2020/08/06/bootstrap-4-5-2/index.html +++ b/2020/08/06/bootstrap-4-5-2/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Today’s patch release is aimed at addressing some small issues introduced over the last few versions of Bootstrap 4. Read on for details and update when you’re ready. From the addition of responsive containers in v4.4.0 to the most recent row and column adjustments, we had been making incremental changes to our grid system. While our changes have solved some issues, they’ve broken other behaviors and introduced new complexities. Today’s release rolls back and restores a few things:"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2020/08/28/bootstrap-icons-stable/index.html b/2020/08/28/bootstrap-icons-stable/index.html index d6187643..7a18f04f 100644 --- a/2020/08/28/bootstrap-icons-stable/index.html +++ b/2020/08/28/bootstrap-icons-stable/index.html @@ -8,7 +8,7 @@ <meta name="description" content="After five alphas over the last nine months, Bootstrap Icons has officially gone stable with our v1.0.0 release! We’re now over 1,100 icons and are on track to add hundreds more in our upcoming minor releases. This has been a labor of love and I’m thrilled to ship this latest update. Since our fifth alpha two months ago, over a third of our icons have been redrawn as we fine-tuned paths and shapes."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -195,8 +195,8 @@ Since our fifth alpha two months ago, over a third of our icons have been redraw <p>Use them as embedded SVGs, as external assets with <code><img></code> tags, as an SVG sprite, or even embedded in your CSS. <a href="https://icons.getbootstrap.com">Head to the docs to learn more.</a></p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.0.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.0.0/bootstrap-icons-1.0.0.zip">download just the SVGs</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.0.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.0.0/bootstrap-icons-1.0.0.zip">download just the SVGs</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/9YmlUAwhMv99G4yP4yN7Jy/Bootstrap-Icons-v1.0.0?node-id=0%3A1">icons from Figma</a>.</p> <h2 id="up-next">Up next</h2> diff --git a/2020/09/29/bootstrap-5-alpha-2/index.html b/2020/09/29/bootstrap-5-alpha-2/index.html index 9c6f38dd..341ac109 100644 --- a/2020/09/29/bootstrap-5-alpha-2/index.html +++ b/2020/09/29/bootstrap-5-alpha-2/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -236,9 +236,9 @@ Check out the latest in the docs at https://v5.getbootstrap.com. Read the releas <p>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 <a href="https://github.com/twbs/release#upcoming-release-schedule">release schedule in our release repo</a>. We’ll also keep updating that repo’s readme as we go.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://v5.getbootstrap.com">https://v5.getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</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>' GitHub profiles to help support the maintainers contributing to Bootstrap.</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@next +</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>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> </div> diff --git a/2020/10/13/bootstrap-4-5-3/index.html b/2020/10/13/bootstrap-4-5-3/index.html index 7c46c483..4c98c4e9 100644 --- a/2020/10/13/bootstrap-4-5-3/index.html +++ b/2020/10/13/bootstrap-4-5-3/index.html @@ -10,7 +10,7 @@ As you may already know, we’re alternating between v4 and v5 releases to keep both versions moving in tandem. This helps us close the gap between v4 and v5 and make updating to v5 as easy as possible. Read on for the highlighted changes. Changes Also available in the v4."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -233,7 +233,7 @@ Changes Also available in the v4." /> <h2 id="next-up">Next up</h2> <p>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.</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> +<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> </div> diff --git a/2020/10/28/bootstrap-icons-1-1-0/index.html b/2020/10/28/bootstrap-icons-1-1-0/index.html index eabfcf10..8d172428 100644 --- a/2020/10/28/bootstrap-icons-1-1-0/index.html +++ b/2020/10/28/bootstrap-icons-1-1-0/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -201,8 +201,8 @@ </ul> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.1.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip">download just the SVGs</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.1.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip">download just the SVGs</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/6jIgJymnRpMjGSMG2BKNRe/Bootstrap-Icons-v1.1.0?node-id=0%3A1">icons from Figma</a>.</p> diff --git a/2020/11/11/bootstrap-5-alpha-3/index.html b/2020/11/11/bootstrap-5-alpha-3/index.html index 3a4469ee..24cf1166 100644 --- a/2020/11/11/bootstrap-5-alpha-3/index.html +++ b/2020/11/11/bootstrap-5-alpha-3/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Our third alpha release has landed with tons of updates to our components, utilities, docs, forms, JavaScript, and more. This is a larger alpha release for us and sets us up for our first beta where we’ll introduce some final breaking changes and features. We’re trying to move fast and keep the future of the project and the web in general in mind, so this release is an important milestone for us."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -290,9 +290,9 @@ We’re trying to move fast and keep the future of the project and the web i <p>For a more up to date list of changes, be sure to follow along with the <a href="https://github.com/twbs/bootstrap/projects/26">v5 Beta project board</a>.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://v5.getbootstrap.com">https://v5.getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</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>' GitHub profiles to help support the maintainers contributing to Bootstrap.</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@next +</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>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> </div> diff --git a/2020/12/07/bootstrap-5-beta-1/index.html b/2020/12/07/bootstrap-5-beta-1/index.html index 3c55e4d0..28ca5cd4 100644 --- a/2020/12/07/bootstrap-5-beta-1/index.html +++ b/2020/12/07/bootstrap-5-beta-1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="With our first beta release of Bootstrap 5, we’re calling it on new features and breaking changes. From here on out, we’re only fine-tuning features, bugs, and documentation on our way to a stable v5 release. Woohoo! Just like with the v4 development process, our docs for v5 have been temporarily hosted on a subdomain for the next major release. Starting today, those docs are being moved to the main domain and our old v5."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -224,17 +224,17 @@ Just like with the v4 development process, our docs for v5 have been temporarily <h2 id="namespaced-data-attributes">Namespaced data attributes</h2> <p>We’ve renamed all our <code>data</code> attributes to include <code>bs</code> as an infix, thereby namespacing all the HTML attributes that enable JavaScript behaviors from our plugins. <a href="https://github.com/twbs/bootstrap/pull/31827">See #31827</a> for details. It helps keep Bootstrap-required JavaScript triggers clearly identified throughout your projects.</p> <p>Making this change is a tad annoying, but easy enough to remedy with a find and replace. The new attributes work just like the old ones, just a little more specific. For example, here’s a dropdown button and menu with the newly renamed <code>data-bs-toggle</code> attribute.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span> - Dropdown button - <span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span><span class="p">></span> - <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> - <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> - <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> - <span class="p"></</span><span class="nt">ul</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h2 id="new-toast-positioning">New toast positioning</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Dropdown button +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h2 id="new-toast-positioning">New toast positioning</h2> <p><img src="/assets/img/2020/12/toast-position-docs.png" alt="Popper.js"></p> <p>After dabbling in some JavaScript solutions to <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">positioning toasts</a>, we’ve landed on a new CSS-only approach thanks to our <a href="https://getbootstrap.com/docs/5.0/utilities/position/">new positioning utilities</a>. This comes with some minor breaking changes—namely some changes to exact CSS properties and how we toggle visibility of the toasts—but largely keeps them intact.</p> <p>Our docs have been updated to include a <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">new position preview picker</a>, too, so you can see them in action. <a href="https://github.com/twbs/bootstrap/pull/32280/">See the pull request for more details.</a></p> @@ -251,27 +251,27 @@ Just like with the v4 development process, our docs for v5 have been temporarily <p>One of the biggest new features of Bootstrap 5 is our utilities API, an extensible way to customize, add, or remove Bootstrap utilities. We’ve been iterating along the way and our newest improvement is the ability to add pseudo-class variants with the <code>state</code> option.</p> <p>Use the <code>state</code> option to generate pseudo-class variations. Example pseudo-classes are <code>:hover</code> and <code>:focus</code>. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add <code>state: hover</code> and you’ll get <code>.opacity-hover:hover</code> in your compiled CSS.</p> <p>Need multiple pseudo-classes? Use a space-separated list: <code>state: hover focus</code>.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span> - <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> - <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="p">(</span> - <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> - <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> - <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> - <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> - <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> - <span class="p">)</span> - <span class="p">)</span> -<span class="p">);</span> -</code></pre></div><p>Which outputs to:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">opacity-0-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span> -<span class="p">.</span><span class="nc">opacity-25-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span> -<span class="p">.</span><span class="nc">opacity-50-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span> -<span class="p">.</span><span class="nc">opacity-75-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span> -<span class="p">.</span><span class="nc">opacity-100-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span> -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/pull/31643">See #31643</a> for more context on the change.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"><span class="p">);</span> +</span></span></code></pre></div><p>Which outputs to:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-0-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-25-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-50-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-75-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-100-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span> +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/pull/31643">See #31643</a> for more context on the change.</p> <h2 id="and-more">And more…</h2> <p>Elsewhere we’ve made a handful of other breaking changes and improvements. The most notable updates include:</p> <ul> @@ -297,9 +297,9 @@ Just like with the v4 development process, our docs for v5 have been temporarily <p>For a more complete list of of changes, checkout the <a href="https://github.com/twbs/bootstrap/projects/26">v5 Beta project board</a> or <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F26+">list of issues and PRs</a> in this <a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta1">release</a>.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</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>' GitHub profiles to help support the maintainers contributing to Bootstrap.</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@next +</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>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> </div> diff --git a/2020/12/11/bootstrap-icons-1-2-0/index.html b/2020/12/11/bootstrap-icons-1-2-0/index.html index cf4025b8..3cf4cd5a 100644 --- a/2020/12/11/bootstrap-icons-1-2-0/index.html +++ b/2020/12/11/bootstrap-icons-1-2-0/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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!"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -204,8 +204,8 @@ New social icons We’re starting slow with social icons—just a handful of <p>The new permalink sidebar also features new and improved access to the icons. Need just an SVG or two? Use the new <code>Download SVG</code> 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.</p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.0/bootstrap-icons-1.2.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.0/bootstrap-icons-1.2.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/JeBqM2fRcfIe7wMDgNZG6d/Bootstrap-Icons-v1.2.0?node-id=0%3A1">icons from Figma</a>.</p> diff --git a/2020/12/12/bootstrap-icons-1-2-1/index.html b/2020/12/12/bootstrap-icons-1-2-1/index.html index cf1d1721..29d71009 100644 --- a/2020/12/12/bootstrap-icons-1-2-1/index.html +++ b/2020/12/12/bootstrap-icons-1-2-1/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Just a quick release to fix a typo in our package.json for including the font files in our published package. Get it 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)."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -187,8 +187,8 @@ npm i bootstrap-icons You can also download the release from GitHub, or download </div> <p>Just a quick release to fix a typo in our <code>package.json</code> for including the font files in our published package.</p> <p>Get it via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.1">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.1/bootstrap-icons-1.2.1.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.1">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.1/bootstrap-icons-1.2.1.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> </div> diff --git a/2020/12/23/bootstrap-icons-1-2-2/index.html b/2020/12/23/bootstrap-icons-1-2-2/index.html index ac27968c..3b69357e 100644 --- a/2020/12/23/bootstrap-icons-1-2-2/index.html +++ b/2020/12/23/bootstrap-icons-1-2-2/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -211,8 +211,8 @@ Font files Our icons fonts are (fingers crossed!) free of visual glitches that m <p>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 <a href="https://github.com/twbs/icons/pull/561">new aliases</a> for icon filtering on homepage.</p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.2">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.2/bootstrap-icons-1.2.2.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.2">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.2/bootstrap-icons-1.2.2.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/0fjzjlmwMsHJ0Mgj51j444/Bootstrap-Icons-v1.2.2?node-id=0%3A1">icons from Figma</a>.</p> diff --git a/2021/01/07/bootstrap-icons-1-3-0/index.html b/2021/01/07/bootstrap-icons-1-3-0/index.html index 50a5650a..479d9fc4 100644 --- a/2021/01/07/bootstrap-icons-1-3-0/index.html +++ b/2021/01/07/bootstrap-icons-1-3-0/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Say hello to over 60 new icons with Bootstrap Icons v1.3.0! We focused our efforts on filling in some holes and expanding some coverage of a few categories. We’re super happy with how the new additions came out and hope y’all love them, too! As usual, we also snuck in some bug fixes to existing icons and ours docs. After this release, we’re back to focusing on shipping updates to Bootstrap v5 and v4."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -218,22 +218,22 @@ As usual, we also snuck in some bug fixes to existing icons and ours docs. After <ol> <li> <p>Include the Bootstrap Icons font stylesheet in the <code><head></code> of your website. Or, use <code>@import</code> to include the stylesheet that way.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Option 1: Include in HTML --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="p">></span> -</code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="c">/* Option 2: Import via CSS */</span> -<span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="o">)</span><span class="p">;</span> -</code></pre></div></li> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Option 1: Include in HTML --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="p">></span> +</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* Option 2: Import via CSS */</span> +</span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="o">)</span><span class="p">;</span> +</span></span></code></pre></div></li> <li> <p>Add HTML snippets to include Bootstrap Icons where desired.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-alarm"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span> -</code></pre></div></li> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-alarm"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span> +</span></span></code></pre></div></li> </ol> <p>Want to see it in action? We’ve put together a helpful <a href="https://codepen.io/emdeoh/pen/NWRzbKM">CodePen demo for using Bootstrap Icons fonts via CDN</a>.</p> <p><em><strong>ProTip:</strong> Most browsers do not allow SVG sprites to be used across domains, which is why having icon fonts (when SVGs are the preferrable and more accessible method of delivering icons) are so useful. Whenever possible, please use SVGs over icon fonts.</em></p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.3.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.3.0/bootstrap-icons-1.3.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.3.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.3.0/bootstrap-icons-1.3.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/UuL6jIPhUePmOVttDaQN8h/Bootstrap-Icons-v1.3.0?node-id=0%3A1">icons from Figma</a>.</p> diff --git a/2021/01/19/bootstrap-4.6.0/index.html b/2021/01/19/bootstrap-4.6.0/index.html index c8d0c30d..50003253 100644 --- a/2021/01/19/bootstrap-4.6.0/index.html +++ b/2021/01/19/bootstrap-4.6.0/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Bootstrap v4.6.0 is here with a couple new features, several bugfixes, and some awesome documentation updates to make v4 more maintainable alongside our development of v5. Read on for the highlighted changes or head to the v4.6 docs to see the latest in action. Hugo! The biggest change in v4.6.0 is under the hood—we’ve overhauled our development environment to match that of v5. Our v4.x docs are now powered by Hugo."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -315,7 +315,7 @@ Hugo! The biggest change in v4.6.0 is under the hood—we’ve overhauled ou <p>Our second beta of v5 is coming. We’re working on ironing on some kinks from the update to Popover 2, which has taken longer than expected. This affects our dropdowns, popovers, and tooltips. Once some of the major issues are resolved, we’ll ship our next beta.</p> <p>Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.</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> +<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> </div> diff --git a/2021/02/10/bootstrap-5-beta-2/index.html b/2021/02/10/bootstrap-5-beta-2/index.html index 197c59f0..91794e3d 100644 --- a/2021/02/10/bootstrap-5-beta-2/index.html +++ b/2021/02/10/bootstrap-5-beta-2/index.html @@ -10,7 +10,7 @@ Next up is our final beta, which we may even promote to a stable release depending on how development proceeds. Stay tuned for that! Dropdowns Dropdowns saw a lot of work in Beta 2 because of how much has changed in both our JavaScript and in Popper."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -261,8 +261,8 @@ Dropdowns saw a lot of work in Beta 2 because of how much has changed in both ou <p>For a more complete list of changes, check out the <a href="https://github.com/twbs/bootstrap/projects/33">v5 Beta 2 project board</a> or <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F33">list of issues and PRs</a> in this <a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta2">release</a>.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</code></pre></div><h2 id="whats-next">What’s next</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@next +</span></span></code></pre></div><h2 id="whats-next">What’s next</h2> <p>We have three releases coming up next for the team:</p> <ul> <li>Bootstrap v5.0.0-beta3 (possibly promoted to v5 stable)</li> @@ -271,7 +271,7 @@ Dropdowns saw a lot of work in Beta 2 because of how much has changed in both ou </ul> <p>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 <a href="https://github.com/twbs/bootstrap/projects/31">v5.1 project</a> for an idea of what’s being planned.</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> +<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> </div> diff --git a/2021/02/22/bootstrap-icons-1-4-0/index.html b/2021/02/22/bootstrap-icons-1-4-0/index.html index f07890da..afbaf311 100644 --- a/2021/02/22/bootstrap-icons-1-4-0/index.html +++ b/2021/02/22/bootstrap-icons-1-4-0/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Bootstrap Icons v1.4.0 adds over 60 new icons as part of a brand new weather category. Also included are some long requested improvements to vertical alignment and a handful of updates to tags and categories. Keep reading for a preview of the new icons and how icon alignment has changed. 60+ weather icons The new weather category includes over 60 icons for various weather and atmospheric conditions. From fog and haze to rainstorms and hurricanes, we now have icons for just about every weather situation."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -203,8 +203,8 @@ Keep reading for a preview of the new icons and how icon alignment has changed. <p>We still have some work to do on our docs and search, so stay tuned as we’ll eventually add category pages and more for easier browsing and navigating. If you’re reading this and want to help improve the Bootstrap Icons docs, please consider opening a PR anytime.</p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.4.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.4.0/bootstrap-icons-1.4.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.4.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.4.0/bootstrap-icons-1.4.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/tZZVOiEgKcRUHE3s6o5djB/Bootstrap-Icons-v1.4.0?node-id=0%3A1">icons from Figma</a>.</p> diff --git a/2021/03/23/bootstrap-5-beta-3/index.html b/2021/03/23/bootstrap-5-beta-3/index.html index 859cc8b7..150f5932 100644 --- a/2021/03/23/bootstrap-5-beta-3/index.html +++ b/2021/03/23/bootstrap-5-beta-3/index.html @@ -10,7 +10,7 @@ Keep reading for a recap of what’s new in Beta 3. New offcanvas component Thanks to our newest team member, @GeoSot, we have a brand new component to unveil in Beta 3—introducing offcanvas!"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -230,8 +230,8 @@ Thanks to our newest team member, @GeoSot, we have a brand new component to unve <p>A huge thanks to another new team member, <a href="https://github.com/rohit2sharma95">@rohit2sharma95</a>, for the dozens of pull requests, bug fixes, and code reviews for our JavaScript plugins.</p> <h2 id="get-the-release">Get the release</h2> <p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</code></pre></div><h2 id="whats-next">What’s next</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@next +</span></span></code></pre></div><h2 id="whats-next">What’s next</h2> <p>Looking ahead, we’re eyeing our first stable release for Bootstrap 5! But we also have some other releases on the horizon:</p> <ul> <li><a href="https://github.com/twbs/bootstrap/projects/27">Bootstrap v5.0.0</a></li> @@ -241,7 +241,7 @@ Thanks to our newest team member, @GeoSot, we have a brand new component to unve </ul> <p>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 <a href="https://github.com/twbs/bootstrap/projects/31">v5.1 project</a> for an idea of what’s being planned. Feel free to open issues or pull requests if you have any additional ideas!</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> +<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> </div> diff --git a/2021/03/29/bootstrap-icons-1-4-1/index.html b/2021/03/29/bootstrap-icons-1-4-1/index.html index 6b7abc51..0bc4a1e2 100644 --- a/2021/03/29/bootstrap-icons-1-4-1/index.html +++ b/2021/03/29/bootstrap-icons-1-4-1/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Our latest Bootstrap Icons update has arrived to fix a few bugs and improve our build tooling. Keep reading for what’s new. Key changes Here are the highlights from this release: Updated: PowerPoint icons now look more capitalized Fixed: skip-forward and skip-backward icons are now properly named Fixed: mic and record icons no longer appear filled Fixed: Codepoints for icon font will no longer change between versions Upgraded SVGO to v2."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -202,8 +202,8 @@ Key changes Here are the highlights from this release: <p><a href="https://github.com/twbs/icons/releases/tag/v1.4.1">Check out the release notes</a> for more changes in v1.4.1.</p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.4.1">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.4.1/bootstrap-icons-1.4.1.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.4.1">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.4.1/bootstrap-icons-1.4.1.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/YjjMzXhECL1MIb6Qlm7VJO/Bootstrap-Icons-v1.4.1">icons from Figma</a>.</p> diff --git a/2021/05/05/bootstrap-5/index.html b/2021/05/05/bootstrap-5/index.html index c5045c52..4219c15a 100644 --- a/2021/05/05/bootstrap-5/index.html +++ b/2021/05/05/bootstrap-5/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Bootstrap 5 has officially landed! After three alphas, three betas, and several months of hard work, we’re shipping the first stable release of our new major version. It’s been a wild ride made possible by our maintainers and the amazing community that uses and contributes to Bootstrap. Thanks to all who have helped us get here! Keep reading for details on what’s new compared to v4 and what’s coming for subsequent releases."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -244,25 +244,25 @@ Keep reading for details on what’s new compared to v4 and what’s com <h3 id="checks-and-radios">Checks and radios</h3> <p><a href="https://getbootstrap.com/docs/5.0/forms/checks-radios/"><img src="/assets/img/2020/06/v5-checks.png" alt="New Bootstrap 5 checks"></a></p> <p>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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> - Default checkbox - <span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> - Default radio - <span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>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.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default checkbox +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default radio +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>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.</p> <h3 id="floating-labels">Floating labels</h3> <p><img src="/assets/img/2020/11/floating-forms.png" alt="New floating labels"></p> <p><a href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Floating labels</a> include support for textual inputs, selects, and textareas. We have one limitation with textareas where multiple lines of text can be obscured by the floating label. We’re working on fixes for this, so if you have ideas, please let us know!</p> @@ -295,32 +295,32 @@ Keep reading for details on what’s new compared to v4 and what’s com <p>Given the love utility-driven frameworks have garnered the last few years, we’ve invested in adding more utilities to Bootstrap along with a new method of managing them across your projects.</p> <h3 id="new-utilities-api">New utilities API</h3> <p>We’ve implemented a brand <a href="https://getbootstrap.com/docs/5.0/utilities/api/">new utility API</a> into Bootstrap 5 as the primary way to extend Bootstrap’s default utility classes. Easily generate and customize utilities with support for custom class names, support for generating state-based classes like <code>:hover</code>, print versions, and more.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> - <span class="p">(</span> - <span class="c1">// ...</span> - <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> - <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> - <span class="p">)</span><span class="o">,</span> - <span class="c1">// ...</span> - <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">property</span><span class="o">:</span> <span class="n">o</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> - <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="p">(</span> - <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> - <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> - <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> - <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> - <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> - <span class="p">)</span> - <span class="p">)</span> - <span class="c1">// ...</span> - <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> -</code></pre></div><p>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 <code>$enable-*</code> 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.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">o</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> +</span></span></code></pre></div><p>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 <code>$enable-*</code> 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.</p> <p>Head to the <a href="https://getbootstrap.com/docs/5.0/utilities/api/">new Utilities API docs</a> to learn more.</p> <h3 id="new-utilities">New utilities</h3> <p>Speaking of utilities, we’ve added a ton of new ones to our arsenal, including:</p> @@ -415,8 +415,8 @@ Keep reading for details on what’s new compared to v4 and what’s com <p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F27">list of issues and pull requests in v5.0.0</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/27">v5.0.0 project board</a>, too.</p> <h2 id="get-the-release">Get the release</h2> <p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> We’ve also published this update as our new latest release on npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0">Review the GitHub v5.0.0 release changelog</a> for a complete list of changes since our last pre-release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0">Review the GitHub v5.0.0 release changelog</a> for a complete list of changes since our last pre-release.</p> <h2 id="whats-next">What’s next</h2> <p>Looking ahead, we have some other releases on the horizon:</p> <ul> @@ -438,7 +438,7 @@ Keep reading for details on what’s new compared to v4 and what’s com </ul> <p>And more features and updates are planned for a few more releases after that! Check out our <a href="https://github.com/twbs/bootstrap/projects">projects on GitHub</a> for a closer look.</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> +<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> </div> diff --git a/2021/05/10/bootstrap-icons-1-5-0/index.html b/2021/05/10/bootstrap-icons-1-5-0/index.html index 1107e50d..42e2c24f 100644 --- a/2021/05/10/bootstrap-icons-1-5-0/index.html +++ b/2021/05/10/bootstrap-icons-1-5-0/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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 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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -212,8 +212,8 @@ <p><a href="https://icons.getbootstrap.com">Head to the Bootstrap Icons docs</a> to see them in action.</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">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.5.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.5.0/bootstrap-icons-1.5.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.5.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.5.0/bootstrap-icons-1.5.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/972989644486753519/Bootstrap-Icons-v1.5.0">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> diff --git a/2021/05/13/bootstrap-5-0-1/index.html b/2021/05/13/bootstrap-5-0-1/index.html index 1406432c..f8dc142d 100644 --- a/2021/05/13/bootstrap-5-0-1/index.html +++ b/2021/05/13/bootstrap-5-0-1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Our first patch release for Bootstrap 5 has landed with v5.0.1! We’ve fixed a handful of bugs in our CSS and JS while also resolving a few issues with our docs and examples. Changelog Fixed an issue where dropdowns wouldn’t close after clicking into an <input> Validated inputs in .input-groups no longer render behind sibling elements Prevent accent-bg from leaking in nested tables Modal backdrops no longer throw Uncaught TypeError when initialized through JS Refactored disposing properties into the base component Extracted static DATA_KEY and EVENT_KEY to the base component Merged transitionend listener callbacks into one method Popovers and tooltips have a streamlined config property Toasts no longer automatically hide on focus or hover No longer redefining $list-group-color in the list group loop Our docs and examples also received a few updates:"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -210,10 +210,10 @@ Changelog Fixed an issue where dropdowns wouldn’t close after clicking in <p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F38">list of issues and pull requests in v5.0.1</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/38">v5.0.1 project board</a>.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.1">Review the GitHub v5.0.1 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.1">Review the GitHub v5.0.1 release changelog</a> for a complete list of changes since our last 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> +<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> </div> diff --git a/2021/06/22/bootstrap-5-0-2/index.html b/2021/06/22/bootstrap-5-0-2/index.html index 4a566104..cc4154ad 100644 --- a/2021/06/22/bootstrap-5-0-2/index.html +++ b/2021/06/22/bootstrap-5-0-2/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -235,10 +235,10 @@ Sass division One of the biggest fixes in Bootstrap v5.0.2 patches the deprecati <p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F41">list of issues and pull requests in v5.0.2</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/41">v5.0.2 project board</a>.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.2">Review the v5.0.2 release changelog</a> for a complete list of changes.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.2">Review the v5.0.2 release changelog</a> for a complete list of changes.</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> +<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> </div> diff --git a/2021/08/04/bootstrap-5-1-0/index.html b/2021/08/04/bootstrap-5-1-0/index.html index f37543bf..9d6e0f45 100644 --- a/2021/08/04/bootstrap-5-1-0/index.html +++ b/2021/08/04/bootstrap-5-1-0/index.html @@ -9,7 +9,7 @@ <meta name="description" content="The first minor release of Bootstrap 5 is here! v5.1.0 has arrived and is packed with exciting new features and improvements. There’s experimental support for CSS Grid, offcanvas in the navbar, a new placeholders component, horizontal collapse support, new helpers, new CSS variables in our utilities, refactored JavaScript, and more. Jump to a section: CSS Grid Offcanvas in navbars Placeholders Horizontal collapse Stack and vertical rule helpers New CSS variables Updated ."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -222,108 +222,108 @@ Jump to a section: </a> <p>There’s a new component in town with <a href="https://getbootstrap.com/docs/5.1/components/placeholders/">placeholders</a>, a way to provide temporary blocks in lieu of real content to help indicate that something is still loading in your site or app. Our first iteration here aims to only provide the HTML and CSS—it’s up to you to implement these placeholders with whatever custom code you might need.</p> <p>Consider the basic Bootstrap card component shown above.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>Here it is rebuilt with glowing placeholder bars to indicate something is still loading.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title placeholder-glow"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-6"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text placeholder-glow"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-7"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-4"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-4"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-6"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-8"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary disabled placeholder col-6"</span><span class="p">></</span><span class="nt">a</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p><strong><a href="https://getbootstrap.com/docs/5.1/components/placeholders/">Head to the placeholder docs</a></strong> to learn more.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>Here it is rebuilt with glowing placeholder bars to indicate something is still loading.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title placeholder-glow"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-6"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text placeholder-glow"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-7"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-4"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-4"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-6"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-8"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary disabled placeholder col-6"</span><span class="p">></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p><strong><a href="https://getbootstrap.com/docs/5.1/components/placeholders/">Head to the placeholder docs</a></strong> to learn more.</p> <h2 id="horizontal-collapse">Horizontal collapse</h2> <p>Hot damn, we’ve finally added official support for <a href="https://getbootstrap.com/docs/5.1/components/collapse/#horizontal">horizontally collapsing</a>! The collapse plugin has been able to detect <code>width</code> vs <code>height</code> for some time (even in v4), but we never had a working example in our docs until now. Add the <code>.collapse-horizontal</code> modifier class to transition the <code>width</code> instead of <code>height</code> and set a <code>width</code> on the immediate child element.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#collapseWidthExample"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"collapseWidthExample"</span><span class="p">></span> - Toggle width collapse -<span class="p"></</span><span class="nt">button</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"min-height: 120px;"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"collapse collapse-horizontal"</span> <span class="na">id</span><span class="o">=</span><span class="s">"collapseWidthExample"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card card-body"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 300px;"</span><span class="p">></span> - This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p><strong>Heads up!</strong> You may need some <code>min-height</code> or <code>height</code> to avoid excessive browser repainting, as we’ve included in our demo above.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#collapseWidthExample"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"collapseWidthExample"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Toggle width collapse +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"min-height: 120px;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"collapse collapse-horizontal"</span> <span class="na">id</span><span class="o">=</span><span class="s">"collapseWidthExample"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card card-body"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 300px;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p><strong>Heads up!</strong> You may need some <code>min-height</code> or <code>height</code> to avoid excessive browser repainting, as we’ve included in our demo above.</p> <h2 id="stack-and-vertical-rule-helpers">Stack and vertical rule helpers</h2> <p>While utilities get most of the spotlight these days, helpers are still incredibly useful. <a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">Our newest helpers are called stacks</a> and they’re shortcuts for vertical and horizontal stacks of elements. They’re inspired by the open source <a href="https://almonk.github.io/pylon/">Pylon</a> project, which was in turn inspired by iOS’s stacks. Right now, stacks aren’t responsive, but that can easily change with your feedback.</p> <p>To create a vertical stack, wrap a series of elements in <code>.vstack</code>. Use <code>.gap-*</code> utilities on the parent (or set individual <code>margin</code> utilities) to quickly space elements.</p> <img src="/assets/img/2021/08/bootstrap-vstack.png" alt="Bootstrap vstack example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vstack gap-3"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>First item<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Second item<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Third item<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>Want a horizontal stack? Use <code>.hstack</code> instead.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vstack gap-3"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>First item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Second item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Third item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>Want a horizontal stack? Use <code>.hstack</code> instead.</p> <img src="/assets/img/2021/08/bootstrap-hstack.png" alt="Bootstrap vstack example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"hstack gap-3"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>First item<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Second item<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Third item<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>To support these stacks, we’ve also added an additional new helper—<code>.vr</code>, or vertical rule. HTML has had native <code><hr></code> elements for the longest time to create horizontal rules, but never anything for <em>vertical</em> rules. The new <code>.vr</code> helper works great in horizontal stacks and other situations where <code>border</code>s are a little trickier.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"hstack gap-3"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>First item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Second item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Third item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>To support these stacks, we’ve also added an additional new helper—<code>.vr</code>, or vertical rule. HTML has had native <code><hr></code> elements for the longest time to create horizontal rules, but never anything for <em>vertical</em> rules. The new <code>.vr</code> helper works great in horizontal stacks and other situations where <code>border</code>s are a little trickier.</p> <img src="/assets/img/2021/08/bootstrap-hstack-vr.png" alt="Bootstrap vstack example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"hstack gap-3"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control me-auto"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Add your item here..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>Submit<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vr"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-danger"</span><span class="p">></span>Reset<span class="p"></</span><span class="nt">button</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>Learn more in the <strong><a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">stacks helper docs</a></strong>.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"hstack gap-3"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control me-auto"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Add your item here..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>Submit<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vr"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-danger"</span><span class="p">></span>Reset<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>Learn more in the <strong><a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">stacks helper docs</a></strong>.</p> <h2 id="new-css-variables">New CSS variables</h2> <p>We’ve expanded our <code>:root</code> CSS variables to include our gray color palette, new <code><body></code> variables, and new <code>RGB</code> variables for our theme colors. The grayscale colors join our existing color and theme color variables to complete the set of globally available CSS colors. As the development of v5 progresses, these variables will be used more and more in our components to better enable global theming.</p> <p>Speaking of, our new <code><body></code> CSS variables now control the styling of the <code><body></code>. This is what you’ll find in the compiled CSS:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span> - <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> - <span class="k">font-family</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">family</span><span class="p">);</span> - <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">size</span><span class="p">);</span> - <span class="k">font-weight</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="kc">weight</span><span class="p">);</span> - <span class="k">line-height</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">line</span><span class="o">-</span><span class="n">height</span><span class="p">);</span> - <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> - <span class="k">text-align</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">align</span><span class="p">);</span> - <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">bg</span><span class="p">);</span> - <span class="kp">-webkit-</span><span class="n">text-size-adjust</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> - <span class="kp">-webkit-</span><span class="n">tap-highlight-color</span><span class="p">:</span> <span class="kc">transparent</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div><p>Like all our other <code>:root</code> CSS variables, the values for these are <a href="https://getbootstrap.com/docs/5.1/content/reboot/#css-variables">generated from our Sass variables</a>. That means that no matter how you customize Bootstrap—via Sass or CSS variables—you haven’t lost any functionality or convenience.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">family</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">size</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="kc">weight</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">line-height</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">line</span><span class="o">-</span><span class="n">height</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">text-align</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">align</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">bg</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="kp">-webkit-</span><span class="n">text-size-adjust</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="kp">-webkit-</span><span class="n">tap-highlight-color</span><span class="p">:</span> <span class="kc">transparent</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>Like all our other <code>:root</code> CSS variables, the values for these are <a href="https://getbootstrap.com/docs/5.1/content/reboot/#css-variables">generated from our Sass variables</a>. That means that no matter how you customize Bootstrap—via Sass or CSS variables—you haven’t lost any functionality or convenience.</p> <p><strong><a href="https://getbootstrap.com/docs/5.1/customize/css-variables/">Read the CSS variables customization docs</a></strong> for more info.</p> <h2 id="updated-bg--and-text--utilities">Updated <code>.bg-*</code> and <code>.text-*</code> utilities</h2> <p>Our new RGB values are built to help us make better use of CSS variables across the entire project. To start, our <code>background-color</code> and <code>color</code> utilities have been updated to use these new RGB values for real-time customization without recompiling Sass and on-the-fly transparency for any background or text color.</p> <p>Here’s how our <code>.bg-*</code> and <code>.text-*</code> color utilities look now once compiled:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">bg-success</span> <span class="p">{</span> - <span class="nv">--bs-bg-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> - <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">success</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">bg</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> -<span class="p">}</span> - -<span class="p">.</span><span class="nc">text-primary</span> <span class="p">{</span> - <span class="nv">--bs-text-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> - <span class="k">color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">primary</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div><p>We use an RGB version of each color’s CSS variable and attach a second CSS variable, <code>--bs-text-opacity</code> or <code>--bs-bg-opacity</code>, for the alpha transparency (with a default value <code>1</code> thanks to a local CSS variable in the ruleset). That means anytime you use <code>.text-primary</code> now, your computed <code>color</code> value is <code>rgba(13, 110, 253, 1)</code>. The local CSS variable inside each <code>.text-*</code> class helps avoid inheritance issues when nesting instances of these classes.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">bg-success</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nv">--bs-bg-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">success</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">bg</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">text-primary</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nv">--bs-text-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">primary</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>We use an RGB version of each color’s CSS variable and attach a second CSS variable, <code>--bs-text-opacity</code> or <code>--bs-bg-opacity</code>, for the alpha transparency (with a default value <code>1</code> thanks to a local CSS variable in the ruleset). That means anytime you use <code>.text-primary</code> now, your computed <code>color</code> value is <code>rgba(13, 110, 253, 1)</code>. The local CSS variable inside each <code>.text-*</code> class helps avoid inheritance issues when nesting instances of these classes.</p> <p>To support these changes, we’ve added some new <code>.text-opacity-*</code> and <code>.bg-opacity-*</code> utilities. Choose from a predefined set (which you can modify in the utilities API) of classes to quickly change the local CSS variable when a given <code>.text-*</code> or <code>.bg-*</code> utility is used. For example:</p> <img src="/assets/img/2021/08/bootstrap-text-opacity.png" alt="Bootstrap text opacity example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary"</span><span class="p">></span>This is default primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-75"</span><span class="p">></span>This is 75% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-50"</span><span class="p">></span>This is 50% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-25"</span><span class="p">></span>This is 25% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>We expect this approach to make its way to <code>border</code> utilities next. Have more CSS variables you’d like to see added? Share your thoughts on a new issue on GitHub. Head to the <a href="https://getbootstrap.com/docs/5.1/utilities/colors/#opacity">color utilities</a> or <a href="https://getbootstrap.com/docs/5.1/utilities/background/#opacity">background utilities</a> docs to learn more.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary"</span><span class="p">></span>This is default primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-75"</span><span class="p">></span>This is 75% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-50"</span><span class="p">></span>This is 50% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-25"</span><span class="p">></span>This is 25% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>We expect this approach to make its way to <code>border</code> utilities next. Have more CSS variables you’d like to see added? Share your thoughts on a new issue on GitHub. Head to the <a href="https://getbootstrap.com/docs/5.1/utilities/colors/#opacity">color utilities</a> or <a href="https://getbootstrap.com/docs/5.1/utilities/background/#opacity">background utilities</a> docs to learn more.</p> <h2 id="four-new-examples">Four new examples</h2> <img src="/assets/img/2021/08/v510-examples.png" alt="" class="border"> <p>We’ve expanded on our component examples with four new examples that customize some of our core components and implement common patterns. Here’s what’s new:</p> @@ -337,17 +337,17 @@ Jump to a section: <h2 id="modal-and-offcanvas-backdrops">Modal and offcanvas backdrops</h2> <p>We’ve variablized the class name for our backdrops that are used across our modal and offcanvas components. This comes with a new class for the offcanvas backdrop, <code>.offcanvas-backdrop</code>, and perhaps more importantly, some updated <code>z-index</code> values.</p> <p>Previously, there was a single offcanvas <code>z-index</code> between the modal and modal backdrop <code>z-index</code>s, due to offcanvas sharing the modal’s backdrop.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Before v5.1.0 -</span><span class="c1"></span><span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1060</span> <span class="k">!default</span><span class="p">;</span> -</code></pre></div><p>We’ve changed this to allow offcanvases and modals to work together better with separate <code>z-index</code> values for offcanvas, the offcanvas backdrop, modal, and the modal backdrop.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// After v5.1.0 -</span><span class="c1"></span><span class="nv">$zindex-offcanvas-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1045</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1055</span> <span class="k">!default</span><span class="p">;</span> -</code></pre></div><p>Unless you’ve modified the offcanvas component or its Sass variables, there should be no breaking changes for you.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// Before v5.1.0 +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1060</span> <span class="k">!default</span><span class="p">;</span> +</span></span></code></pre></div><p>We’ve changed this to allow offcanvases and modals to work together better with separate <code>z-index</code> values for offcanvas, the offcanvas backdrop, modal, and the modal backdrop.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// After v5.1.0 +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$zindex-offcanvas-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1045</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1055</span> <span class="k">!default</span><span class="p">;</span> +</span></span></code></pre></div><p>Unless you’ve modified the offcanvas component or its Sass variables, there should be no breaking changes for you.</p> <h2 id="and-more">And more!</h2> <p>There’s a lot more in this release that we didn’t include in the highlights above:</p> <ul> @@ -365,10 +365,10 @@ Jump to a section: </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’s also been pushed to npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.0">Review the GitHub v5.1.0 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.0">Review the GitHub v5.1.0 release changelog</a> for a complete list of changes since our last 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> +<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> </div> diff --git a/2021/08/19/ten/index.html b/2021/08/19/ten/index.html index 7bd6693b..942f46ea 100644 --- a/2021/08/19/ten/index.html +++ b/2021/08/19/ten/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Ten years ago today, we shipped the first release of Bootstrap. Releasing it on GitHub was my first real plunge into open source—what an introduction! Here we are a decade later with one of the most widely used open source projects and frontend toolkits on the web. Happy birthday, Bootstrap—what a ride! While numbers certainly don’t tell the whole story, Bootstrap has reached some incredible milestones over the past decade. Here are some highlights:"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/2021/09/07/bootstrap-5-1-1/index.html b/2021/09/07/bootstrap-5-1-1/index.html index c4f74c19..22525dd4 100644 --- a/2021/09/07/bootstrap-5-1-1/index.html +++ b/2021/09/07/bootstrap-5-1-1/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -204,10 +204,10 @@ Highlights Fixed broken .bg-body utility. This was caused by the same --body-rg <p>We’ve had a number of Visual Studio users mention that Sass compiling for Bootstrap 5.1.0 is broken when using the <a href="https://github.com/madskristensen/WebCompiler">Web Compiler extension</a>. This extension hasn’t been updated in more than five years, so we recommend moving to a newer alternative. Some users mentioned the <a href="https://github.com/madskristensen/SassCompiler">Sass Compiler extension</a> as a successful alternative. If you have additional recommendations, <a href="https://github.com/twbs/bootstrap/issues/34738">please leave a comment to share</a>.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.1">Review the GitHub v5.1.1 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.1">Review the GitHub v5.1.1 release changelog</a> for a complete list of changes since our last 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> +<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> </div> diff --git a/2021/10/05/bootstrap-5-1-2/index.html b/2021/10/05/bootstrap-5-1-2/index.html index 9d6a8ce2..ed805e12 100644 --- a/2021/10/05/bootstrap-5-1-2/index.html +++ b/2021/10/05/bootstrap-5-1-2/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Bootstrap v5.1.2 is here with a handful of improvements across our components, plus a fix for an issue in another project that prevented our Sass from compiling properly. Keep reading for the highlights. Highlights Temporarily patched a postcss-values-parser issue by rearranging our calc() functions that use negative numbers. This should restore the ability to import and compile Bootstrap’s Sass in create-react-app. Added border-radius sizes to small and large .form-selects Added align-self: center to buttons for improved rendering in flex containers Fixed Collapse regression that prevented toggling between sibling children Updated JS Sanitizer to add sms in the SAFE_URL_PATTERN Improved docs around ."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -201,10 +201,10 @@ Highlights Temporarily patched a postcss-values-parser issue by rearranging our <p>Up next is our v5.2.0 release, adding more utility improvements and fixing an issue with how <a href="https://github.com/twbs/bootstrap/issues/34756">Sass handles re-assigned maps and variables</a>. Alongside that, we’ll be shipping an update to v4 soon as well.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.2">Review the GitHub v5.1.2 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.2">Review the GitHub v5.1.2 release changelog</a> for a complete list of changes since our last 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> +<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> </div> diff --git a/2021/10/13/bootstrap-icons-1-6-0/index.html b/2021/10/13/bootstrap-icons-1-6-0/index.html index b93ffffa..80356610 100644 --- a/2021/10/13/bootstrap-icons-1-6-0/index.html +++ b/2021/10/13/bootstrap-icons-1-6-0/index.html @@ -9,7 +9,7 @@ <meta name="description" content="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:"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -235,10 +235,10 @@ We have a few dozen new and updated icons in this release, including:" /> <p>Found another bug, or have a suggestion? Check out the issue tracker and open an issue if you don’t see one already opened.</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">npm i bootstrap-icons -</code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.6.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.6.0/bootstrap-icons-1.6.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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.6.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.6.0/bootstrap-icons-1.6.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/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> diff --git a/2021/10/28/bootstrap-4.6.1/index.html b/2021/10/28/bootstrap-4.6.1/index.html index 5cedf4fc..3169f098 100644 --- a/2021/10/28/bootstrap-4.6.1/index.html +++ b/2021/10/28/bootstrap-4.6.1/index.html @@ -9,7 +9,7 @@ <meta name="description" content="Bootstrap v4.6.1 has finally arrived! Biggest change here is a re-implementation of our Sass division functions and updates from v5, as well as some accessibility improvements and general bug fixes. Read on for the highlights or head to the v4.6.x docs to see the latest in action. What’s changed Replace Sass division with multiplication and custom divide() function fix(forms): input-group and validation icons Fix minor visual bug in FF caused by moz-focusring Adjust SAFE_URL_PATTERN regex for use with test method of regexes Add sms in the SAFE_URL_PATTERN for sanitizer Adjust feedback icon position and padding for select."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -220,7 +220,7 @@ What’s changed Replace Sass division with multiplication and custom divid <p>We’ll be flipping back to v5 development after this release, focusing on v5.2.0 with some additional updates to using more CSS variables and other awesome features. Sometime after that, we hope to ship a v4.7.0 release with some additional backported features and improvements to v4.</p> <p>Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.</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> +<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> </div> diff --git a/2021/11/01/bootstrap-icons-1-7-0/index.html b/2021/11/01/bootstrap-icons-1-7-0/index.html index 4e50dad5..8f0deaa0 100644 --- a/2021/11/01/bootstrap-icons-1-7-0/index.html +++ b/2021/11/01/bootstrap-icons-1-7-0/index.html @@ -8,7 +8,7 @@ <meta name="description" content="Bootstrap Icons v1.7.0 is here with 120 new and updated icons, taking us over 1,500 total icons for the project! It’s the largest update since the initial release, so keep reading to see what’s new. 120 new icons This update was a lot of fun for me—drawing all these tiny computer parts most of all! There are dozens of new computer-related icons for parts, ports, and peripheral devices. There are also several new brand icons, including Meta, and some other fun icons like a new robot head and a boombox."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -192,10 +192,10 @@ <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">npm i bootstrap-icons -</code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.7.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.7.0/bootstrap-icons-1.7.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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.7.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.7.0/bootstrap-icons-1.7.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/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> diff --git a/2022/01/31/bootstrap-icons-1-8-0/index.html b/2022/01/31/bootstrap-icons-1-8-0/index.html index f1cb30a0..19dc0861 100644 --- a/2022/01/31/bootstrap-icons-1-8-0/index.html +++ b/2022/01/31/bootstrap-icons-1-8-0/index.html @@ -8,7 +8,7 @@ <meta name="description" content="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."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -196,10 +196,10 @@ <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">npm i bootstrap-icons -</code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.8.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.8.0/bootstrap-icons-1.8.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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.8.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.8.0/bootstrap-icons-1.8.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> diff --git a/archive/index.html b/archive/index.html index c391dd63..fa92a988 100644 --- a/archive/index.html +++ b/archive/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/archive/"> <meta name="description" content="All Bootstrap Blog posts by year"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -24,10 +24,10 @@ <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">npm i bootstrap-icons -</code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.8.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.8.0/bootstrap-icons-1.8.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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.8.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.8.0/bootstrap-icons-1.8.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&rsquo;s the same <a href="https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons">Bootstrap Icons Figma file</a> you&rsquo;ve seen from previous releases, just a little more accessible to those using the app.</p> </description> @@ -46,10 +46,10 @@ <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">npm i bootstrap-icons -</code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.7.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.7.0/bootstrap-icons-1.7.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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.7.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.7.0/bootstrap-icons-1.7.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&rsquo;s the same <a href="https://www.figma.com/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you&rsquo;ve seen from previous releases, just a little more accessible to those using the app.</p> </description> @@ -93,7 +93,7 @@ <p>We&rsquo;ll be flipping back to v5 development after this release, focusing on v5.2.0 with some additional updates to using more CSS variables and other awesome features. Sometime after that, we hope to ship a v4.7.0 release with some additional backported features and improvements to v4.</p> <p>Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.</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> +<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> </description> </item> @@ -150,10 +150,10 @@ <p>Found another bug, or have a suggestion? Check out the issue tracker and open an issue if you don&rsquo;t see one already opened.</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">npm i bootstrap-icons -</code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.6.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.6.0/bootstrap-icons-1.6.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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.6.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.6.0/bootstrap-icons-1.6.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&rsquo;s the same <a href="https://www.figma.com/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you&rsquo;ve seen from previous releases, just a little more accessible to those using the app.</p> </description> @@ -181,10 +181,10 @@ <p>Up next is our v5.2.0 release, adding more utility improvements and fixing an issue with how <a href="https://github.com/twbs/bootstrap/issues/34756">Sass handles re-assigned maps and variables</a>. Alongside that, we&rsquo;ll be shipping an update to v4 soon as well.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.2">Review the GitHub v5.1.2 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.2">Review the GitHub v5.1.2 release changelog</a> for a complete list of changes since our last 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> +<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> </description> </item> @@ -213,10 +213,10 @@ <p>We&rsquo;ve had a number of Visual Studio users mention that Sass compiling for Bootstrap 5.1.0 is broken when using the <a href="https://github.com/madskristensen/WebCompiler">Web Compiler extension</a>. This extension hasn&rsquo;t been updated in more than five years, so we recommend moving to a newer alternative. Some users mentioned the <a href="https://github.com/madskristensen/SassCompiler">Sass Compiler extension</a> as a successful alternative. If you have additional recommendations, <a href="https://github.com/twbs/bootstrap/issues/34738">please leave a comment to share</a>.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.1">Review the GitHub v5.1.1 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.1">Review the GitHub v5.1.1 release changelog</a> for a complete list of changes since our last 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> +<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> </description> </item> @@ -310,108 +310,108 @@ </a> <p>There&rsquo;s a new component in town with <a href="https://getbootstrap.com/docs/5.1/components/placeholders/">placeholders</a>, a way to provide temporary blocks in lieu of real content to help indicate that something is still loading in your site or app. Our first iteration here aims to only provide the HTML and CSS—it&rsquo;s up to you to implement these placeholders with whatever custom code you might need.</p> <p>Consider the basic Bootstrap card component shown above.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-img-top&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-body&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-title&#34;</span><span class="p">&gt;</span>Card title<span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-text&#34;</span><span class="p">&gt;</span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span><span class="p">&gt;</span>Go somewhere<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> - <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -</code></pre></div><p>Here it is rebuilt with glowing placeholder bars to indicate something is still loading.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card&#34;</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&#34;true&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-img-top&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-body&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-title placeholder-glow&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-6&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> - <span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-text placeholder-glow&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-7&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-4&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-4&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-6&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-8&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> - <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">&#34;-1&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary disabled placeholder col-6&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> - <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -</code></pre></div><p><strong><a href="https://getbootstrap.com/docs/5.1/components/placeholders/">Head to the placeholder docs</a></strong> to learn more.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-img-top&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-body&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-title&#34;</span><span class="p">&gt;</span>Card title<span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-text&#34;</span><span class="p">&gt;</span>Some quick example text to build on the card title and make up the bulk of the card&#39;s content.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span><span class="p">&gt;</span>Go somewhere<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span></code></pre></div><p>Here it is rebuilt with glowing placeholder bars to indicate something is still loading.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card&#34;</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&#34;true&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-img-top&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-body&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-title placeholder-glow&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-6&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card-text placeholder-glow&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-7&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-4&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-4&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-6&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;placeholder col-8&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">&#34;-1&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary disabled placeholder col-6&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span></code></pre></div><p><strong><a href="https://getbootstrap.com/docs/5.1/components/placeholders/">Head to the placeholder docs</a></strong> to learn more.</p> <h2 id="horizontal-collapse">Horizontal collapse</h2> <p>Hot damn, we&rsquo;ve finally added official support for <a href="https://getbootstrap.com/docs/5.1/components/collapse/#horizontal">horizontally collapsing</a>! The collapse plugin has been able to detect <code>width</code> vs <code>height</code> for some time (even in v4), but we never had a working example in our docs until now. Add the <code>.collapse-horizontal</code> modifier class to transition the <code>width</code> instead of <code>height</code> and set a <code>width</code> on the immediate child element.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&#34;collapse&#34;</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">&#34;#collapseWidthExample&#34;</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">&#34;false&#34;</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">&#34;collapseWidthExample&#34;</span><span class="p">&gt;</span> - Toggle width collapse -<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> - -<span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;min-height: 120px;&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;collapse collapse-horizontal&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;collapseWidthExample&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card card-body&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;width: 300px;&#34;</span><span class="p">&gt;</span> - This is some placeholder content for a horizontal collapse. It&#39;s hidden by default and shown when triggered. - <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> - <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -</code></pre></div><p><strong>Heads up!</strong> You may need some <code>min-height</code> or <code>height</code> to avoid excessive browser repainting, as we&rsquo;ve included in our demo above.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-primary&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&#34;collapse&#34;</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">&#34;#collapseWidthExample&#34;</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">&#34;false&#34;</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">&#34;collapseWidthExample&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> Toggle width collapse +</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;min-height: 120px;&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;collapse collapse-horizontal&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;collapseWidthExample&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;card card-body&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;width: 300px;&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> This is some placeholder content for a horizontal collapse. It&#39;s hidden by default and shown when triggered. +</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span></code></pre></div><p><strong>Heads up!</strong> You may need some <code>min-height</code> or <code>height</code> to avoid excessive browser repainting, as we&rsquo;ve included in our demo above.</p> <h2 id="stack-and-vertical-rule-helpers">Stack and vertical rule helpers</h2> <p>While utilities get most of the spotlight these days, helpers are still incredibly useful. <a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">Our newest helpers are called stacks</a> and they&rsquo;re shortcuts for vertical and horizontal stacks of elements. They&rsquo;re inspired by the open source <a href="https://almonk.github.io/pylon/">Pylon</a> project, which was in turn inspired by iOS&rsquo;s stacks. Right now, stacks aren&rsquo;t responsive, but that can easily change with your feedback.</p> <p>To create a vertical stack, wrap a series of elements in <code>.vstack</code>. Use <code>.gap-*</code> utilities on the parent (or set individual <code>margin</code> utilities) to quickly space elements.</p> <img src="https://blog.getbootstrap.com/assets/img/2021/08/bootstrap-vstack.png" alt="Bootstrap vstack example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;vstack gap-3&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>First item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>Second item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>Third item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -</code></pre></div><p>Want a horizontal stack? Use <code>.hstack</code> instead.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;vstack gap-3&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>First item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>Second item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>Third item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span></code></pre></div><p>Want a horizontal stack? Use <code>.hstack</code> instead.</p> <img src="https://blog.getbootstrap.com/assets/img/2021/08/bootstrap-hstack.png" alt="Bootstrap vstack example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;hstack gap-3&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>First item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>Second item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>Third item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -</code></pre></div><p>To support these stacks, we&rsquo;ve also added an additional new helper—<code>.vr</code>, or vertical rule. HTML has had native <code>&lt;hr&gt;</code> elements for the longest time to create horizontal rules, but never anything for <em>vertical</em> rules. The new <code>.vr</code> helper works great in horizontal stacks and other situations where <code>border</code>s are a little trickier.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;hstack gap-3&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>First item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>Second item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bg-light border&#34;</span><span class="p">&gt;</span>Third item<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span></code></pre></div><p>To support these stacks, we&rsquo;ve also added an additional new helper—<code>.vr</code>, or vertical rule. HTML has had native <code>&lt;hr&gt;</code> elements for the longest time to create horizontal rules, but never anything for <em>vertical</em> rules. The new <code>.vr</code> helper works great in horizontal stacks and other situations where <code>border</code>s are a little trickier.</p> <img src="https://blog.getbootstrap.com/assets/img/2021/08/bootstrap-hstack-vr.png" alt="Bootstrap vstack example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;hstack gap-3&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;form-control me-auto&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;Add your item here...&#34;</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-secondary&#34;</span><span class="p">&gt;</span>Submit<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;vr&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> - <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-outline-danger&#34;</span><span class="p">&gt;</span>Reset<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> -<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -</code></pre></div><p>Learn more in the <strong><a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">stacks helper docs</a></strong>.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;hstack gap-3&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;form-control me-auto&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;Add your item here...&#34;</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-secondary&#34;</span><span class="p">&gt;</span>Submit<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;vr&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-outline-danger&#34;</span><span class="p">&gt;</span>Reset<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span></code></pre></div><p>Learn more in the <strong><a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">stacks helper docs</a></strong>.</p> <h2 id="new-css-variables">New CSS variables</h2> <p>We&rsquo;ve expanded our <code>:root</code> CSS variables to include our gray color palette, new <code>&lt;body&gt;</code> variables, and new <code>RGB</code> variables for our theme colors. The grayscale colors join our existing color and theme color variables to complete the set of globally available CSS colors. As the development of v5 progresses, these variables will be used more and more in our components to better enable global theming.</p> <p>Speaking of, our new <code>&lt;body&gt;</code> CSS variables now control the styling of the <code>&lt;body&gt;</code>. This is what you&rsquo;ll find in the compiled CSS:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span> - <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> - <span class="k">font-family</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">family</span><span class="p">);</span> - <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">size</span><span class="p">);</span> - <span class="k">font-weight</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="kc">weight</span><span class="p">);</span> - <span class="k">line-height</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">line</span><span class="o">-</span><span class="n">height</span><span class="p">);</span> - <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> - <span class="k">text-align</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">align</span><span class="p">);</span> - <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">bg</span><span class="p">);</span> - <span class="kp">-webkit-</span><span class="n">text-size-adjust</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> - <span class="kp">-webkit-</span><span class="n">tap-highlight-color</span><span class="p">:</span> <span class="kc">transparent</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div><p>Like all our other <code>:root</code> CSS variables, the values for these are <a href="https://getbootstrap.com/docs/5.1/content/reboot/#css-variables">generated from our Sass variables</a>. That means that no matter how you customize Bootstrap—via Sass or CSS variables—you haven&rsquo;t lost any functionality or convenience.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">family</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">size</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="kc">weight</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">line-height</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">line</span><span class="o">-</span><span class="n">height</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">text-align</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">align</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">bg</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="kp">-webkit-</span><span class="n">text-size-adjust</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="kp">-webkit-</span><span class="n">tap-highlight-color</span><span class="p">:</span> <span class="kc">transparent</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>Like all our other <code>:root</code> CSS variables, the values for these are <a href="https://getbootstrap.com/docs/5.1/content/reboot/#css-variables">generated from our Sass variables</a>. That means that no matter how you customize Bootstrap—via Sass or CSS variables—you haven&rsquo;t lost any functionality or convenience.</p> <p><strong><a href="https://getbootstrap.com/docs/5.1/customize/css-variables/">Read the CSS variables customization docs</a></strong> for more info.</p> <h2 id="updated-bg--and-text--utilities">Updated <code>.bg-*</code> and <code>.text-*</code> utilities</h2> <p>Our new RGB values are built to help us make better use of CSS variables across the entire project. To start, our <code>background-color</code> and <code>color</code> utilities have been updated to use these new RGB values for real-time customization without recompiling Sass and on-the-fly transparency for any background or text color.</p> <p>Here&rsquo;s how our <code>.bg-*</code> and <code>.text-*</code> color utilities look now once compiled:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">bg-success</span> <span class="p">{</span> - <span class="nv">--bs-bg-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> - <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">success</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">bg</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> -<span class="p">}</span> - -<span class="p">.</span><span class="nc">text-primary</span> <span class="p">{</span> - <span class="nv">--bs-text-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> - <span class="k">color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">primary</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div><p>We use an RGB version of each color&rsquo;s CSS variable and attach a second CSS variable, <code>--bs-text-opacity</code> or <code>--bs-bg-opacity</code>, for the alpha transparency (with a default value <code>1</code> thanks to a local CSS variable in the ruleset). That means anytime you use <code>.text-primary</code> now, your computed <code>color</code> value is <code>rgba(13, 110, 253, 1)</code>. The local CSS variable inside each <code>.text-*</code> class helps avoid inheritance issues when nesting instances of these classes.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">bg-success</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nv">--bs-bg-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">success</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">bg</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">text-primary</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nv">--bs-text-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">primary</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>We use an RGB version of each color&rsquo;s CSS variable and attach a second CSS variable, <code>--bs-text-opacity</code> or <code>--bs-bg-opacity</code>, for the alpha transparency (with a default value <code>1</code> thanks to a local CSS variable in the ruleset). That means anytime you use <code>.text-primary</code> now, your computed <code>color</code> value is <code>rgba(13, 110, 253, 1)</code>. The local CSS variable inside each <code>.text-*</code> class helps avoid inheritance issues when nesting instances of these classes.</p> <p>To support these changes, we&rsquo;ve added some new <code>.text-opacity-*</code> and <code>.bg-opacity-*</code> utilities. Choose from a predefined set (which you can modify in the utilities API) of classes to quickly change the local CSS variable when a given <code>.text-*</code> or <code>.bg-*</code> utility is used. For example:</p> <img src="https://blog.getbootstrap.com/assets/img/2021/08/bootstrap-text-opacity.png" alt="Bootstrap text opacity example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-primary&#34;</span><span class="p">&gt;</span>This is default primary text<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-primary text-opacity-75&#34;</span><span class="p">&gt;</span>This is 75% opacity primary text<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-primary text-opacity-50&#34;</span><span class="p">&gt;</span>This is 50% opacity primary text<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-primary text-opacity-25&#34;</span><span class="p">&gt;</span>This is 25% opacity primary text<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> -</code></pre></div><p>We expect this approach to make its way to <code>border</code> utilities next. Have more CSS variables you&rsquo;d like to see added? Share your thoughts on a new issue on GitHub. Head to the <a href="https://getbootstrap.com/docs/5.1/utilities/colors/#opacity">color utilities</a> or <a href="https://getbootstrap.com/docs/5.1/utilities/background/#opacity">background utilities</a> docs to learn more.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-primary&#34;</span><span class="p">&gt;</span>This is default primary text<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-primary text-opacity-75&#34;</span><span class="p">&gt;</span>This is 75% opacity primary text<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-primary text-opacity-50&#34;</span><span class="p">&gt;</span>This is 50% opacity primary text<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-primary text-opacity-25&#34;</span><span class="p">&gt;</span>This is 25% opacity primary text<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> +</span></span></code></pre></div><p>We expect this approach to make its way to <code>border</code> utilities next. Have more CSS variables you&rsquo;d like to see added? Share your thoughts on a new issue on GitHub. Head to the <a href="https://getbootstrap.com/docs/5.1/utilities/colors/#opacity">color utilities</a> or <a href="https://getbootstrap.com/docs/5.1/utilities/background/#opacity">background utilities</a> docs to learn more.</p> <h2 id="four-new-examples">Four new examples</h2> <img src="https://blog.getbootstrap.com/assets/img/2021/08/v510-examples.png" alt="" class="border"> <p>We&rsquo;ve expanded on our component examples with four new examples that customize some of our core components and implement common patterns. Here&rsquo;s what&rsquo;s new:</p> @@ -425,17 +425,17 @@ <h2 id="modal-and-offcanvas-backdrops">Modal and offcanvas backdrops</h2> <p>We&rsquo;ve variablized the class name for our backdrops that are used across our modal and offcanvas components. This comes with a new class for the offcanvas backdrop, <code>.offcanvas-backdrop</code>, and perhaps more importantly, some updated <code>z-index</code> values.</p> <p>Previously, there was a single offcanvas <code>z-index</code> between the modal and modal backdrop <code>z-index</code>s, due to offcanvas sharing the modal&rsquo;s backdrop.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Before v5.1.0 -</span><span class="c1"></span><span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1060</span> <span class="k">!default</span><span class="p">;</span> -</code></pre></div><p>We&rsquo;ve changed this to allow offcanvases and modals to work together better with separate <code>z-index</code> values for offcanvas, the offcanvas backdrop, modal, and the modal backdrop.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// After v5.1.0 -</span><span class="c1"></span><span class="nv">$zindex-offcanvas-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1045</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1055</span> <span class="k">!default</span><span class="p">;</span> -</code></pre></div><p>Unless you&rsquo;ve modified the offcanvas component or its Sass variables, there should be no breaking changes for you.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// Before v5.1.0 +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1060</span> <span class="k">!default</span><span class="p">;</span> +</span></span></code></pre></div><p>We&rsquo;ve changed this to allow offcanvases and modals to work together better with separate <code>z-index</code> values for offcanvas, the offcanvas backdrop, modal, and the modal backdrop.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// After v5.1.0 +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$zindex-offcanvas-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1045</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1055</span> <span class="k">!default</span><span class="p">;</span> +</span></span></code></pre></div><p>Unless you&rsquo;ve modified the offcanvas component or its Sass variables, there should be no breaking changes for you.</p> <h2 id="and-more">And more!</h2> <p>There&rsquo;s a lot more in this release that we didn&rsquo;t include in the highlights above:</p> <ul> @@ -453,10 +453,10 @@ </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> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.0">Review the GitHub v5.1.0 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.0">Review the GitHub v5.1.0 release changelog</a> for a complete list of changes since our last 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> +<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> </description> </item> @@ -516,10 +516,10 @@ <p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F41">list of issues and pull requests in v5.0.2</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/41">v5.0.2 project board</a>.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.2">Review the v5.0.2 release changelog</a> for a complete list of changes.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.2">Review the v5.0.2 release changelog</a> for a complete list of changes.</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> +<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> </description> </item> @@ -554,10 +554,10 @@ <p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F38">list of issues and pull requests in v5.0.1</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/38">v5.0.1 project board</a>.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.1">Review the GitHub v5.0.1 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.1">Review the GitHub v5.0.1 release changelog</a> for a complete list of changes since our last 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> +<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> </description> </item> @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -199,10 +199,10 @@ <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">npm i bootstrap-icons -</code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.8.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.8.0/bootstrap-icons-1.8.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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.8.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.8.0/bootstrap-icons-1.8.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> @@ -241,10 +241,10 @@ <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">npm i bootstrap-icons -</code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.7.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.7.0/bootstrap-icons-1.7.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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.7.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.7.0/bootstrap-icons-1.7.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/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> @@ -308,7 +308,7 @@ <p>We’ll be flipping back to v5 development after this release, focusing on v5.2.0 with some additional updates to using more CSS variables and other awesome features. Sometime after that, we hope to ship a v4.7.0 release with some additional backported features and improvements to v4.</p> <p>Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -385,10 +385,10 @@ <p>Found another bug, or have a suggestion? Check out the issue tracker and open an issue if you don’t see one already opened.</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">npm i bootstrap-icons -</code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.6.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.6.0/bootstrap-icons-1.6.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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.6.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.6.0/bootstrap-icons-1.6.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/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> @@ -436,10 +436,10 @@ <p>Up next is our v5.2.0 release, adding more utility improvements and fixing an issue with how <a href="https://github.com/twbs/bootstrap/issues/34756">Sass handles re-assigned maps and variables</a>. Alongside that, we’ll be shipping an update to v4 soon as well.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.2">Review the GitHub v5.1.2 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.2">Review the GitHub v5.1.2 release changelog</a> for a complete list of changes since our last 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> +<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> </div> </div> diff --git a/page/10/index.html b/page/10/index.html index 9da2f3c6..77fd8809 100644 --- a/page/10/index.html +++ b/page/10/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/page/11/index.html b/page/11/index.html index 21160513..5996cd69 100644 --- a/page/11/index.html +++ b/page/11/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -371,12 +371,12 @@ <hr> <p>For more details on this release’s changes, take a look at the <a href="https://github.com/twbs/bootstrap/issues/20939">Alpha 6 ship list issue</a>, as well as the <a href="https://github.com/twbs/bootstrap/milestone/39?closed=1">closed Alpha 6 milestone</a>. Be sure to <a href="https://bootstrap-slack.herokuapp.com">join our official Slack room!</a> and dive into <a href="https://github.com/twbs/bootstrap/issues/">our issue tracker</a> with bug reports, questions, and general feedback whenever possible.</p> <p><strong>Using the Bootstrap CDN?</strong> Review the changelog and update your CDN links to point to the latest files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div><script src="https://static.jsbin.com/js/embed.min.js"></script> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div><script src="https://static.jsbin.com/js/embed.min.js"></script> </div><div class="post"> <h1 class="post-title fw-500"> @@ -461,12 +461,12 @@ <hr> <p>For more details on this release’s changes, take a look at the <a href="https://github.com/twbs/bootstrap/issues/20630">Alpha 5 ship list issue</a>, as well as the <a href="https://github.com/twbs/bootstrap/milestone/36?closed=1">closed Alpha 5 milestone</a>. Be sure to <a href="https://bootstrap-slack.herokuapp.com">join our official Slack room!</a> and dive into <a href="https://github.com/twbs/bootstrap/issues/">our issue tracker</a> with bug reports, questions, and general feedback whenever possible.</p> <p><strong>Using the Bootstrap CDN?</strong> Review the changelog and update your CDN links to point to the latest files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div><div class="post"> <h1 class="post-title fw-500"> <a href="/2016/09/05/bootstrap-4-alpha-4/"> @@ -507,12 +507,12 @@ <p>At the time of release, the Bootstrap CDN hasn’t been updated for Alpha 4. Apologies for the delay, and stay tuned for an update on when they’re live.</p> <p>For more details on this release’s changes, take a look at the <a href="https://github.com/twbs/bootstrap/issues/20373">Alpha 4 ship list issue</a>, as well as the <a href="https://github.com/twbs/bootstrap/milestone/40?closed=1">closed Alpha 4 milestone</a>. Be sure to <a href="https://bootstrap-slack.herokuapp.com">join our official Slack room!</a> and dive into <a href="https://github.com/twbs/bootstrap/issues/">our issue tracker</a> with bug reports, questions, and general feedback whenever possible.</p> <p><strong>Using the Bootstrap CDN?</strong> Review the changelog and update your CDN links to point to the latest files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> </div> diff --git a/page/12/index.html b/page/12/index.html index ca54679d..3b5f3f3f 100644 --- a/page/12/index.html +++ b/page/12/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -236,19 +236,19 @@ <p>Speaking of validation states, we have <strong>brand new form validation and help text options</strong>. Validation states can now be applied on a per-input basis (with <code>.form-control-{state}</code>) and optional validation feedback can be shown with <code>.form-control-feedback</code>. Independent form help text can now be controlled with the new <code>.form-text</code> class.</p> </li> </ul> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-group has-success"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"inputSuccess1"</span><span class="p">></span> - Input with success - <span class="p"></</span><span class="nt">label</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control form-control-success"</span> <span class="na">id</span><span class="o">=</span><span class="s">"inputSuccess1"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control-feedback"</span><span class="p">></span> - Success! You've done it. - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-text text-muted"</span><span class="p">></span> - Example help text that remains unchanged. - <span class="p"></</span><span class="nt">small</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><ul> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-group has-success"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"col-form-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"inputSuccess1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Input with success +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control form-control-success"</span> <span class="na">id</span><span class="o">=</span><span class="s">"inputSuccess1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control-feedback"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Success! You've done it. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">small</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-text text-muted"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Example help text that remains unchanged. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">small</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><ul> <li> <p>Fixed a few form related bugs, like the horizontal label padding in <a href="https://github.com/twbs/bootstrap/issues/17498">#17498</a>, misuse of <code><fieldset></code>s for form groups, sizing classes not applying to <code><select></code>s, and more.</p> </li> @@ -316,15 +316,15 @@ <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.7 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div><div class="post"> <h1 class="post-title fw-500"> <a href="/2015/12/08/bootstrap-4-alpha-2/"> @@ -418,15 +418,15 @@ <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.6 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div><div class="post"> <h1 class="post-title fw-500"> <a href="/2015/08/19/bootstrap-4-alpha/"> diff --git a/page/13/index.html b/page/13/index.html index 6ec8172c..18f51b25 100644 --- a/page/13/index.html +++ b/page/13/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -241,30 +241,30 @@ <h2 id="wiredep-and-bower">wiredep and Bower</h2> <p>Due to vagueness in Bower’s specification, wiredep made some questionable assumptions about how the <code>main</code> field in <code>bower.json</code> works. Recently, <a href="https://github.com/bower/spec/pull/43">Bower updated their spec to address this and clarify how <code>main</code> should work</a>, and we <a href="https://github.com/twbs/bootstrap/pull/16359">updated our <code>bower.json</code> accordingly</a>. Unfortunately, <a href="https://github.com/twbs/bootstrap/issues/16663">wiredep broke as a result</a> if you were using it with Bootstrap’s vanilla precompiled CSS. Bower is <a href="https://github.com/bower/spec/issues/47">working to further update their spec</a> to address this problem and better assist tools like wiredep.</p> <p>In the meantime, a quick-and-dirty workaround to get wiredep to work with Bootstrap again is to add the following to your project’s <code>bower.json</code>:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="s2">"overrides"</span><span class="err">:</span> <span class="p">{</span> - <span class="nt">"bootstrap"</span><span class="p">:</span> <span class="p">{</span> - <span class="nt">"main"</span><span class="p">:</span> <span class="p">[</span> - <span class="s2">"dist/js/bootstrap.js"</span><span class="p">,</span> - <span class="s2">"dist/css/bootstrap.css"</span><span class="p">,</span> - <span class="s2">"less/bootstrap.less"</span> - <span class="p">]</span> - <span class="p">}</span> -<span class="p">}</span> -</code></pre></div><h2 id="download-bootstrap">Download Bootstrap</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="s2">"overrides"</span><span class="err">:</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nt">"bootstrap"</span><span class="p">:</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nt">"main"</span><span class="p">:</span> <span class="p">[</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"dist/js/bootstrap.js"</span><span class="p">,</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"dist/css/bootstrap.css"</span><span class="p">,</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"less/bootstrap.less"</span> +</span></span><span class="line"><span class="cl"> <span class="p">]</span> +</span></span><span class="line"><span class="cl"> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><h2 id="download-bootstrap">Download Bootstrap</h2> <p>Download the latest release—source code, compiled assets, and documentation—as a ZIP file directly from GitHub:</p> <p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.3.5.zip">Download Bootstrap 3.3.5</a></p> <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.5 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div><div class="post"> <h1 class="post-title fw-500"> <a href="/2015/03/16/bootstrap-3-3-4-released/"> @@ -312,15 +312,15 @@ <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.4 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div><div class="post"> <h1 class="post-title fw-500"> <a href="/2015/01/19/bootstrap-3-3-2-released/"> @@ -372,15 +372,15 @@ <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.2 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div><div class="post"> <h1 class="post-title fw-500"> <a href="/2014/11/12/bootstrap-3-3-1-released/"> @@ -417,15 +417,15 @@ <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.3.1 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> </div> </div> diff --git a/page/14/index.html b/page/14/index.html index ba7e1e8f..eda25ef6 100644 --- a/page/14/index.html +++ b/page/14/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -332,15 +332,15 @@ <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>After reviewing the changelog, update your CDN links to point to the v3.2.0 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div><h2 id="whats-new">What’s new</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div><h2 id="whats-new">What’s new</h2> <p>Here’s a look at some of the highlights of this release.</p> <h3 id="responsive-embeds">Responsive embeds</h3> <p>As seen in <a href="https://suitcss.github.io/">SUIT CSS</a>, we’ve added a few classes for creating responsive embeds. They’re great for proportionally scaling down YouTube videos and other <code>iframe</code> or <code>embed</code> elements. <a href="https://getbootstrap.com/components/#responsive-embed">Head to the docs</a> to check them out.</p> diff --git a/page/15/index.html b/page/15/index.html index ef9ed185..ff0ae4e0 100644 --- a/page/15/index.html +++ b/page/15/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -361,15 +361,15 @@ <p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options.</p> <h2 id="bootstrap-cdn">Bootstrap CDN</h2> <p>Update your CDN links to point to the v3.1.1 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div><h2 id="full-changelog">Full changelog</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div><h2 id="full-changelog">Full changelog</h2> <h3 id="css">CSS</h3> <ul> <li><a href="https://github.com/twbs/bootstrap/issues/11659">#11659</a>, <a href="https://github.com/twbs/bootstrap/issues/12349">#12349</a>, <a href="https://github.com/twbs/bootstrap/issues/12698">#12698</a>: Always show the input above appended buttons in input groups for proper focus and disabled state borders.</li> @@ -434,10 +434,10 @@ </ul> <h3 id="build-tools">Build tools</h3> <ul> -<li><a href="https://github.com/twbs/bootstrap/issues/12466">#12466</a>: Add the examples' CSS to the <code>csslint</code> task.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/12466">#12466</a>: Add the examples’ CSS to the <code>csslint</code> task.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12531">#12531</a>: Add <code>/docs/dist/</code> to the <code>clean</code> task.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12534">#12534</a>: Allow the bootstrap package in npm to directly expose CSS and Less files.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/12568">#12568</a>: Add the examples' CSS to the <code>csscomb</code> task.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/12568">#12568</a>: Add the examples’ CSS to the <code>csscomb</code> task.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12581">#12581</a>, <a href="https://github.com/twbs/bootstrap/issues/12583">#12583</a>: Reorganize all Grunt tasks into one directory so that <code>grunt</code> runs properly in Bower installations.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12605">#12605</a>: Use license object instead of licenses array in Grunt.</li> </ul> diff --git a/page/16/index.html b/page/16/index.html index 0b08499b..4c255abf 100644 --- a/page/16/index.html +++ b/page/16/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -224,15 +224,15 @@ <p>Get downloading now, or see the list below for more information on what’s new in this release. Download it from GitHub or snag it from the CDN:</p> <p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.1.0.zip">Download Bootstrap 3.1.0</a></p> <p>Or, hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a>.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"</span><span class="p">></span> - -<span class="c"><!-- Optional theme --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"</span><span class="p">></span> - -<span class="c"><!-- Latest compiled and minified JavaScript --></span> -<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</code></pre></div><hr> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div><hr> <h2 id="full-changelog">Full changelog</h2> <h3 id="new-features">New features</h3> <ul> @@ -287,7 +287,7 @@ <li><a href="https://github.com/twbs/bootstrap/pull/12247">#12247</a>: Add and use <code>.text-emphasis-variant()</code> mixin for emphasis classes. Also updated emphasis classes to only apply <code>:hover</code> styles to linked content.</li> <li><a href="https://github.com/twbs/bootstrap/pull/12248">#12248</a>: Add and use <code>.bg-variant()</code> mixin to generate background classes.</li> <li><a href="https://github.com/twbs/bootstrap/pull/12249">#12249</a>: Add and use <code>@modal-md</code> Less variable for uniformity.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/12250">#12250</a>: Remove print <code>margin</code>s per upstream H5BP change, thus deferring to browser defaults, or users' custom values should they set them.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/12250">#12250</a>: Remove print <code>margin</code>s per upstream H5BP change, thus deferring to browser defaults, or users’ custom values should they set them.</li> <li><a href="https://github.com/twbs/bootstrap/pull/12286">#12286</a>: Only remove appropriate <code>border-radius</code> from first and last tables or list groups in panels.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12353">#12353</a>: Scope table border reset in panels to first-child rows.</li> <li><a href="https://github.com/twbs/bootstrap/issues/12359">#12359</a>: Reset <code>min-width</code> on <code><fieldset></code>s so they don’t break responsive tables and behave more like standard block level elements.</li> diff --git a/page/17/index.html b/page/17/index.html index 4704ae93..c302fde5 100644 --- a/page/17/index.html +++ b/page/17/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/page/18/index.html b/page/18/index.html index 1c2e56ed..2b7c7c2f 100644 --- a/page/18/index.html +++ b/page/18/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -433,7 +433,7 @@ <p>We would love to have folks help test these changes to prevent further regressions.</p> <ul> <li>Checkout the <code>2.2.2-wip</code> branch, or browse the release candidate docs so you can easily load it up on devices and such for testing. <strong>Note: downloads on the RC docs do not work.</strong></li> -<li>Take a look at the docs and give ‘em a run on the docs, on your phone, your (least?) favorite browser, etc.</li> +<li>Take a look at the docs and give ’em a run on the docs, on your phone, your (least?) favorite browser, etc.</li> <li><a href="https://github.com/twbs/bootstrap/issues?sort=created&direction=desc&state=open">Open a new issue on GitHub</a> to report bugs. Please include as much context and information as possible. If it’s a visual bug, please include a screenshot. If it pertains to JavaScript, consider including a <a href="https://jsfiddle.net/">jsfiddle</a>.</li> </ul> <p>If you’re submitting a pull request against 2.2.2-wip, be sure to read the <a href="https://github.com/twbs/bootstrap/wiki/Contributing-to-Bootstrap">Contributing to Bootstrap</a> wiki page first.</p> diff --git a/page/19/index.html b/page/19/index.html index 5e8500d1..e9d893a1 100644 --- a/page/19/index.html +++ b/page/19/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/page/2/index.html b/page/2/index.html index f217fa58..ba993c37 100644 --- a/page/2/index.html +++ b/page/2/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -207,10 +207,10 @@ <p>We’ve had a number of Visual Studio users mention that Sass compiling for Bootstrap 5.1.0 is broken when using the <a href="https://github.com/madskristensen/WebCompiler">Web Compiler extension</a>. This extension hasn’t been updated in more than five years, so we recommend moving to a newer alternative. Some users mentioned the <a href="https://github.com/madskristensen/SassCompiler">Sass Compiler extension</a> as a successful alternative. If you have additional recommendations, <a href="https://github.com/twbs/bootstrap/issues/34738">please leave a comment to share</a>.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.1">Review the GitHub v5.1.1 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.1">Review the GitHub v5.1.1 release changelog</a> for a complete list of changes since our last 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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -344,108 +344,108 @@ </a> <p>There’s a new component in town with <a href="https://getbootstrap.com/docs/5.1/components/placeholders/">placeholders</a>, a way to provide temporary blocks in lieu of real content to help indicate that something is still loading in your site or app. Our first iteration here aims to only provide the HTML and CSS—it’s up to you to implement these placeholders with whatever custom code you might need.</p> <p>Consider the basic Bootstrap card component shown above.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>Here it is rebuilt with glowing placeholder bars to indicate something is still loading.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> - <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title placeholder-glow"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-6"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text placeholder-glow"</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-7"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-4"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-4"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-6"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-8"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> - <span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary disabled placeholder col-6"</span><span class="p">></</span><span class="nt">a</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p><strong><a href="https://getbootstrap.com/docs/5.1/components/placeholders/">Head to the placeholder docs</a></strong> to learn more.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title"</span><span class="p">></span>Card title<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text"</span><span class="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">></span>Go somewhere<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>Here it is rebuilt with glowing placeholder bars to indicate something is still loading.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card"</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-img-top"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-body"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-title placeholder-glow"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-6"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"card-text placeholder-glow"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-7"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-4"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-4"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-6"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"placeholder col-8"</span><span class="p">></</span><span class="nt">span</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary disabled placeholder col-6"</span><span class="p">></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p><strong><a href="https://getbootstrap.com/docs/5.1/components/placeholders/">Head to the placeholder docs</a></strong> to learn more.</p> <h2 id="horizontal-collapse">Horizontal collapse</h2> <p>Hot damn, we’ve finally added official support for <a href="https://getbootstrap.com/docs/5.1/components/collapse/#horizontal">horizontally collapsing</a>! The collapse plugin has been able to detect <code>width</code> vs <code>height</code> for some time (even in v4), but we never had a working example in our docs until now. Add the <code>.collapse-horizontal</code> modifier class to transition the <code>width</code> instead of <code>height</code> and set a <code>width</code> on the immediate child element.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#collapseWidthExample"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"collapseWidthExample"</span><span class="p">></span> - Toggle width collapse -<span class="p"></</span><span class="nt">button</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"min-height: 120px;"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"collapse collapse-horizontal"</span> <span class="na">id</span><span class="o">=</span><span class="s">"collapseWidthExample"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card card-body"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 300px;"</span><span class="p">></span> - This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p><strong>Heads up!</strong> You may need some <code>min-height</code> or <code>height</code> to avoid excessive browser repainting, as we’ve included in our demo above.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"collapse"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#collapseWidthExample"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span> <span class="na">aria-controls</span><span class="o">=</span><span class="s">"collapseWidthExample"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Toggle width collapse +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"min-height: 120px;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"collapse collapse-horizontal"</span> <span class="na">id</span><span class="o">=</span><span class="s">"collapseWidthExample"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"card card-body"</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 300px;"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p><strong>Heads up!</strong> You may need some <code>min-height</code> or <code>height</code> to avoid excessive browser repainting, as we’ve included in our demo above.</p> <h2 id="stack-and-vertical-rule-helpers">Stack and vertical rule helpers</h2> <p>While utilities get most of the spotlight these days, helpers are still incredibly useful. <a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">Our newest helpers are called stacks</a> and they’re shortcuts for vertical and horizontal stacks of elements. They’re inspired by the open source <a href="https://almonk.github.io/pylon/">Pylon</a> project, which was in turn inspired by iOS’s stacks. Right now, stacks aren’t responsive, but that can easily change with your feedback.</p> <p>To create a vertical stack, wrap a series of elements in <code>.vstack</code>. Use <code>.gap-*</code> utilities on the parent (or set individual <code>margin</code> utilities) to quickly space elements.</p> <img src="/assets/img/2021/08/bootstrap-vstack.png" alt="Bootstrap vstack example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vstack gap-3"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>First item<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Second item<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Third item<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>Want a horizontal stack? Use <code>.hstack</code> instead.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vstack gap-3"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>First item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Second item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Third item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>Want a horizontal stack? Use <code>.hstack</code> instead.</p> <img src="/assets/img/2021/08/bootstrap-hstack.png" alt="Bootstrap vstack example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"hstack gap-3"</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>First item<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Second item<span class="p"></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Third item<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>To support these stacks, we’ve also added an additional new helper—<code>.vr</code>, or vertical rule. HTML has had native <code><hr></code> elements for the longest time to create horizontal rules, but never anything for <em>vertical</em> rules. The new <code>.vr</code> helper works great in horizontal stacks and other situations where <code>border</code>s are a little trickier.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"hstack gap-3"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>First item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Second item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-light border"</span><span class="p">></span>Third item<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>To support these stacks, we’ve also added an additional new helper—<code>.vr</code>, or vertical rule. HTML has had native <code><hr></code> elements for the longest time to create horizontal rules, but never anything for <em>vertical</em> rules. The new <code>.vr</code> helper works great in horizontal stacks and other situations where <code>border</code>s are a little trickier.</p> <img src="/assets/img/2021/08/bootstrap-hstack-vr.png" alt="Bootstrap vstack example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"hstack gap-3"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control me-auto"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Add your item here..."</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>Submit<span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vr"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-danger"</span><span class="p">></span>Reset<span class="p"></</span><span class="nt">button</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>Learn more in the <strong><a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">stacks helper docs</a></strong>.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"hstack gap-3"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-control me-auto"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Add your item here..."</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary"</span><span class="p">></span>Submit<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"vr"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-outline-danger"</span><span class="p">></span>Reset<span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>Learn more in the <strong><a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">stacks helper docs</a></strong>.</p> <h2 id="new-css-variables">New CSS variables</h2> <p>We’ve expanded our <code>:root</code> CSS variables to include our gray color palette, new <code><body></code> variables, and new <code>RGB</code> variables for our theme colors. The grayscale colors join our existing color and theme color variables to complete the set of globally available CSS colors. As the development of v5 progresses, these variables will be used more and more in our components to better enable global theming.</p> <p>Speaking of, our new <code><body></code> CSS variables now control the styling of the <code><body></code>. This is what you’ll find in the compiled CSS:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span> - <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> - <span class="k">font-family</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">family</span><span class="p">);</span> - <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">size</span><span class="p">);</span> - <span class="k">font-weight</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="kc">weight</span><span class="p">);</span> - <span class="k">line-height</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">line</span><span class="o">-</span><span class="n">height</span><span class="p">);</span> - <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> - <span class="k">text-align</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">align</span><span class="p">);</span> - <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">bg</span><span class="p">);</span> - <span class="kp">-webkit-</span><span class="n">text-size-adjust</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> - <span class="kp">-webkit-</span><span class="n">tap-highlight-color</span><span class="p">:</span> <span class="kc">transparent</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div><p>Like all our other <code>:root</code> CSS variables, the values for these are <a href="https://getbootstrap.com/docs/5.1/content/reboot/#css-variables">generated from our Sass variables</a>. That means that no matter how you customize Bootstrap—via Sass or CSS variables—you haven’t lost any functionality or convenience.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">family</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="n">size</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">font</span><span class="o">-</span><span class="kc">weight</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">line-height</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">line</span><span class="o">-</span><span class="n">height</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">text-align</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">align</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">body</span><span class="o">-</span><span class="n">bg</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="kp">-webkit-</span><span class="n">text-size-adjust</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="kp">-webkit-</span><span class="n">tap-highlight-color</span><span class="p">:</span> <span class="kc">transparent</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>Like all our other <code>:root</code> CSS variables, the values for these are <a href="https://getbootstrap.com/docs/5.1/content/reboot/#css-variables">generated from our Sass variables</a>. That means that no matter how you customize Bootstrap—via Sass or CSS variables—you haven’t lost any functionality or convenience.</p> <p><strong><a href="https://getbootstrap.com/docs/5.1/customize/css-variables/">Read the CSS variables customization docs</a></strong> for more info.</p> <h2 id="updated-bg--and-text--utilities">Updated <code>.bg-*</code> and <code>.text-*</code> utilities</h2> <p>Our new RGB values are built to help us make better use of CSS variables across the entire project. To start, our <code>background-color</code> and <code>color</code> utilities have been updated to use these new RGB values for real-time customization without recompiling Sass and on-the-fly transparency for any background or text color.</p> <p>Here’s how our <code>.bg-*</code> and <code>.text-*</code> color utilities look now once compiled:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">bg-success</span> <span class="p">{</span> - <span class="nv">--bs-bg-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> - <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">success</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">bg</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> -<span class="p">}</span> - -<span class="p">.</span><span class="nc">text-primary</span> <span class="p">{</span> - <span class="nv">--bs-text-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> - <span class="k">color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">primary</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div><p>We use an RGB version of each color’s CSS variable and attach a second CSS variable, <code>--bs-text-opacity</code> or <code>--bs-bg-opacity</code>, for the alpha transparency (with a default value <code>1</code> thanks to a local CSS variable in the ruleset). That means anytime you use <code>.text-primary</code> now, your computed <code>color</code> value is <code>rgba(13, 110, 253, 1)</code>. The local CSS variable inside each <code>.text-*</code> class helps avoid inheritance issues when nesting instances of these classes.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">bg-success</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nv">--bs-bg-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">success</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">bg</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">text-primary</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nv">--bs-text-opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="n">primary</span><span class="o">-</span><span class="n">rgb</span><span class="p">),</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs</span><span class="o">-</span><span class="kc">text</span><span class="o">-</span><span class="n">opacity</span><span class="p">))</span> <span class="cp">!important</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>We use an RGB version of each color’s CSS variable and attach a second CSS variable, <code>--bs-text-opacity</code> or <code>--bs-bg-opacity</code>, for the alpha transparency (with a default value <code>1</code> thanks to a local CSS variable in the ruleset). That means anytime you use <code>.text-primary</code> now, your computed <code>color</code> value is <code>rgba(13, 110, 253, 1)</code>. The local CSS variable inside each <code>.text-*</code> class helps avoid inheritance issues when nesting instances of these classes.</p> <p>To support these changes, we’ve added some new <code>.text-opacity-*</code> and <code>.bg-opacity-*</code> utilities. Choose from a predefined set (which you can modify in the utilities API) of classes to quickly change the local CSS variable when a given <code>.text-*</code> or <code>.bg-*</code> utility is used. For example:</p> <img src="/assets/img/2021/08/bootstrap-text-opacity.png" alt="Bootstrap text opacity example" class="border"> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary"</span><span class="p">></span>This is default primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-75"</span><span class="p">></span>This is 75% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-50"</span><span class="p">></span>This is 50% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-25"</span><span class="p">></span>This is 25% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>We expect this approach to make its way to <code>border</code> utilities next. Have more CSS variables you’d like to see added? Share your thoughts on a new issue on GitHub. Head to the <a href="https://getbootstrap.com/docs/5.1/utilities/colors/#opacity">color utilities</a> or <a href="https://getbootstrap.com/docs/5.1/utilities/background/#opacity">background utilities</a> docs to learn more.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary"</span><span class="p">></span>This is default primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-75"</span><span class="p">></span>This is 75% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-50"</span><span class="p">></span>This is 50% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"text-primary text-opacity-25"</span><span class="p">></span>This is 25% opacity primary text<span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>We expect this approach to make its way to <code>border</code> utilities next. Have more CSS variables you’d like to see added? Share your thoughts on a new issue on GitHub. Head to the <a href="https://getbootstrap.com/docs/5.1/utilities/colors/#opacity">color utilities</a> or <a href="https://getbootstrap.com/docs/5.1/utilities/background/#opacity">background utilities</a> docs to learn more.</p> <h2 id="four-new-examples">Four new examples</h2> <img src="/assets/img/2021/08/v510-examples.png" alt="" class="border"> <p>We’ve expanded on our component examples with four new examples that customize some of our core components and implement common patterns. Here’s what’s new:</p> @@ -459,17 +459,17 @@ <h2 id="modal-and-offcanvas-backdrops">Modal and offcanvas backdrops</h2> <p>We’ve variablized the class name for our backdrops that are used across our modal and offcanvas components. This comes with a new class for the offcanvas backdrop, <code>.offcanvas-backdrop</code>, and perhaps more importantly, some updated <code>z-index</code> values.</p> <p>Previously, there was a single offcanvas <code>z-index</code> between the modal and modal backdrop <code>z-index</code>s, due to offcanvas sharing the modal’s backdrop.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// Before v5.1.0 -</span><span class="c1"></span><span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1060</span> <span class="k">!default</span><span class="p">;</span> -</code></pre></div><p>We’ve changed this to allow offcanvases and modals to work together better with separate <code>z-index</code> values for offcanvas, the offcanvas backdrop, modal, and the modal backdrop.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="c1">// After v5.1.0 -</span><span class="c1"></span><span class="nv">$zindex-offcanvas-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1045</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1055</span> <span class="k">!default</span><span class="p">;</span> -</code></pre></div><p>Unless you’ve modified the offcanvas component or its Sass variables, there should be no breaking changes for you.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// Before v5.1.0 +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1060</span> <span class="k">!default</span><span class="p">;</span> +</span></span></code></pre></div><p>We’ve changed this to allow offcanvases and modals to work together better with separate <code>z-index</code> values for offcanvas, the offcanvas backdrop, modal, and the modal backdrop.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// After v5.1.0 +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$zindex-offcanvas-backdrop</span><span class="o">:</span> <span class="mi">1040</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-offcanvas</span><span class="o">:</span> <span class="mi">1045</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-modal-backdrop</span><span class="o">:</span> <span class="mi">1050</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$zindex-modal</span><span class="o">:</span> <span class="mi">1055</span> <span class="k">!default</span><span class="p">;</span> +</span></span></code></pre></div><p>Unless you’ve modified the offcanvas component or its Sass variables, there should be no breaking changes for you.</p> <h2 id="and-more">And more!</h2> <p>There’s a lot more in this release that we didn’t include in the highlights above:</p> <ul> @@ -487,10 +487,10 @@ </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’s also been pushed to npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.0">Review the GitHub v5.1.0 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.0">Review the GitHub v5.1.0 release changelog</a> for a complete list of changes since our last 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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -570,10 +570,10 @@ <p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F41">list of issues and pull requests in v5.0.2</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/41">v5.0.2 project board</a>.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.2">Review the v5.0.2 release changelog</a> for a complete list of changes.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.2">Review the v5.0.2 release changelog</a> for a complete list of changes.</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -628,10 +628,10 @@ <p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F38">list of issues and pull requests in v5.0.1</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/38">v5.0.1 project board</a>.</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">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.1">Review the GitHub v5.0.1 release changelog</a> for a complete list of changes since our last release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.1">Review the GitHub v5.0.1 release changelog</a> for a complete list of changes since our last 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> +<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> </div> </div> diff --git a/page/20/index.html b/page/20/index.html index f3bc5c85..2e814ab6 100644 --- a/page/20/index.html +++ b/page/20/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/page/21/index.html b/page/21/index.html index 68e638d4..b0711118 100644 --- a/page/21/index.html +++ b/page/21/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -259,8 +259,8 @@ <p>Today we’re releasing <a href="https://getbootstrap.com/">Bootstrap 2.0.3</a>, another bugfix release that aims to squash as many regressions and documentation inaccuracies as possible. There are almost 100 closed issues in the <a href="https://github.com/twbs/bootstrap/issues?sort=created&direction=desc&state=closed&page=1&milestone=10">2.0.3 milestone</a> on GitHub, but below is a comprehensive list of the most important fixes with clear explanations of what’s changed.</p> <h2 id="makefile">Makefile</h2> <p>In the spirit of always improving the LESS functionality and build tools, we’ve updated our makefile to utilize <a href="https://jshint.com/">JSHint</a> and <a href="https://twitter.github.io/recess/">Recess</a>, linters for JavaScript and CSS. To continue to run <code>make</code> via Terminal, do the following:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash">npm install -g recess jshint -</code></pre></div><p>We’ve also removed the bootstrap.zip file from the repository, so make runs much faster as it has no need to compress any files. For more info, see the <a href="https://github.com/twbs/bootstrap/blob/v2.0.3/README.md">updated readme</a>.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">npm install -g recess jshint +</span></span></code></pre></div><p>We’ve also removed the bootstrap.zip file from the repository, so make runs much faster as it has no need to compress any files. For more info, see the <a href="https://github.com/twbs/bootstrap/blob/v2.0.3/README.md">updated readme</a>.</p> <h2 id="html-and-css">HTML and CSS</h2> <ul> <li>Overhauled the responsive utility classes to simplify required CSS, add <code>!important</code> to all declarations, and use <code>display: inherit</code> in place of <code>display: block</code> to account for different types of elements.</li> @@ -375,16 +375,16 @@ <p>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.</p> <p>To begin with, Bootstrap’s JS will use the following options (stored in a .jshintrc file in the js dir):</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="p">{</span> - <span class="nt">"validthis"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"laxcomma"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"laxbreak"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"browser"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"boss"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"expr"</span> <span class="p">:</span> <span class="kc">true</span> - <span class="p">,</span> <span class="nt">"asi"</span> <span class="p">:</span> <span class="kc">true</span> -<span class="p">}</span> -</code></pre></div><p>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 <a href="https://jshint.com/">check it out right now</a>!</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nt">"validthis"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"laxcomma"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"laxbreak"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"browser"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"boss"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"expr"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"> <span class="p">,</span> <span class="nt">"asi"</span> <span class="p">:</span> <span class="kc">true</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>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 <a href="https://jshint.com/">check it out right now</a>!</p> <h3 id="recesshttpstwittergithubiorecess"><a href="https://twitter.github.io/recess/">Recess</a></h3> <p>Recess is a project developed at Twitter to help support our internal style guide.</p> <p><img src="/assets/img/2012/04/recess.png" alt="Recess screenshot"></p> diff --git a/page/22/index.html b/page/22/index.html index f9ac1d99..b0843df8 100644 --- a/page/22/index.html +++ b/page/22/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -247,28 +247,28 @@ <p>For one reason or another, in 2.0.2 we made badges have separate LESS files. The CSS is 95% the same, but we knew that some folks might need one or the other, or even both. With <a href="https://github.com/twbs/bootstrap/issues?milestone=10&q=is%3Aopen">2.0.3</a>, we’ll be simplifying some of those styles into a single .less file and scoping the <code>:hover</code> state to anchors only.</p> <p>Moving forward, we’ll have the following as a shared set of base styles. As you can see, when combined, there isn’t much extra weight at all for those who want just badges or labels.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.label</span><span class="o">,</span> -<span class="nc">.badge</span> <span class="p">{</span> - <span class="na">font-size</span><span class="o">:</span> <span class="o">@</span><span class="n">baseFontSize</span> <span class="o">*</span> <span class="mf">.846</span><span class="p">;</span> - <span class="na">font-weight</span><span class="o">:</span> <span class="ni">bold</span><span class="p">;</span> - <span class="na">line-height</span><span class="o">:</span> <span class="mi">13</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// ensure proper line-height if floated -</span><span class="c1"></span> <span class="na">color</span><span class="o">:</span> <span class="o">@</span><span class="ni">white</span><span class="p">;</span> - <span class="na">vertical-align</span><span class="o">:</span> <span class="ni">middle</span><span class="p">;</span> - <span class="na">white-space</span><span class="o">:</span> <span class="ni">nowrap</span><span class="p">;</span> - <span class="na">text-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="o">-</span><span class="mi">1</span><span class="kt">px</span> <span class="mi">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,.</span><span class="mi">25</span><span class="p">);</span> - <span class="na">background-color</span><span class="o">:</span> <span class="o">@</span><span class="n">grayLight</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div><p>One file, multiple components. We’ve done it before with our multiple types of navigation, so it’s nothing folks familiar with Bootstrap haven’t seen before.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nc">.label</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"><span class="nc">.badge</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="na">font-size</span><span class="o">:</span> <span class="o">@</span><span class="n">baseFontSize</span> <span class="o">*</span> <span class="mf">.846</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">font-weight</span><span class="o">:</span> <span class="ni">bold</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">line-height</span><span class="o">:</span> <span class="mi">13</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// ensure proper line-height if floated +</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="na">color</span><span class="o">:</span> <span class="o">@</span><span class="ni">white</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">vertical-align</span><span class="o">:</span> <span class="ni">middle</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">white-space</span><span class="o">:</span> <span class="ni">nowrap</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">text-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="o">-</span><span class="mi">1</span><span class="kt">px</span> <span class="mi">0</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,.</span><span class="mi">25</span><span class="p">);</span> +</span></span><span class="line"><span class="cl"> <span class="na">background-color</span><span class="o">:</span> <span class="o">@</span><span class="n">grayLight</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>One file, multiple components. We’ve done it before with our multiple types of navigation, so it’s nothing folks familiar with Bootstrap haven’t seen before.</p> <p>On a related note, we’ve changed how we handle hover states for badges and labels. Instead of having a default hover state on an inherently static element, one made with say a <code>span</code>, we relegate the hover state (a cursor and background change) to anchors only.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nt">a</span> <span class="p">{</span> - <span class="k">&</span><span class="nc">.label</span><span class="nd">:hover</span><span class="o">,</span> - <span class="k">&</span><span class="nc">.badge</span><span class="nd">:hover</span> <span class="p">{</span> - <span class="na">color</span><span class="o">:</span> <span class="o">@</span><span class="ni">white</span><span class="p">;</span> - <span class="na">text-decoration</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span> - <span class="na">cursor</span><span class="o">:</span> <span class="ni">pointer</span><span class="p">;</span> - <span class="p">}</span> -<span class="p">}</span> -</code></pre></div><p>For the alternate colors on badges and labels, we’ve also relegated those styles to anchors only (those with an <code>href</code> attribute).</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nt">a</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="k">&</span><span class="nc">.label</span><span class="nd">:hover</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="k">&</span><span class="nc">.badge</span><span class="nd">:hover</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="na">color</span><span class="o">:</span> <span class="o">@</span><span class="ni">white</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">text-decoration</span><span class="o">:</span> <span class="ni">none</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">cursor</span><span class="o">:</span> <span class="ni">pointer</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><p>For the alternate colors on badges and labels, we’ve also relegated those styles to anchors only (those with an <code>href</code> attribute).</p> </div><div class="post"> <h1 class="post-title fw-500"> diff --git a/page/3/index.html b/page/3/index.html index 6b4131f7..ac6efe58 100644 --- a/page/3/index.html +++ b/page/3/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -212,8 +212,8 @@ <p><a href="https://icons.getbootstrap.com">Head to the Bootstrap Icons docs</a> to see them in action.</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">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.5.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.5.0/bootstrap-icons-1.5.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.5.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.5.0/bootstrap-icons-1.5.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/972989644486753519/Bootstrap-Icons-v1.5.0">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> @@ -304,25 +304,25 @@ <h3 id="checks-and-radios">Checks and radios</h3> <p><a href="https://getbootstrap.com/docs/5.0/forms/checks-radios/"><img src="/assets/img/2020/06/v5-checks.png" alt="New Bootstrap 5 checks"></a></p> <p>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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> - Default checkbox - <span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> - Default radio - <span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>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.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default checkbox +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default radio +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>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.</p> <h3 id="floating-labels">Floating labels</h3> <p><img src="/assets/img/2020/11/floating-forms.png" alt="New floating labels"></p> <p><a href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Floating labels</a> include support for textual inputs, selects, and textareas. We have one limitation with textareas where multiple lines of text can be obscured by the floating label. We’re working on fixes for this, so if you have ideas, please let us know!</p> @@ -355,32 +355,32 @@ <p>Given the love utility-driven frameworks have garnered the last few years, we’ve invested in adding more utilities to Bootstrap along with a new method of managing them across your projects.</p> <h3 id="new-utilities-api">New utilities API</h3> <p>We’ve implemented a brand <a href="https://getbootstrap.com/docs/5.0/utilities/api/">new utility API</a> into Bootstrap 5 as the primary way to extend Bootstrap’s default utility classes. Easily generate and customize utilities with support for custom class names, support for generating state-based classes like <code>:hover</code>, print versions, and more.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> - <span class="p">(</span> - <span class="c1">// ...</span> - <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> - <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> - <span class="p">)</span><span class="o">,</span> - <span class="c1">// ...</span> - <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">property</span><span class="o">:</span> <span class="n">o</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> - <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="p">(</span> - <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> - <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> - <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> - <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> - <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> - <span class="p">)</span> - <span class="p">)</span> - <span class="c1">// ...</span> - <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> -</code></pre></div><p>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 <code>$enable-*</code> 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.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">o</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> +</span></span></code></pre></div><p>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 <code>$enable-*</code> 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.</p> <p>Head to the <a href="https://getbootstrap.com/docs/5.0/utilities/api/">new Utilities API docs</a> to learn more.</p> <h3 id="new-utilities">New utilities</h3> <p>Speaking of utilities, we’ve added a ton of new ones to our arsenal, including:</p> @@ -475,8 +475,8 @@ <p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F27">list of issues and pull requests in v5.0.0</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/27">v5.0.0 project board</a>, too.</p> <h2 id="get-the-release">Get the release</h2> <p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> We’ve also published this update as our new latest release on npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0">Review the GitHub v5.0.0 release changelog</a> for a complete list of changes since our last pre-release.</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 +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0">Review the GitHub v5.0.0 release changelog</a> for a complete list of changes since our last pre-release.</p> <h2 id="whats-next">What’s next</h2> <p>Looking ahead, we have some other releases on the horizon:</p> <ul> @@ -498,7 +498,7 @@ </ul> <p>And more features and updates are planned for a few more releases after that! Check out our <a href="https://github.com/twbs/bootstrap/projects">projects on GitHub</a> for a closer look.</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -542,8 +542,8 @@ <p><a href="https://github.com/twbs/icons/releases/tag/v1.4.1">Check out the release notes</a> for more changes in v1.4.1.</p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.4.1">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.4.1/bootstrap-icons-1.4.1.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.4.1">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.4.1/bootstrap-icons-1.4.1.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/YjjMzXhECL1MIb6Qlm7VJO/Bootstrap-Icons-v1.4.1">icons from Figma</a>.</p> @@ -614,8 +614,8 @@ <p>A huge thanks to another new team member, <a href="https://github.com/rohit2sharma95">@rohit2sharma95</a>, for the dozens of pull requests, bug fixes, and code reviews for our JavaScript plugins.</p> <h2 id="get-the-release">Get the release</h2> <p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</code></pre></div><h2 id="whats-next">What’s next</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@next +</span></span></code></pre></div><h2 id="whats-next">What’s next</h2> <p>Looking ahead, we’re eyeing our first stable release for Bootstrap 5! But we also have some other releases on the horizon:</p> <ul> <li><a href="https://github.com/twbs/bootstrap/projects/27">Bootstrap v5.0.0</a></li> @@ -625,7 +625,7 @@ </ul> <p>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 <a href="https://github.com/twbs/bootstrap/projects/31">v5.1 project</a> for an idea of what’s being planned. Feel free to open issues or pull requests if you have any additional ideas!</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -670,8 +670,8 @@ <p>We still have some work to do on our docs and search, so stay tuned as we’ll eventually add category pages and more for easier browsing and navigating. If you’re reading this and want to help improve the Bootstrap Icons docs, please consider opening a PR anytime.</p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.4.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.4.0/bootstrap-icons-1.4.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.4.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.4.0/bootstrap-icons-1.4.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/tZZVOiEgKcRUHE3s6o5djB/Bootstrap-Icons-v1.4.0?node-id=0%3A1">icons from Figma</a>.</p> diff --git a/page/4/index.html b/page/4/index.html index 73bd2619..91596a89 100644 --- a/page/4/index.html +++ b/page/4/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -258,8 +258,8 @@ <p>For a more complete list of changes, check out the <a href="https://github.com/twbs/bootstrap/projects/33">v5 Beta 2 project board</a> or <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F33">list of issues and PRs</a> in this <a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta2">release</a>.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</code></pre></div><h2 id="whats-next">What’s next</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@next +</span></span></code></pre></div><h2 id="whats-next">What’s next</h2> <p>We have three releases coming up next for the team:</p> <ul> <li>Bootstrap v5.0.0-beta3 (possibly promoted to v5 stable)</li> @@ -268,7 +268,7 @@ </ul> <p>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 <a href="https://github.com/twbs/bootstrap/projects/31">v5.1 project</a> for an idea of what’s being planned.</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -425,7 +425,7 @@ <p>Our second beta of v5 is coming. We’re working on ironing on some kinks from the update to Popover 2, which has taken longer than expected. This affects our dropdowns, popovers, and tooltips. Once some of the major issues are resolved, we’ll ship our next beta.</p> <p>Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -488,22 +488,22 @@ <ol> <li> <p>Include the Bootstrap Icons font stylesheet in the <code><head></code> of your website. Or, use <code>@import</code> to include the stylesheet that way.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Option 1: Include in HTML --></span> -<span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="p">></span> -</code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="c">/* Option 2: Import via CSS */</span> -<span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="o">)</span><span class="p">;</span> -</code></pre></div></li> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Option 1: Include in HTML --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="p">></span> +</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* Option 2: Import via CSS */</span> +</span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"</span><span class="o">)</span><span class="p">;</span> +</span></span></code></pre></div></li> <li> <p>Add HTML snippets to include Bootstrap Icons where desired.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-alarm"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span> -</code></pre></div></li> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi-alarm"</span><span class="p">></</span><span class="nt">i</span><span class="p">></span> +</span></span></code></pre></div></li> </ol> <p>Want to see it in action? We’ve put together a helpful <a href="https://codepen.io/emdeoh/pen/NWRzbKM">CodePen demo for using Bootstrap Icons fonts via CDN</a>.</p> <p><em><strong>ProTip:</strong> Most browsers do not allow SVG sprites to be used across domains, which is why having icon fonts (when SVGs are the preferrable and more accessible method of delivering icons) are so useful. Whenever possible, please use SVGs over icon fonts.</em></p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.3.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.3.0/bootstrap-icons-1.3.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.3.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.3.0/bootstrap-icons-1.3.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/UuL6jIPhUePmOVttDaQN8h/Bootstrap-Icons-v1.3.0?node-id=0%3A1">icons from Figma</a>.</p> @@ -558,8 +558,8 @@ <p>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 <a href="https://github.com/twbs/icons/pull/561">new aliases</a> for icon filtering on homepage.</p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.2">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.2/bootstrap-icons-1.2.2.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.2">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.2/bootstrap-icons-1.2.2.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/0fjzjlmwMsHJ0Mgj51j444/Bootstrap-Icons-v1.2.2?node-id=0%3A1">icons from Figma</a>.</p> @@ -590,8 +590,8 @@ <p>Just a quick release to fix a typo in our <code>package.json</code> for including the font files in our published package.</p> <p>Get it via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.1">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.1/bootstrap-icons-1.2.1.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.1">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.1/bootstrap-icons-1.2.1.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> </div> </div> diff --git a/page/5/index.html b/page/5/index.html index 73edb331..bc7f4ae9 100644 --- a/page/5/index.html +++ b/page/5/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -207,8 +207,8 @@ <p>The new permalink sidebar also features new and improved access to the icons. Need just an SVG or two? Use the new <code>Download SVG</code> 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.</p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.0/bootstrap-icons-1.2.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.2.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.2.0/bootstrap-icons-1.2.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/JeBqM2fRcfIe7wMDgNZG6d/Bootstrap-Icons-v1.2.0?node-id=0%3A1">icons from Figma</a>.</p> @@ -279,17 +279,17 @@ <h2 id="namespaced-data-attributes">Namespaced data attributes</h2> <p>We’ve renamed all our <code>data</code> attributes to include <code>bs</code> as an infix, thereby namespacing all the HTML attributes that enable JavaScript behaviors from our plugins. <a href="https://github.com/twbs/bootstrap/pull/31827">See #31827</a> for details. It helps keep Bootstrap-required JavaScript triggers clearly identified throughout your projects.</p> <p>Making this change is a tad annoying, but easy enough to remedy with a find and replace. The new attributes work just like the old ones, just a little more specific. For example, here’s a dropdown button and menu with the newly renamed <code>data-bs-toggle</code> attribute.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span> - <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span> - Dropdown button - <span class="p"></</span><span class="nt">button</span><span class="p">></span> - <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span><span class="p">></span> - <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> - <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> - <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> - <span class="p"></</span><span class="nt">ul</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h2 id="new-toast-positioning">New toast positioning</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Dropdown button +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h2 id="new-toast-positioning">New toast positioning</h2> <p><img src="/assets/img/2020/12/toast-position-docs.png" alt="Popper.js"></p> <p>After dabbling in some JavaScript solutions to <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">positioning toasts</a>, we’ve landed on a new CSS-only approach thanks to our <a href="https://getbootstrap.com/docs/5.0/utilities/position/">new positioning utilities</a>. This comes with some minor breaking changes—namely some changes to exact CSS properties and how we toggle visibility of the toasts—but largely keeps them intact.</p> <p>Our docs have been updated to include a <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">new position preview picker</a>, too, so you can see them in action. <a href="https://github.com/twbs/bootstrap/pull/32280/">See the pull request for more details.</a></p> @@ -306,27 +306,27 @@ <p>One of the biggest new features of Bootstrap 5 is our utilities API, an extensible way to customize, add, or remove Bootstrap utilities. We’ve been iterating along the way and our newest improvement is the ability to add pseudo-class variants with the <code>state</code> option.</p> <p>Use the <code>state</code> option to generate pseudo-class variations. Example pseudo-classes are <code>:hover</code> and <code>:focus</code>. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add <code>state: hover</code> and you’ll get <code>.opacity-hover:hover</code> in your compiled CSS.</p> <p>Need multiple pseudo-classes? Use a space-separated list: <code>state: hover focus</code>.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span> - <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> - <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="p">(</span> - <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> - <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> - <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> - <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> - <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> - <span class="p">)</span> - <span class="p">)</span> -<span class="p">);</span> -</code></pre></div><p>Which outputs to:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">opacity-0-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span> -<span class="p">.</span><span class="nc">opacity-25-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span> -<span class="p">.</span><span class="nc">opacity-50-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span> -<span class="p">.</span><span class="nc">opacity-75-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span> -<span class="p">.</span><span class="nc">opacity-100-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span> -</code></pre></div><p><a href="https://github.com/twbs/bootstrap/pull/31643">See #31643</a> for more context on the change.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"><span class="p">);</span> +</span></span></code></pre></div><p>Which outputs to:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-0-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-25-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-50-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-75-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-100-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span> +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/pull/31643">See #31643</a> for more context on the change.</p> <h2 id="and-more">And more…</h2> <p>Elsewhere we’ve made a handful of other breaking changes and improvements. The most notable updates include:</p> <ul> @@ -352,9 +352,9 @@ <p>For a more complete list of of changes, checkout the <a href="https://github.com/twbs/bootstrap/projects/26">v5 Beta project board</a> or <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F26+">list of issues and PRs</a> in this <a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta1">release</a>.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</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>' GitHub profiles to help support the maintainers contributing to Bootstrap.</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@next +</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>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> </div><div class="post"> <h1 class="post-title fw-500"> @@ -489,9 +489,9 @@ <p>For a more up to date list of changes, be sure to follow along with the <a href="https://github.com/twbs/bootstrap/projects/26">v5 Beta project board</a>.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://v5.getbootstrap.com">https://v5.getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</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>' GitHub profiles to help support the maintainers contributing to Bootstrap.</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@next +</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>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> </div><div class="post"> <h1 class="post-title fw-500"> @@ -537,8 +537,8 @@ </ul> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.1.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip">download just the SVGs</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.1.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip">download just the SVGs</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/6jIgJymnRpMjGSMG2BKNRe/Bootstrap-Icons-v1.1.0?node-id=0%3A1">icons from Figma</a>.</p> @@ -612,7 +612,7 @@ <h2 id="next-up">Next up</h2> <p>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.</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> +<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> </div> </div> diff --git a/page/6/index.html b/page/6/index.html index 413cec8e..531ffae2 100644 --- a/page/6/index.html +++ b/page/6/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -239,9 +239,9 @@ <p>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 <a href="https://github.com/twbs/release#upcoming-release-schedule">release schedule in our release repo</a>. We’ll also keep updating that repo’s readme as we go.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://v5.getbootstrap.com">https://v5.getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</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>' GitHub profiles to help support the maintainers contributing to Bootstrap.</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@next +</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>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> </div><div class="post"> <h1 class="post-title fw-500"> @@ -281,8 +281,8 @@ <p>Use them as embedded SVGs, as external assets with <code><img></code> tags, as an SVG sprite, or even embedded in your CSS. <a href="https://icons.getbootstrap.com">Head to the docs to learn more.</a></p> <h2 id="install">Install</h2> <p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons -</code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.0.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.0.0/bootstrap-icons-1.0.0.zip">download just the SVGs</a> (without the rest of the repository files).</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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.0.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.0.0/bootstrap-icons-1.0.0.zip">download just the SVGs</a> (without the rest of the repository files).</p> <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/9YmlUAwhMv99G4yP4yN7Jy/Bootstrap-Icons-v1.0.0?node-id=0%3A1">icons from Figma</a>.</p> <h2 id="up-next">Up next</h2> @@ -371,7 +371,7 @@ <li>#30922: Fix color on disabled checked state for custom controls</li> <li>#30932: Restore <code>word-break: break-word;</code> on <code>.text-break</code> utility.</li> <li>#30940: Prevent <code>.row</code> from shrinking in flex containers</li> -<li>#30957: Nullify custom form states' <code>box-shadow</code></li> +<li>#30957: Nullify custom form states’ <code>box-shadow</code></li> <li>#30959: Toasts in IE11</li> <li>#30960: Fix IE11 validation tooltip alignment in input groups</li> <li>#30965: Improve floating labels example in IE</li> @@ -414,7 +414,7 @@ <p>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.</p> <p>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!</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -452,16 +452,16 @@ <h2 id="new-svg-sprite">New SVG sprite</h2> <p>In addition to hundreds of new icons, we’ve added a new <code>bootstrap-icons.svg</code> sprite. For those new to SVG sprites, it allows you to load a single asset and reference fragments of it across your project without inserting the entire HTML for the SVG.</p> <p>Here’s a quick look at how it works once imported:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#heart-fill"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span> -<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#toggles"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span> -<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> - <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#shop"</span><span class="p">/></span> -<span class="p"></</span><span class="nt">svg</span><span class="p">></span> -</code></pre></div><p>We hope to include some optimizations around this in the future as it’s our first endeavor into an SVG sprite system. Feedback and ideas are always welcome in our issues!</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#heart-fill"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#toggles"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi"</span> <span class="na">width</span><span class="o">=</span><span class="s">"32"</span> <span class="na">height</span><span class="o">=</span><span class="s">"32"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"bootstrap-icons.svg#shop"</span><span class="p">/></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">svg</span><span class="p">></span> +</span></span></code></pre></div><p>We hope to include some optimizations around this in the future as it’s our first endeavor into an SVG sprite system. Feedback and ideas are always welcome in our issues!</p> <h2 id="coming-in-v1-stable">Coming in v1 stable</h2> <p>The single biggest feature coming in v1’s stable release will be <a href="https://github.com/twbs/icons/pull/287">icon web fonts</a>. There’s a PR underway that requires further SVG path cleanup, as well as some tooling improvements. Overall it feels pretty promising!</p> <p>While icon fonts are great for a handful of implementation reasons, please be aware that they are not inherently the most accessible option for your visitors. SVGs provide more control and styling options, and allow you to be accessible from the start with <code>aria</code> roles and <code><title></code>s.</p> diff --git a/page/7/index.html b/page/7/index.html index 00ae7565..0404777d 100644 --- a/page/7/index.html +++ b/page/7/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -195,7 +195,7 @@ <h2 id="new-look-and-feel">New look and feel</h2> <p>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.</p> <p><a href="https://v5.getbootstrap.com"><img src="/assets/img/2020/06/v5-home.png" alt="New Bootstrap docs layout"></a></p> -<p>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.</p> +<p>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.</p> <p><img src="/assets/img/2020/06/v5-new-logo.png" alt="New Bootstrap logo"></p> <p>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.</p> <h2 id="jquery-and-javascript">jQuery and JavaScript</h2> @@ -207,19 +207,19 @@ <h2 id="css-custom-properties">CSS custom properties</h2> <p>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.</p> <p>Take for example our <code>.table</code> component, where we’ve added a handful of local variables to make striped, hoverable, and active table styles easier:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nc">.table</span> <span class="p">{</span> - <span class="na">--bs-table-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-bg</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-accent-bg</span><span class="o">:</span> <span class="ni">transparent</span><span class="p">;</span> - <span class="na">--bs-table-striped-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-striped-color</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-striped-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-striped-bg</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-active-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-active-color</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-active-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-active-bg</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-hover-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-hover-color</span><span class="si">}</span><span class="p">;</span> - <span class="na">--bs-table-hover-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-hover-bg</span><span class="si">}</span><span class="p">;</span> - - <span class="c1">// Styles here... -</span><span class="c1"></span><span class="p">}</span> -</code></pre></div><p>We’re working to utilize the superpowers of both Sass and CSS custom properties for a more flexible system. You can <a href="https://v5.getbootstrap.com/docs/5.0/content/tables/#how-do-the-variants-and-accented-tables-work">read more about this in the Tables docs page</a> and expect to see more usage in components like buttons in the near future.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nc">.table</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-bg</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-accent-bg</span><span class="o">:</span> <span class="ni">transparent</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-striped-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-striped-color</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-striped-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-striped-bg</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-active-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-active-color</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-active-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-active-bg</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-hover-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-hover-color</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> <span class="na">--bs-table-hover-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$table-hover-bg</span><span class="si">}</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"> <span class="c1">// Styles here... +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> +</span></span></code></pre></div><p>We’re working to utilize the superpowers of both Sass and CSS custom properties for a more flexible system. You can <a href="https://v5.getbootstrap.com/docs/5.0/content/tables/#how-do-the-variants-and-accented-tables-work">read more about this in the Tables docs page</a> and expect to see more usage in components like buttons in the near future.</p> <h2 id="improved-customizing-docs">Improved customizing docs</h2> <p>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 <a href="https://v5.getbootstrap.com/docs/5.0/customize/overview/">new Customize section</a>.</p> <p><img src="/assets/img/2020/06/v5-customize.png" alt="Bootstrap 5 customize docs"></p> @@ -232,53 +232,53 @@ <p>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.</p> <p><img src="/assets/img/2020/06/v5-checks.png" alt="New Bootstrap 5 checks"></p> <p>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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> - Default checkbox - <span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> - Default radio - <span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> - <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> - <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><p>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.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default checkbox +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default radio +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>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.</p> <p>Be sure to <a href="https://v5.getbootstrap.com/docs/5.0/forms/overview/">explore the new forms docs</a> and let us know what you think.</p> <h2 id="utilities-api">Utilities API</h2> <p>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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> -<span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> - <span class="p">(</span> - <span class="c1">// ...</span> - <span class="s2">"width"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">property</span><span class="o">:</span> <span class="ni">width</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="n">w</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="p">(</span> - <span class="na">25</span><span class="o">:</span> <span class="mi">25</span><span class="kt">%</span><span class="o">,</span> - <span class="na">50</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> - <span class="na">75</span><span class="o">:</span> <span class="mi">75</span><span class="kt">%</span><span class="o">,</span> - <span class="na">100</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> - <span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span> - <span class="p">)</span> - <span class="p">)</span><span class="o">,</span> - <span class="c1">// ...</span> - <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> - <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> - <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> - <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> - <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> - <span class="p">)</span><span class="o">,</span> - <span class="c1">// ...</span> - <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> -</code></pre></div><p>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 <code>$enable-*</code> 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 <a href="https://github.com/martijncuppens">@MartijnCuppens</a>, who also maintains <a href="https://github.com/twbs/rfs">the RFS project</a>, and is responsible for the initial PR and subsequent improvements.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"width"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="ni">width</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="n">w</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mi">25</span><span class="kt">%</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mi">75</span><span class="kt">%</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> +</span></span></code></pre></div><p>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 <code>$enable-*</code> 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 <a href="https://github.com/martijncuppens">@MartijnCuppens</a>, who also maintains <a href="https://github.com/twbs/rfs">the RFS project</a>, and is responsible for the initial PR and subsequent improvements.</p> <p>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.</p> <p><strong>Heads up!</strong> 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 <code>property-value</code> pairing for our utilities. Just our way of reorganizing things for easier naming and improved documentation.</p> <h2 id="enhanced-grid-system">Enhanced grid system</h2> @@ -292,12 +292,12 @@ <li>Columns are no longer <code>position: relative</code> by default.</li> </ul> <p>Here’s a quick example of how to use the new grid gutter classes:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"row g-5"</span><span class="o">></span> - <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> - <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> - <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> -<span class="o"></</span><span class="nt">div</span><span class="o">></span> -</code></pre></div><p>Take a look at the <a href="https://v5.getbootstrap.com/docs/5.0/layout/">redesigned and restructured Layout docs to learn more</a>.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"row g-5"</span><span class="o">></span> +</span></span><span class="line"><span class="cl"> <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> +</span></span><span class="line"><span class="cl"> <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> +</span></span><span class="line"><span class="cl"> <span class="o"><</span><span class="nt">div</span> <span class="nt">class</span><span class="o">=</span><span class="s2">"col"</span><span class="o">></span><span class="nc">...</span><span class="o"></</span><span class="nt">div</span><span class="o">></span> +</span></span><span class="line"><span class="cl"><span class="o"></</span><span class="nt">div</span><span class="o">></span> +</span></span></code></pre></div><p>Take a look at the <a href="https://v5.getbootstrap.com/docs/5.0/layout/">redesigned and restructured Layout docs to learn more</a>.</p> <p><em>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.</em></p> <h2 id="docs">Docs</h2> <p>We switched our documentation static site generator from <a href="https://jekyllrb.com/">Jekyll</a> to <a href="https://gohugo.io/">Hugo</a>. 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.</p> @@ -325,12 +325,12 @@ <p>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.</p> <h2 id="get-started">Get started</h2> <p><strong>Head to <a href="https://v5.getbootstrap.com">https://v5.getbootstrap.com</a> to explore the new release.</strong> 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.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@next -</code></pre></div><h2 id="whats-next">What’s next</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@next +</span></span></code></pre></div><h2 id="whats-next">What’s next</h2> <p>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.</p> <p>Beyond that, keep an eye for more updates to the <a href="https://icons.getbootstrap.com">Bootstrap Icons</a> project, our <a href="https://github.com/twbs/rfs">RFS project</a> (now enabled by default in v5), and the <a href="https://github.com/twbs/bootstrap-npm-starter">npm starter project</a>.</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -412,7 +412,7 @@ <p>We’ve shipped a lot more in this release, so be sure to check out the <a href="https://github.com/twbs/bootstrap/releases/tag/v4.5.0">v4.5.0 GitHub release</a> and the <a href="https://github.com/twbs/bootstrap/projects/20">v4.5.0 project for closed issues and merged pull requests</a> for more details.</p> <p><a href="https://getbootstrap.com/docs/4.5/">Head to the v4.5.0 docs</a> to see the latest in action. The full release has been published to npm and will soon appear on the BootstrapCDN and Rubygems.</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> @@ -519,7 +519,7 @@ </ul> </li> </ul> -<h2 id="get-em">Get ‘em</h2> +<h2 id="get-em">Get ’em</h2> <p>Alpha 2 has been published to GitHub and npm (package name <code>bootstrap-icons</code>). Get your hands on it <a href="https://github.com/twbs/icons/releases">from GitHub</a>, by updating to <code>v1.0.0-alpha2</code>, or by snagging the <a href="https://www.figma.com/file/0xfDVFogWu6g15bVOvBzxS/Bootstrap-Icons-v1.0.0-alpha2">icons from Figma</a>.</p> </div> diff --git a/page/8/index.html b/page/8/index.html index fe5bcf4e..939cb454 100644 --- a/page/8/index.html +++ b/page/8/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> @@ -240,7 +240,7 @@ <p>We’ve shipped a lot more in this release, so be sure to check out the <a href="https://github.com/twbs/bootstrap/issues?q=project%3Atwbs%2Fbootstrap%2F18+is%3Aclosed+sort%3Aupdated-desc">v4.4.0 ship list of closed issues and merged pull requests</a> for more details.</p> <p><a href="https://getbootstrap.com/docs/4.4/">Head to to the v4.4.0 docs</a> to see the latest in action. The full release has been published to npm and will soon appear on the BootstrapCDN and Rubygems.</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> +<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> </div><div class="post"> <h1 class="post-title fw-500"> diff --git a/page/9/index.html b/page/9/index.html index 0bdecd59..7b67cacf 100644 --- a/page/9/index.html +++ b/page/9/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/"> <meta name="description" content="Official blog for the Bootstrap framework."> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> diff --git a/videos/index.html b/videos/index.html index 678fd68b..ec57de52 100644 --- a/videos/index.html +++ b/videos/index.html @@ -7,7 +7,7 @@ <link rel="canonical" href="https://blog.getbootstrap.com/videos/"> <meta name="description" content="Every music video from Bootstrap Blog posts"> -<meta name="generator" content="Hugo 0.92.2"> +<meta name="generator" content="Hugo 0.93.0"> |