CINXE.COM

<!doctype html> <html lang="en" itemscope itemtype="http://schema.org/WebPage"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://github.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com" crossorigin> <link rel="preload" href="/assets/brand/bootstrap-logo-shadow.png" imagesrcset="/assets/brand/bootstrap-logo-shadow.png, /assets/brand/bootstrap-logo-shadow@2x.png 2x" as="image"> <link rel="profile" href="https://gmpg.org/xfn/11"> <link rel="canonical" href="https://blog.getbootstrap.com/"> <link rel="alternate" type="application/rss+xml" href="https://blog.getbootstrap.com/feed.xml" title="Bootstrap Blog"> <title>Bootstrap Blog 路 Official blog for the Bootstrap framework.</title> <meta name="description" content="Official blog for the Bootstrap framework."> <meta name="generator" content="Hugo 0.145.0"> <script src="/assets/js/color-modes.8e30836578cc8ee335064e604b46aa69a95b5ce97b8442d9e6e775ff907e93d2.js"></script> <link href="/assets/css/style.5d54ec71a51cf7c4fa036990460c02969fb4296a4e770caa7e84ac15d1c20da5.css" rel="stylesheet"> <link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> <link rel="icon" href="/assets/img/favicons/favicon.ico"> <meta name="theme-color" content="#712cf9"> <meta name="author" content="Mark Otto"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://blog.getbootstrap.com/assets/img/bootstrap-social.png"> <meta name="twitter:title" content="Bootstrap Blog"> <meta name="twitter:description" content="Official blog for the Bootstrap framework."> <meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap"> <meta property="og:url" content="https://blog.getbootstrap.com/"> <meta property="og:site_name" content="Bootstrap Blog"> <meta property="og:title" content="Bootstrap Blog"> <meta property="og:description" content="Official blog for the Bootstrap framework."> <meta property="og:locale" content="en"> <meta property="og:type" content="website"> <meta property="og:image" content="https://blog.getbootstrap.com/assets/img/bootstrap-social.png"> <meta property="og:image:width" content="2000"> <meta property="og:image:height" content="1000"> <meta itemprop="name" content="Bootstrap Blog"> <meta itemprop="description" content="Official blog for the Bootstrap framework."> <meta itemprop="datePublished" content="2025-04-03T15:22:00+00:00"> <meta itemprop="dateModified" content="2025-04-03T15:22:00+00:00"> <meta itemprop="image" content="https://blog.getbootstrap.com/assets/img/bootstrap-social.png"> <script defer src="/assets/js/vendor/bootstrap.bundle.min.0833b2e9c3a26c258476c46266e6877fc75218625162e0460be9a3a098a61c6c.js"></script> <script defer src="/assets/js/application.b35df46ead632ab0117b1f91c11d28454e3af0e53501012f0bffd7c29d6247e5.js"></script> <script defer src="/assets/js/lazyload.d2609a030d6844e94fcf358cc3799c828921b33388b3d5ff9ad86c6e7aef20a2.js"></script> <script async src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="archive" viewBox="0 0 16 16"> <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5zm13-3H1v2h14zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/> </symbol> <symbol id="arrow-right-short" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/> </symbol> <symbol id="check2" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/> </symbol> <symbol id="circle-half" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/> </symbol> <symbol id="clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/> </symbol> <symbol id="file-earmark-richtext" viewBox="0 0 16 16"> <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/> <path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5m0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5m1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208M6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5"/> </symbol> <symbol id="film" viewBox="0 0 16 16"> <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm4 0v6h8V1zm8 8H4v6h8zM1 1v2h2V1zm2 3H1v2h2zM1 7v2h2V7zm2 3H1v2h2zm-2 3v2h2v-2zM15 1h-2v2h2zm-2 3v2h2V4zm2 3h-2v2h2zm-2 3v2h2v-2zm2 3h-2v2h2z"/> </symbol> <symbol id="moon-stars-fill" viewBox="0 0 16 16"> <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/> <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/> </symbol> <symbol id="rss" viewBox="0 0 16 16"> <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/> <path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1"/> </symbol> <symbol id="sun-fill" viewBox="0 0 16 16"> <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/> </symbol> <symbol id="three-dots" viewBox="0 0 16 16"> <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/> </symbol> </svg> <header class="navbar navbar-expand-lg bd-navbar sticky-top"> <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation"> <div class="d-lg-none" style="width: 2rem;"></div> <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94"> <title>Bootstrap</title> <path fill="currentColor" fill-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 0 1-2-2V24a2 2 0 0 1 2-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863M60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207M49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281s-3.903-8.178-11.425-8.178H49.948z" clip-rule="evenodd"/> </svg> </a> <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation"> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg> </button> <div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel"> <div class="offcanvas-header px-4 pb-0"> <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button> </div> <div class="offcanvas-body p-4 pt-0 p-lg-0"> <hr class="d-lg-none text-white-50"> <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav"> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://getbootstrap.com/docs/5.3/getting-started/introduction/" target="_blank" rel="noopener">Docs</a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://getbootstrap.com/docs/5.3/examples/" target="_blank" rel="noopener">Examples</a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" target="_blank" rel="noopener">Icons</a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" target="_blank" rel="noopener">Themes</a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2 active" href="/">Blog</a> </li> </ul> <hr class="d-lg-none text-white-50"> <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="navbar-nav-svg" viewBox="0 0 16 16"> <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/> </svg> GitHub </a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="X (formerly Twitter)"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="navbar-nav-svg" viewBox="0 0 16 16"> <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/> </svg> X (formerly Twitter) </a> </li> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener" aria-label="Open Collective"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="navbar-nav-svg" viewBox="0 0 16 16"> <path fill-opacity=".4" d="M12.995 8.195c0 .937-.312 1.912-.78 2.693l1.99 1.99c.976-1.327 1.6-2.966 1.6-4.683 0-1.795-.624-3.434-1.561-4.76l-2.068 2.028c.468.781.78 1.679.78 2.732z"/> <path d="M8 13.151a4.995 4.995 0 1 1 0-9.99c1.015 0 1.951.273 2.732.82l1.95-2.03a7.805 7.805 0 1 0 .04 12.449l-1.951-2.03a5.07 5.07 0 0 1-2.732.781z"/> </svg> Open Collective </a> </li> <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto"> <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div> <hr class="d-lg-none my-2 text-white-50"> </li> <li class="nav-item dropdown"> <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)"> <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg> Toggle theme </button> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text"> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> <svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg> Light <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> <svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg> Dark <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> <svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg> Auto <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> </button> </li> </ul> </li> </ul> </div> </div> </nav> </header> <div class="container-xxl px-4 px-xxl-2"> <div class="d-lg-grid content" id="content"> <div class="sidebar"> <div class="masthead py-5"> <div class="mb-4 text-center text-lg-start"> <a class="flex-shrink-0 mb-lg-3 link-dark text-decoration-none" href="/" aria-label="Bootstrap"> <img class="bd-booticon d-block mx-auto mb-3 mx-lg-0" srcset="/assets/brand/bootstrap-logo-shadow.png, /assets/brand/bootstrap-logo-shadow@2x.png 2x" src="/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" width="200" height="165"> </a> <div class="ms-3 ms-lg-0"> <h1 class="mb-1 mb-lg-2 f1 fw-600">The Bootstrap Blog</h1> News and announcements for all things <a href="https://getbootstrap.com/" title="Visit the Bootstrap docs">Bootstrap</a>, including new releases, <a href="https://themes.getbootstrap.com/" title="Browse the official Bootstrap themes">Bootstrap Themes</a>, and <a href="https://icons.getbootstrap.com/" title="Official open source Bootstrap Icons">Bootstrap Icons</a>. </div> </div> <nav class="nav nav-pills justify-content-center flex-lg-column justify-content-lg-start gap-1 sidebar-nav"> <a class="nav-link d-flex align-items-center active fw-semibold" href="/"> <svg class="bi me-2 f5 bd-text-purple"><use xlink:href="#file-earmark-richtext"></use></svg> All posts </a> <a class="nav-link d-flex align-items-center" href="/archive/"> <svg class="bi me-2 f5 text-primary"><use xlink:href="#archive"></use></svg> Archive </a> <a class="nav-link d-flex align-items-center" href="/videos/"> <svg class="bi me-2 f5 text-info"><use xlink:href="#film"></use></svg> Videos </a> <a class="nav-link d-flex align-items-center" href="https://blog.getbootstrap.com/feed.xml"> <svg class="bi me-2 f5 text-warning"><use xlink:href="#rss"></use></svg> Subscribe </a> </nav> <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJJ&placement=bloggetbootstrapcom" id="_carbonads_js"></script> </div> </div> <main class="main"> <div class="posts-container mx-auto my-5"> <div class="posts"> <div class="post"> <h1 class="post-title fw-semibold"> <a href="/2025/04/03/bootstrap-5-3-4/" class="text-decoration-none">Bootstrap 5.3.4</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" alt="" width="32" height="32"> @mdo </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> April 03, 2025 </div> Bootstrap v5.3.4 is here with several bug fixes and a load of documentation updates. Here are a handful of highlights from the CSS and JS changes: <ul> <li>Fixed modal and offcanvas headers collapsing when any padding variables were set to <code>0</code>.</li> <li>Fixed close button display in color modes.</li> <li>Fixed light mode carousel when in dark mode.</li> <li>Updated floating labels for better <code><select></code> alignment and other styling issues.</li> <li>Fixed a Sass 1.77.7 deprecation for nested rules</li> <li>Fixed popover toggling twice to close.</li> </ul> <a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.4">Read the GitHub v5.3.4 changelog</a> for a full list of changes (including a ton of documentation and dependency updates) in this release. <h2 id="get-the-release">Get the release</h2> Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest. It’s also been pushed to npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@v5.3.4 </code></pre></div><h2 id="support-the-team">Support the team</h2> 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. </div><div class="post"> <h1 class="post-title fw-semibold"> <a href="/2024/02/20/bootstrap-5-3-3/" class="text-decoration-none">Bootstrap 5.3.3</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/julien-deramond" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/julien-deramond.png?size=32, https://github.com/julien-deramond.png?size=64 2x" src="https://github.com/julien-deramond.png?size=32" alt="" loading="lazy" width="32" height="32"> @julien-deramond </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> February 20, 2024 </div> Bootstrap v5.3.3 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights! <h2 id="highlights">Highlights</h2> <ul> <li>Fixed a breaking change introduced with color modes where it was required to manually import <code>variables-dark.scss</code> when building Bootstrap with Sass. Now, <code>_variables.scss</code> will automatically import <code>_variables-dark.scss</code>. If you were already importing <code>_variables-dark.scss</code> manually, you should keep doing it as it won’t break anything and will be the way to go in v6.</li> <li>Fixed a regression in the selector engine that wasn’t able to handle multiple IDs anymore.</li> </ul> <h2 id="color-modes">Color modes</h2> <ul> <li>Badges now use the <code>.text-bg-*</code> text utilities to be certain that the text is always readable (especially when the customized colors are different in light and dark modes).</li> <li>Fixed our <code>color-modes.js</code> script to handle the case where the OS is set to light mode and the auto color mode is used on the website. If you copied the script from our docs, you should apply <a href="https://github.com/twbs/bootstrap/commit/73e1dcf43eff8371dde52ce41bd1d9fdc2b47d1f">this change</a> to your own script.</li> <li>Fixed color schemes description in the color modes documentation to show that <code>color-scheme()</code> only accept <code>light</code> and <code>dark</code> values as parameters.</li> </ul> <h2 id="miscellaneous">Miscellaneous</h2> <ul> <li>Allowed <code><dl></code>, <code><dt></code> and <code><dd></code> in the sanitizer.</li> <li>Dropped evenly items distribution for modal and offcanvas headers.</li> <li>Fixed the accordion CSS selectors to avoid inheritance issues when nesting accordions.</li> <li>Fixed the focus box-shadow for the validation stated form controls.</li> <li>Fixed the focus ring on focused checked buttons.</li> <li>Fixed the product example mobile navbar toggler.</li> <li>Changed the RTL processing of carousel control icons.</li> </ul> <h2 id="docs">Docs</h2> <ul> <li>Dropped unnecessary right margin for example code blocks.</li> <li>Fixed emphasis text utilities usage in <a href="https://getbootstrap.com/docs/5.3/utilities/background/#background-color">background utilities examples</a> section.</li> <li>Added an technical explanation on how to render an accordion expanded by default.</li> <li>Changed Vite config path import in Vite guide.</li> <li>Enhanced the card image description of the <code>.card-img-*</code> classes.</li> <li>Mentioned <code>shift-color()</code> function in the Sass customization page among <code>tint-color()</code> and <code>shade-color()</code>.</li> <li>Added missing <code>type="button"</code> attribute to the Cheatsheet examples navigation buttons.</li> <li>Updated the colors table in the customization page to be responsive.</li> </ul> <h2 id="get-the-release">Get the release</h2> Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest. It’s also been pushed to npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@v5.3.3 </code></pre></div><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.3">Read the GitHub v5.3.3 changelog</a> for a complete list of changes in this release. <h2 id="support-the-team">Support the team</h2> 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. </div><div class="post"> <h1 class="post-title fw-semibold"> <a href="/2023/09/14/bootstrap-5-3-2/" class="text-decoration-none">Bootstrap 5.3.2</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/julien-deramond" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/julien-deramond.png?size=32, https://github.com/julien-deramond.png?size=64 2x" src="https://github.com/julien-deramond.png?size=32" alt="" loading="lazy" width="32" height="32"> @julien-deramond </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> September 14, 2023 </div> Bootstrap v5.3.2 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights! <h2 id="highlights">Highlights</h2> <ul> <li>Passing a percentage unit to the global <code>abs()</code> is deprecated since Dart Sass v1.65.0. It resulted in a deprecation warning when compiling Bootstrap with Dart Sass. This has been fixed internally by changing the values passed to the <code>divide()</code> function. The <code>divide()</code> function has not been fixed itself so that we can keep supporting node-sass cross-compatibility. In v6, this won’t be an issue as we plan to drop support for node-sass.</li> <li>Using multiple ids in a collapse target wasn’t working anymore and has been fixed.</li> </ul> <h2 id="color-modes">Color modes</h2> <ul> <li>Increased color contrast of form range track background in light and dark modes.</li> <li>Fixed table state rendering for color modes with a focus on the striped table in dark mode to increase color contrast.</li> <li>Allow <code></code> color customization for color modes.</li> </ul> <h2 id="docs">Docs</h2> <ul> <li>Added alternative CDNs section in <a href="https://getbootstrap.com/docs/5.3/getting-started/download/#alternative-cdns">Getting started -> Download</a>.</li> <li>Added Discord and Bootstrap subreddit links in <a href="https://github.com/twbs/bootstrap/blob/main/README.md">README</a> and <a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/">Getting started -> Introduction</a>: <ul> <li><a href="https://discord.gg/bZUvakRU3M">Discord</a> maintained by the community</li> <li><a href="https://www.reddit.com/r/bootstrap/">Bootstrap subreddit</a></li> </ul> </li> </ul> <h2 id="get-the-release">Get the release</h2> Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest. It’s also been pushed to npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@v5.3.2 </code></pre></div><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.2">Read the GitHub v5.3.2 changelog</a> for a complete list of changes in this release. <h2 id="support-the-team">Support the team</h2> 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. </div><div class="post"> <h1 class="post-title fw-semibold"> <a href="/2023/09/12/bootstrap-icons-1-11-0/" class="text-decoration-none">Bootstrap Icons v1.11.0</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" alt="" loading="lazy" width="32" height="32"> @mdo </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> September 12, 2023 </div> <a href="https://icons.getbootstrap.com">Bootstrap Icons v1.11.0</a> has arrived with 100 new icons鈥攊ncluding new floppy disk icons, additional brand icons, new person icons, new emojis, some birthday cake, a few new science icons, and more. We’re now at over 2,000 icons! <h2 id="100-new-icons">100 new icons</h2> Here’s a quick look at all the new icons in v1.11.0: <img src="/assets/img/2023/09/icons-1-11-0.png" class="d-block img-fluid mb-2 rounded border" alt="New icons in v1.11.0" width="1920" height="648" loading="lazy"> <a href="https://github.com/twbs/icons/pull/1792">Check out the pull request</a> for all the details on which icons were added and which were updated. I’ve also started adding a new <code>added</code> tag to icon pages with this release. So far I’ve only tagged v1.10.0 and v1.11.0 versions, but more will come. Once those are all tagged, you’ll be able to search for icons added in each release. Stay tuned! 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. <h2 id="install">Install</h2> To get started, install or update via npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons </code></pre></div>Or Composer: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">composer require twbs/bootstrap-icons </code></pre></div>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.11.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.11.0/bootstrap-icons-1.11.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files). <h2 id="figma">Figma</h2> 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. </div><div class="post"> <h1 class="post-title fw-semibold"> <a href="/2023/07/26/bootstrap-5-3-1/" class="text-decoration-none">Bootstrap 5.3.1</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" alt="" loading="lazy" width="32" height="32"> @mdo </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> July 26, 2023 </div> <div class="ratio ratio-16x9"> <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/WJ1I3ZmEozQ?rel=0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="YouTube Video" width="760" height="570"> </iframe> </div> Bootstrap v5.3.1 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights! <ul> <li>Color modes: <ul> <li>Increased color contrast for dark mode by replacing <code>$gray-500</code> with <code>$gray-300</code> for the body color</li> <li>Added our color mode switcher JavaScript to our examples ZIP download</li> </ul> </li> <li>Components: <ul> <li>Improved disabled styling for all <code>.nav-link</code>s, providing <code>.disabled</code> and <code>:disabled</code> for use with anchors and buttons</li> <li>Add support for <code>Home</code> and <code>End</code> keys for navigating tabs by keyboard</li> <li>Added some basic styling to toggle buttons when no modifier class is present</li> <li>Fixed carousel colors in dark mode</li> </ul> </li> <li>Forms: <ul> <li>Fixed floating label disabled text color</li> </ul> </li> <li>Utilities: <ul> <li><code>.text-bg-*</code> utilities now use CSS variables</li> </ul> </li> <li>Sass: <ul> <li>Add new <code>$navbar-dark-icon-color</code> Sass variable</li> <li>Removed duplicate <code>$alert</code> Sass variables</li> <li>Added a new variable for <code>$vr-border-width</code> to customize the vertical rule helper width</li> </ul> </li> <li>Documentation: <ul> <li>Added search to our homepage</li> <li>Improved responsive behavior on Dashboard example</li> <li>Improved dark mode rendering of Cheatsheet examples</li> </ul> </li> </ul> <h2 id="get-the-release">Get the release</h2> Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest. It’s also been pushed to npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@v5.3.1 </code></pre></div><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.1">Read the GitHub v5.3.1 changelog</a> for a complete list of changes in this release. <h2 id="support-the-team">Support the team</h2> 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. </div><div class="post"> <h1 class="post-title fw-semibold"> <a href="/2023/05/30/bootstrap-5-3-0/" class="text-decoration-none">Bootstrap 5.3.0</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" alt="" loading="lazy" width="32" height="32"> @mdo </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> May 30, 2023 </div> <div class="ratio ratio-16x9"> <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/GC5E8ie2pdM?rel=0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="YouTube Video" width="760" height="570"> </iframe> </div> It’s official, the final stable release of v5.3.0 has landed! It’s been a monumental effort to revamp our codebase for CSS variables and color modes, one that will see continued changes leading up to an eventual Bootstrap 6. And we’re so excited to finally ship it! On top of all the work that’s gone into this release, a lot has happened behind the scenes since we shipped our pre-releases. Keep reading to learn everything that’s new in v5.3.0. <h2 id="whats-new">What’s new</h2> <ul> <li><a href="#dark-mode">Dark mode support</a></li> <li><a href="#custom-color-modes">Custom color modes support</a> for themes beyond light and dark</li> <li><a href="#refreshed-color-palette">Extended color palette</a> for theme colors that adapt to color modes</li> <li><a href="#new-link-helpers-and-utilities">New link helpers</a>, link utilities, and focus ring helpers</li> <li><a href="#new-nav-underline">New nav underline</a> variant</li> <li>Several new utilities, bug fixes, and <a href="#and-much-more">much more</a>!</li> </ul> Keep reading for the deep dive on all the top new features. <h2 id="dark-mode">Dark mode</h2> Bootstrap’s core has been rewritten to provide first-class support for dark mode. Moreover, Bootstrap now supports any number of color modes, allowing you to build your own custom themes or more nuanced color modes. Let’s take a look at how our new dark mode works first. <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/"><img src="/assets/img/2022/12/docs-color-modes.png" class="d-block img-fluid mb-2 rounded border" alt="New homepage" width="2880" height="1800" loading="lazy"> </a> Bootstrap’s new dark mode is opt-in by default, meaning you’ll need to set a <code>data-bs-theme</code> attribute on the root <code><html></code> element to change the entire page’s design. This was done to best support custom color modes beyond light and dark鈥攎ore on that later. It also helps folks who aren’t ready for dark mode in their own designs. <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><!doctype html> <html lang="en" data-bs-theme="dark">  </html> </code></pre></div>Need a more isolated dark mode? You can also set the color mode on a parent element like the <code>.dropdown</code> shown below. This will only affect the dropdown and its children instead of the entire page.  <div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0 d-flex justify-content-between"> <div class="dropdown" data-bs-theme="light"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false"> Default dropdown </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight"> <li><a class="dropdown-item active" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </div> <div class="dropdown" data-bs-theme="dark"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false"> Dark dropdown </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark"> <li><a class="dropdown-item active" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </div> </div><div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> html <div class="d-flex ms-auto"> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg> </button> </div> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><div class="dropdown" data-bs-theme="light"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false"> Default dropdown </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight"> <li><a class="dropdown-item active" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </div> <div class="dropdown" data-bs-theme="dark"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false"> Dark dropdown </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark"> <li><a class="dropdown-item active" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </div></code></pre></div> </div>  <h3 id="new-color-mode-mixin">New <code>color-mode()</code> mixin</h3> Dark mode styles are written with and generated through the new <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/#building-with-sass"><code>color-mode()</code> Sass mixin</a>. The mixin allows you to write styles specific to a particular color mode, like dark mode. <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">@include color-mode(dark) { .element { color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } } </code></pre></div>Together with the new <code>$color-mode-type</code> Sass variable, you can also change how color modes behave in Bootstrap. The default value is <code>data</code>, which tells Bootstrap to generate CSS selectors that scope the color mode’s styles to the <code>data</code> attributes you’ve seen above. The other supported value is <code>media-query</code>, which generates media query selectors instead. This is helpful for those who want light and dark modes, automatically, and without a user override. <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">$color-mode-type: media-query; @include color-mode(dark) { .element { color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } } </code></pre></div>Which outputs to: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css">@media (prefers-color-scheme: dark) { .element { color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } } </code></pre></div><a href="https://getbootstrap.com/docs/5.3/customize/color-modes/#building-with-sass">Read the new color mode docs</a> to learn more. <h3 id="toggling-color-modes">Toggling color modes</h3> While we haven’t written a new JavaScript plugin for toggling color modes, we’ve written a great script for <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript">toggling color modes via <code>data-bs-theme</code></a> in our docs. Our implementation defaults to a user’s operating system color mode (auto), but also allows users to override that with a particular mode (light or dark) that’s recorded in local storage for easy reference on future page loads. You can use and adapt this script as needed. <h3 id="new-color-mode-variables">New color mode variables</h3> There’s also a new <code>_variables-dark.scss</code> stylesheet that houses dark mode-specific Sass variables. This is where we modify mostly global values, and some component-specific values, for dark mode. We recommend creating separate Sass stylesheets for additional custom color modes (e.g., a blue theme might have <code>_variables-blue.scss</code>). We expect this stylesheet to be simplified in our next major release as we continue to streamline the code base.) Dark mode colors are all derived from our theme colors, meaning you can easily change the color mode palettes by updating the original theme colors. This means we’re not using our already tinted and shaded colors (e.g., <code>shade-color($danger, 60%)</code> instead of <code>red-800</code> for the new danger emphasis color). Bootstrap v5.3.0 ships with dark mode enabled, but you can also disable it by updating the boolean <code>$enable-dark-mode</code> Sass variable. <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/">Read more in the new color mode docs.</a> <h3 id="enabling-dark-mode">Enabling dark mode</h3> If you’re using the CDN or starter template, using the new color modes is straightforward. Add the <code>data-bs-theme</code> attribute with <code>light</code> or <code>dark</code> values to the <code><html></code> element and you’ll be using either the light or dark theme. <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><!doctype html> <html lang="en" data-bs-theme="dark"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> </body> </html> </code></pre></div><h2 id="custom-color-modes">Custom color modes</h2> When we set out to add dark mode support to Bootstrap, we didn’t want to just add a dark mode. We wanted to build the foundations for a color mode system that could be used to create any number of themes and color modes. That’s why we lead with the <code>data-bs-theme</code> attribute and the new <code>color-mode()</code> Sass mixin, and why we’ve added so many new CSS variables in these latest releases. To add a custom color mode, create your own <code>data-bs-theme</code> selector with a custom value as the name of your color mode, then modify any Sass and CSS variables as needed. We created a separate <code>_variables-dark.scss</code> stylesheet to house Bootstrap’s dark mode-specific Sass variables, but that’s not required for you. For example, you can create a “blue theme” with the selector <code>data-bs-theme="blue"</code>. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you’re using Sass, you can also use Sass’s functions within your CSS variable overrides. Heads up! Applying color modes to elements that aren’t the <code><html></code> or <code><body></code> elements requires classes like <code>.text-body</code> and <code>.bg-body</code>. This is because many HTML elements have no set <code>color</code> or <code>background</code> to style until you add them yourself. We’ve included them here for you just in case. <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss">[data-bs-theme="blue"] { // CSS variable overrides and styles } </code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><div data-bs-theme="blue"> ... </div> </code></pre></div><h2 id="refreshed-color-palette">Refreshed color palette</h2> We’ve revamped our color palette to include all new Sass variables, CSS variables, and utilities for setting <code>color</code>, <code>background-color</code>, and <code>border-color</code>. Our foreground and background colors have been expanded to include new secondary, tertiary, and emphasis colors, while our theme colors have been expanded on to include their subtle background colors, subtle border colors, and darker text colors. <a href="https://getbootstrap.com/docs/5.3/customize/color/#colors">Check out the new colors docs.</a> We鈥檝e rebuilt some components (like list groups and alerts) to use these new variables in their source Sass and compiled CSS so that they respond to the color mode changes.  <div class="d-flex gap-3"> <a href="https://getbootstrap.com/docs/5.3/customize/color/"> <img src="/assets/img/2023/05/colors-light-mode.png" alt="New colors in light mode" class="rounded-2 img-thumbnail" loading="lazy" width="1610" height="5778"> </a> <a href="https://getbootstrap.com/docs/5.3/customize/color/"> <img src="/assets/img/2023/05/colors-dark-mode.png" alt="New colors in dark mode" class="rounded-2 img-thumbnail" loading="lazy" width="1610" height="5778"> </a> </div>  <h2 id="new-link-helpers-and-utilities">New link helpers and utilities</h2> Link styling has infinitely better in v5.3.0 with a slew of all-new link helpers and utilities. First up, we’ve added styles to place icons like <a href="https://icons.getbootstrap.com">Bootstrap Icons</a> alongside links with <a href="https://getbootstrap.com/docs/5.3/helpers/icon-link/">the new icon link helper</a>.  <div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <a class="icon-link" href="#"> <svg class="bi" aria-hidden="true"><use xlink:href="#archive"></use></svg> Icon link </a> </div><div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> html <div class="d-flex ms-auto"> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg> </button> </div> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><a class="icon-link" href="#"> <svg class="bi" aria-hidden="true"><use xlink:href="#archive"></use></svg> Icon link </a></code></pre></div> </div> <div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <a class="icon-link" href="#"> Icon link <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg> </a> </div><div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> html <div class="d-flex ms-auto"> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg> </button> </div> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><a class="icon-link" href="#"> Icon link <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg> </a></code></pre></div> </div>  Our other new helper is a <a href="https://getbootstrap.com/docs/5.3/helpers/focus-ring/">new focus ring helper</a> for removing the default <code>outline</code> and setting a custom <code>box-shadow</code> focus ring. <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2"> Custom focus ring </a> </code></pre></div>On the utilities side, we have new classes for setting link color opacity, underline offset, underline color, and underline opacity. <a href="https://getbootstrap.com/docs/5.3/utilities/link/">Explore the new links utilities.</a> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><p><a class="link-opacity-10" href="#">Link opacity 10</a></p> <p><a class="link-opacity-25" href="#">Link opacity 25</a></p> <p><a class="link-opacity-50" href="#">Link opacity 50</a></p> <p><a class="link-opacity-75" href="#">Link opacity 75</a></p> <p><a class="link-opacity-100" href="#">Link opacity 100</a></p> </code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><p><a href="#">Default link</a></p> <p><a class="link-offset-1" href="#">Offset 1 link</a></p> <p><a class="link-offset-2" href="#">Offset 2 link</a></p> <p><a class="link-offset-3" href="#">Offset 3 link</a></p> <p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Custom link</a></p> </code></pre></div>Lastly, we’ve added a new <code>.link-body-emphasis</code> helper alongside our <a href="https://getbootstrap.com/docs/5.3/helpers/colored-links/">colored links</a>. This creates a colored link using our color mode responsive emphasis color. <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p> </code></pre></div><h2 id="new-nav-underline">New nav underline</h2> There’s a new <code>.nav</code> variant and modifier class with <code>.nav-underline</code>. Add <code>.nav-underline</code> to a <code>.nav</code> to get a simpler bottom border under the active nav link. <a href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#underline">See the docs for an example.</a>  <div class="bd-example-snippet bd-code-snippet"> <div class="bd-example m-0 border-0"> <ul class="nav nav-underline"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> </div><div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> html <div class="d-flex ms-auto"> <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg> </button> </div> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><ul class="nav nav-underline"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul></code></pre></div> </div>  <h2 id="and-much-more">And much more!</h2> Beyond all the color mode updates, new helpers, and new utilities, we have a ton of other quality-of-life updates in this release. Here’s a quick rundown of the highlights: <ul> <li> Navs now have new <code>:focus-visible</code> styles that better match our custom button focus styles. </li> <li> CSS variable-based <code>border-width</code> utilities have been reverted to set their property directly (as was done before v5.2.0). This avoids inheritance issues across nested elements, including tables. </li> <li> Added new <code>.border-black</code> utility to match our <code>.text-black</code> and <code>.bg-black</code> utilities. </li> <li> Deprecated the <code>.text-muted</code> utility and <code>$text-muted</code> Sass variable. It’s been replaced by <code>.text-body-secondary</code> and <code>$body-secondary-color</code>. </li> <li> Added a check for interpolated variables to catch compilation errors with Node Sass when using Sass variables in <code>calc()</code> functions. </li> <li> Started using <code>--bs-border-radius</code> variables across more components. </li> <li> Added <code>.d-inline-grid</code> utility class. </li> <li> Fixed <code>.tooltip-inner</code> placement when using variations in <code>fallbackPlacements</code>. </li> <li> Fix selectors for dark mode carousel overrides when compiling with <code>$color-mode-type: media-query</code>. </li> <li> Updated the styling of floating labels when “floated” to include a <code>background-color</code> to help with multiple lines of text in <code>textarea</code>s. This also fixes the colors when form elements are disabled in floating forms. </li> <li> Updated RFS to v10.0.0. </li> </ul> <h2 id="next-up">Next up</h2> We’ll be shipping some patch releases for v5.3.x in the coming weeks to address any issues that come up. We’ll also be working on v5.4.0, which will primarily focus on improvements to our utilities API and related code. Stay tuned for more updates on that front! <h2 id="migrating-from-earlier-alphas">Migrating from earlier alphas</h2> Have a read through the <a href="https://getbootstrap.com/docs/5.3/migration/#v530-alpha1">Migration guide</a> for the first alpha, or <a href="/2022/12/24/bootstrap-5-3-0-alpha1/">the blog post for the release announcement</a>, if you’re just getting into v5.3.0. <h2 id="get-the-release">Get the release</h2> Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest. It’s also been pushed to npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@v5.3.0 </code></pre></div><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.0">Read the GitHub v5.3.0 changelog</a> for a complete list of changes in this release. <h2 id="support-the-team">Support the team</h2> 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. </div><div class="post"> <h1 class="post-title fw-semibold"> <a href="/2023/04/03/bootstrap-5-3-0-alpha3/" class="text-decoration-none">Bootstrap 5.3.0-alpha3</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" alt="" loading="lazy" width="32" height="32"> @mdo </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> April 03, 2023 </div> Hot on the heels of our second alpha, we’re releasing a third (and unexpected) alpha for v5.3.0 today with some fixes for some Node Sass compilation errors. In addition, we’ve added a handful of other updates. We’re still on target to ship our stable release soon! Once again, if you’re new to the v5.3.0 alpha releases, please read through the <a href="https://getbootstrap.com/docs/5.3/migration/#v530-alpha1">Migration guide</a> for the first alpha and last month’s <a href="https://getbootstrap.com/docs/5.3/migration/#v530-alpha2">second alpha</a>. Here’s a look at what’s changed in this quick release: <ul> <li>Fixed wrong interpolated variables with node-sass/Hugo.</li> <li>Added a check for interpolated variables to catch compilation errors with Node Sass when using Sass variables in <code>calc()</code> functions.</li> <li>Started using <code>--bs-border-radius</code> variables across more components.</li> <li>Added <code>.d-inline-grid</code> utility class.</li> <li>Fixed <code>.tooltip-inner</code> placement when using variations in <code>fallbackPlacements</code>.</li> <li>Fix selectors for dark mode carousel overrides when compiling with <code>$color-mode-type: media-query</code>.</li> <li>Updated the styling of floating labels when “floated” to include a <code>background-color</code> to help with multiple lines of text in <code>textarea</code>s. This also fixes the colors when form elements are disabled in floating forms.</li> <li>Updated RFS to v10.0.0.</li> </ul> <h2 id="get-the-release">Get the release</h2> Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest. It’s also been pushed to npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@v5.3.0-alpha3 </code></pre></div><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.0-alpha3">Read the GitHub v5.3.0-alpha3 changelog</a> for a complete list of changes in this release. <h2 id="support-the-team">Support the team</h2> 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. </div><div class="post"> <h1 class="post-title fw-semibold"> <a href="/2023/03/24/bootstrap-5-3-0-alpha2/" class="text-decoration-none">Bootstrap 5.3.0-alpha2</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" alt="" loading="lazy" width="32" height="32"> @mdo </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> March 24, 2023 </div> Our second alpha release of v5.3.0 has landed with a ton of enhancements and bug fixes for our new color modes! There’s still more to come, but we’ve held off shipping until we ironed out enough issues. Huzzah, we have! This v5.3.0 release is a monumental update for Bootstrap 5. It’s big enough that it could’ve been a v6 on its own, but we wanted to do right by the community and get color modes out the door without the massive major release upgrade. We’re getting super close now, so bear with us as we continue to chip away at this. And, in the meantime, here’s the rundown on what’s changed since our first alpha. Have a read through the <a href="https://getbootstrap.com/docs/5.3/migration/#v530-alpha1">Migration guide</a> for the first alpha, or <a href="/2022/12/24/bootstrap-5-3-0-alpha1/">the blog post for the release announcement</a>, if you’re just getting into v5.3.0. <h3 id="css-variables">CSS variables</h3> <ul> <li>Removed several duplicate and unused root CSS variables.</li> </ul> <h3 id="color-modes">Color modes</h3> <ul> <li> Dark mode colors are now derived from our theme colors (e.g., <code>$primary</code>) in Sass, rather than color-specific tints or shades (e.g., <code>$blue-300</code>). This allows for a more automated dark mode when customizing the default theme colors. </li> <li> Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border. </li> <li> <a href="https://getbootstrap.com/docs/5.3/examples/#snippets">Snippet examples</a> are now ready for dark mode with updated markup and reduced custom styles. </li> <li> Added <code>color-scheme: dark</code> to dark mode CSS to change OS level controls like scrollbars </li> <li> Form validation <code>border-color</code> and text <code>color</code> states now respond to dark mode, thanks to new Sass and CSS variables. </li> <li> Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn’t update properly. </li> <li> Our <code>box-shadow</code>s will once again always stay dark instead of inverting to white when in dark mode. </li> <li> Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes. </li> <li> Improved docs code syntax colors and more across light and dark modes. </li> <li> Removed the ability to nest light mode components within dark mode. This was super incomplete unfortunately and just isn’t practical without quadrupling our selectors for every component. Maybe in v6! </li> </ul> <h3 id="typography">Typography</h3> <ul> <li>We no longer set a color for <code>$headings-color-dark</code> or <code>--bs-heading-color</code> for dark mode. To avoid several problems of headings within components appearing the wrong color, we’ve set the Sass variable to <code>null</code> and added a <code>null</code> check like we use on the default light mode.</li> </ul> <h3 id="components">Components</h3> <ul> <li> Cards now have a <code>color</code> set on them to improve rendering across color modes. </li> <li> Added a new <code>.nav-underline</code> variant for our navigation with a simpler bottom border under the active nav link. <a href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#underline">See the docs for an example.</a> </li> <li> Navs now have new <code>:focus-visible</code> styles that better match our custom button focus styles. </li> </ul> <h3 id="helpers">Helpers</h3> <ul> <li> Added a new <code>.icon-link</code> helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too. </li> <li> Added a new focus ring helper for removing the default <code>outline</code> and setting a custom <code>box-shadow</code> focus ring. </li> </ul> <h3 id="utilities">Utilities</h3> <ul> <li> Renamed Sass and CSS variables <code>${color}-text</code> to <code>${color}-text-emphasis</code> to match their associated utilities. </li> <li> Added new <code>.link-body-emphasis</code> helper alongside our <a href="https://getbootstrap.com/docs/5.3/helpers/colored-links/">colored links</a>. This creates a colored link using our color mode responsive emphasis color. </li> <li> Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. <a href="https://getbootstrap.com/docs/5.3/utilities/link/">Explore the new links utilities.</a> </li> <li> CSS variable-based <code>border-width</code> utilities have been reverted to set their property directly (as was done before v5.2.0). This avoids inheritance issues across nested elements, including tables. </li> <li> Added new <code>.border-black</code> utility to match our <code>.text-black</code> and <code>.bg-black</code> utilities. </li> <li> Deprecated Deprecated the <code>.text-muted</code> utility and <code>$text-muted</code> Sass variable. It’s been replaced by <code>.text-body-secondary</code> and <code>$body-secondary-color</code>. </li> </ul> <h3 id="docs">Docs</h3> <ul> <li>Updated docs page table of contents to use Scrollspy (shoutout to our v3 docs!).</li> <li>Revamped syntax highlighting colors for code snippets across color modes.</li> <li>Improved content and rendering of several docs callouts.</li> <li>Document more color mode features and usage suggestions.</li> <li>Added theme toggling to examples pages.</li> <li>Updated dependencies across the board, including in our guides.</li> </ul> <h2 id="known-issues">Known issues</h2> While not an exhaustive list, here’s some of the stuff we’re going to be working on before calling this release stable. You can track these and more in the <a href="https://github.com/orgs/twbs/projects/18">v5.3.0-stable project on GitHub</a>. <ul> <li>Add new functionality to utilities with mixins and functions.</li> <li>Some components need another pass at enabling full-color mode responsiveness. Bear in mind, some components like buttons won’t get full-color mode adaptivity until v6.</li> <li>Labels in disabled floating forms have incorrect rendering.</li> <li>Docs need to be updated for modifying theme colors across color modes.</li> <li>Examples need another pass for dark mode support, new screenshots, and more.</li> <li>Improve click/tap area for range inputs.</li> </ul> Up next will be the stable release of v5.3.0. Originally this was planned as a beta, but I think we’re getting close enough to call this final with one more release. <h2 id="get-the-release">Get the release</h2> Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest. It’s also been pushed to npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@v5.3.0-alpha2 </code></pre></div><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.0-alpha2">Read the GitHub v5.3.0-alpha2 changelog</a> for a complete list of changes in this release. <h2 id="support-the-team">Support the team</h2> 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. </div><div class="post"> <h1 class="post-title fw-semibold"> <a href="/2022/12/24/bootstrap-5-3-0-alpha1/" class="text-decoration-none">Bootstrap 5.3.0-alpha1</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" alt="" loading="lazy" width="32" height="32"> @mdo </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> December 24, 2022 </div> It’s a Christmas miracle鈥擝ootstrap v5.3.0-alpha1 has arrived just in time for the holiday break! This release brings new color mode support, an expanded color palette with variables and utilities, and more. We’re keeping things short and simple in this blog post with deeper dives into the new color modes and more coming in future posts. For now, we want you to enjoy the holiday break and come back next year feeling refreshed and rejuvenated. Keep reading for what’s new and we’ll see you next year! <h2 id="dark-mode-and-color-modes">Dark mode and color modes</h2> <a href="https://getbootstrap.com"><img src="/assets/img/2022/12/docs-dark-mode.png" class="d-block img-fluid mb-2 rounded border" alt="New homepage" width="2880" height="1800" loading="lazy"> </a> Bootstrap now supports an explicit opt-in for creating multiple color modes via the <code>data-bs-theme</code> attribute on the root <code><html></code> element. We opted for a <code>data</code> attribute solution so that you can create any number of themes instead of just light and dark. We use a new Sass mixin, <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/#building-with-sass"><code>color-mode()</code></a>, to generate our dark mode styles with either a data attribute (the default) or a media query. The latter is useful if you only have two color modes and want automatic color mode changing via CSS. <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/">Read more in the new color mode docs.</a> <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/"><img src="/assets/img/2022/12/docs-color-modes.png" class="d-block img-fluid mb-2 rounded border" alt="New homepage" width="2880" height="1800" loading="lazy"> </a> For those wanting to build something more advanced, you can <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript">read how we built our own color mode picker</a> with JavaScript that respects the device or operating system setting by default, but still allows someone to override it with an explicit theme. If you’re using the CDN or starter template, using the new color modes is straightforward. Add the <code>data-bs-theme</code> attribute with <code>light</code> or <code>dark</code> values to the <code><html></code> element and you’ll be using either the light or dark theme. <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><!doctype html> <html lang="en" data-bs-theme="dark"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </body> </html> </code></pre></div>Want to use CSS media queries to change the color mode instead? You can also build Bootstrap with Sass and customize how you use color modes. <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/#building-with-sass">Read the docs</a> to learn more. You can even create custom color modes. <h2 id="expanded-color-palette">Expanded color palette</h2> <a href="https://getbootstrap.com/docs/5.3/customize/color/"><img src="/assets/img/2022/12/docs-colors.png" class="d-block img-fluid mb-2 rounded border" alt="New homepage" width="2880" height="1800" loading="lazy"> </a> <a href="https://getbootstrap.com/docs/5.3/customize/color/"><img src="/assets/img/2022/12/docs-colors-dark-mode.png" class="d-block img-fluid mb-2 rounded border" alt="New homepage" width="2880" height="1800" loading="lazy"> </a> We have a huge new color palette update with new Sass variables, CSS variables, and utilities to boot. Foreground and background colors have new secondary, tertiary, and emphasis colors to choose from, while our theme colors have expanded on to include their subtle background colors, subtle border colors, and darker text colors. We’ve rebuilt some components (like list groups and alerts) to use these new variables in their source Sass and compiled CSS so that they respond to the color mode changes. <a href="https://getbootstrap.com/docs/5.3/customize/color/#colors">Check out the new colors docs.</a> <h2 id="and-more">And more!</h2> And a few more noteworthy changes: <ul> <li> Added new CSS variables for grid breakpoints, link colors, close button, alert links, forms, and more. In addition, many components have been updated to use more global CSS variables like <code>--bs-border-color</code> to better respond to changing color modes. </li> <li> Floating forms have been updated to be more bulletproof and now include proper support for textareas. </li> <li> Added many new utilities, including <code>fw-medium</code>, <code>overflow</code> and <code>object-fit</code> utilities, <a href="https://getbootstrap.com/docs/5.3/utilities/z-index/">z-index</a>, and more. Plus, <code>border-radius</code> utilities have been updated so that you can combine <code>.rounded-{top|bottom|start|end}</code> with <code>.rounded-{0-5|pill|circle}</code>. </li> <li> Fixed some Popper tooltip and popover consistency issues. </li> </ul> Be sure to consult the <a href="https://getbootstrap.com/docs/5.3/migration/">v5.3.0 migration guide</a> to see what’s changed as well. <h2 id="up-next">Up next</h2> As we iron out the release with your feedback and bug reports, we’ll also be updating the Bootstrap Blog and Bootstrap Icons sites to use the new themes soon. We’ll also continue to refine how our components and utilities work with the new color modes, adding Sass testing to improve our coverage of how folks build with Bootstrap, and much more. <h2 id="get-the-release">Get the release</h2> Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest. It’s also been pushed to npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@v5.3.0-alpha1 </code></pre></div><a href="https://github.com/twbs/bootstrap/releases/tag/v5.3.0-alpha1">Read the GitHub v5.3.0-alpha1 changelog</a> for a complete list of changes in this release. <h2 id="support-the-team">Support the team</h2> 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. </div><div class="post"> <h1 class="post-title fw-semibold"> <a href="/2022/11/22/bootstrap-5-2-3/" class="text-decoration-none">Bootstrap 5.2.3</a> </h1> <div class="d-flex align-items-center mb-4 text-muted author-info"> <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" alt="" loading="lazy" width="32" height="32"> @mdo </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-2" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/> </svg> November 22, 2022 </div> We’ve deviated from developing v5.3.0 to ship a new patch release, Bootstrap v5.2.3, with a handful of more urgent bug fixes. <h2 id="highlights">Highlights</h2> <ul> <li>Added the missing <code>:root</code> CSS variables to our utilities bundle</li> <li>Fixed the deprecation warning with Sass 1.56.0</li> <li>Fixed the RTL <code>translate()</code> direction for carousels</li> <li>Fixed tooltip and popover disposal inconsistencies</li> </ul> We’re heading right back to it with v5.3.0 with support for color modes, new utilities, and more. Look for a pre-release of that soon. <h2 id="get-the-release">Get the release</h2> Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest. It’s also been pushed to npm: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap@v5.2.3 </code></pre></div><a href="https://github.com/twbs/bootstrap/releases/tag/v5.2.3">Read the GitHub v5.2.3 changelog</a> for a complete list of changes in this release. <h2 id="support-the-team">Support the team</h2> 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. </div> </div> <div class="pagination"><a class="pagination-item older" href="/page/2/">Older</a> Newer </div> </div> </main> </div> </div> <footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary"> <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary"> <div class="row"> <div class="col-lg-3 mb-3"> <a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="/" aria-label="Bootstrap"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94"> <title>Bootstrap</title> <path fill="currentColor" fill-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 0 1-2-2V24a2 2 0 0 1 2-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863M60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207M49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281s-3.903-8.178-11.425-8.178H49.948z" clip-rule="evenodd"/> </svg> Bootstrap </a> <ul class="list-unstyled small"> <li class="mb-2">Designed and built with all the love in the world by the <a href="https://getbootstrap.com/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/blog/graphs/contributors">our contributors</a>.</li> <li class="mb-2">Code licensed <a href="https://github.com/twbs/blog/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li> </ul> </div> <div class="col-6 col-lg-2 offset-lg-1 mb-3"> <h5>Links</h5> <ul class="list-unstyled"> <li class="mb-2"><a href="https://getbootstrap.com/">Home</a></li> <li class="mb-2"><a href="https://getbootstrap.com/docs/5.3/">Docs</a></li> <li class="mb-2"><a href="https://getbootstrap.com/docs/5.3/examples/">Examples</a></li> <li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li> <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li> <li class="mb-2"><a href="/">Blog</a></li> <li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap" target="_blank" rel="noopener">Swag Store</a></li> </ul> </div> <div class="col-6 col-lg-2 mb-3"> <h5>Guides</h5> <ul class="list-unstyled"> <li class="mb-2"><a href="https://getbootstrap.com/docs/5.3/getting-started/">Getting started</a></li> <li class="mb-2"><a href="https://getbootstrap.com/docs/5.3/examples/starter-template/">Starter template</a></li> <li class="mb-2"><a href="https://getbootstrap.com/docs/5.3/getting-started/webpack/">Webpack</a></li> <li class="mb-2"><a href="https://getbootstrap.com/docs/5.3/getting-started/parcel/">Parcel</a></li> <li class="mb-2"><a href="https://getbootstrap.com/docs/5.3/getting-started/vite/">Vite</a></li> </ul> </div> <div class="col-6 col-lg-2 mb-3"> <h5>Projects</h5> <ul class="list-unstyled"> <li class="mb-2"><a href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener">Bootstrap 5</a></li> <li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a></li> <li class="mb-2"><a href="https://github.com/twbs/icons" target="_blank" rel="noopener">Icons</a></li> <li class="mb-2"><a href="https://github.com/twbs/rfs" target="_blank" rel="noopener">RFS</a></li> <li class="mb-2"><a href="https://github.com/twbs/examples" target="_blank" rel="noopener">Examples repo</a></li> </ul> </div> <div class="col-6 col-lg-2 mb-3"> <h5>Community</h5> <ul class="list-unstyled"> <li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues" target="_blank" rel="noopener">Issues</a></li> <li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions" target="_blank" rel="noopener">Discussions</a></li> <li class="mb-2"><a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener">Corporate sponsors</a></li> <li class="mb-2"><a href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">Open Collective</a></li> <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener">Stack Overflow</a></li> </ul> </div> </div> </div> </footer> </body> </html>