{"id":53625,"date":"2020-04-25T15:34:47","date_gmt":"2020-04-25T10:04:47","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=53625"},"modified":"2026-10-13T15:25:08","modified_gmt":"2026-10-13T09:55:08","slug":"bootstrap-5-features","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/","title":{"rendered":"What&#8217;s New in Bootstrap 5: Key Features and Changes (2026)"},"content":{"rendered":"<p>What&#8217;s new in Bootstrap 5? Bootstrap is one of the most popular front-end frameworks for building responsive, mobile-first websites, and version 5 was its biggest change in years. When we first wrote about it, Bootstrap 5 was still in alpha. Today Bootstrap 5.3 is the stable version used by millions of sites. Here are the key <strong>Bootstrap 5<\/strong> features, what changed from Bootstrap 4, and how to start using it.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-54508\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/bootstrap-5.png\" alt=\"bootstrap-5\" width=\"560\" height=\"315\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/bootstrap-5.png 560w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/bootstrap-5-300x169.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/bootstrap-5-150x84.png 150w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Bootstrap 5 dropped jQuery and Internet Explorer support, uses vanilla JavaScript, adds CSS custom properties (variables), an xxl grid tier, offcanvas menus, floating form labels, a utilities API, built-in RTL support, and (since 5.3) colour modes for dark mode. Load it from the official CDN or install it with npm.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6aefb5fc8e602\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6aefb5fc8e602\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#Key_Bootstrap_5_features\" >Key Bootstrap 5 features<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#1_No_more_jQuery\" >1. No more jQuery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#2_No_Internet_Explorer_support\" >2. No Internet Explorer support<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#3_CSS_variables\" >3. CSS variables<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#4_Colour_modes_and_dark_mode_53\" >4. Colour modes and dark mode (5.3)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#5_New_xxl_grid_breakpoint\" >5. New xxl grid breakpoint<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#6_Offcanvas_component\" >6. Offcanvas component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#7_Better_forms\" >7. Better forms<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#8_Utilities_API_and_RTL\" >8. Utilities API and RTL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#9_Bootstrap_Icons\" >9. Bootstrap Icons<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#How_to_start_using_Bootstrap_5\" >How to start using Bootstrap 5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#Upgrading_from_Bootstrap_4\" >Upgrading from Bootstrap 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#What_is_the_latest_Bootstrap_version\" >What is the latest Bootstrap version?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#Does_Bootstrap_5_need_jQuery\" >Does Bootstrap 5 need jQuery?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/#Is_Bootstrap_still_worth_learning\" >Is Bootstrap still worth learning?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Key_Bootstrap_5_features\"><\/span>Key Bootstrap 5 features<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_No_more_jQuery\"><\/span>1. No more jQuery<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>All Bootstrap JavaScript components, from dropdowns to modals, now use plain JavaScript. Pages load faster, and you no longer need jQuery unless your own code uses it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_No_Internet_Explorer_support\"><\/span>2. No Internet Explorer support<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dropping IE 10 and 11 let Bootstrap use modern CSS such as custom properties and flexbox everywhere, with less legacy code.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_CSS_variables\"><\/span>3. CSS variables<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Colours, spacing and component styles are exposed as CSS custom properties like <code>--bs-primary<\/code>, so you can change themes without recompiling Sass.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Colour_modes_and_dark_mode_53\"><\/span>4. Colour modes and dark mode (5.3)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add <code>data-bs-theme=\"dark\"<\/code> to the html tag or any element to switch it to dark mode. You can create your own colour modes too.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_New_xxl_grid_breakpoint\"><\/span>5. New xxl grid breakpoint<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A sixth grid tier for screens 1400px and wider, plus gutter utilities (<code>g-*<\/code>) to control spacing between columns.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Offcanvas_component\"><\/span>6. Offcanvas component<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Slide-in sidebars and menus from any edge of the screen, perfect for mobile navigation. For a simple menu that stays on screen while scrolling, a <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2026\/10\/fix-navbar-top-bottom\/\">sticky navbar in pure CSS<\/a> is often enough.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Better_forms\"><\/span>7. Better forms<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Restyled form controls, floating labels and consistent checkboxes, radios and switches across browsers.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_Utilities_API_and_RTL\"><\/span>8. Utilities API and RTL<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Generate your own utility classes with the Sass utilities API, and build right-to-left layouts for Arabic, Hebrew and Urdu with the built-in RTL CSS.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_Bootstrap_Icons\"><\/span>9. Bootstrap Icons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bootstrap has its own free icon library with over 2,000 SVG icons, though many sites still use <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/\">Font Awesome icons with Bootstrap<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_start_using_Bootstrap_5\"><\/span>How to start using Bootstrap 5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Add the CSS link from the official <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">getbootstrap.com<\/a> page (jsDelivr CDN) in your head.<\/li>\n<li>Add the JavaScript bundle (which includes Popper) before the closing body tag.<\/li>\n<li>Use the starter template and build with the grid, components and utilities.<\/li>\n<\/ol>\n<p>Choose a fast CDN; see our tests of the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/best-free-jquery-cdn\/\">fastest CDN for jQuery and Bootstrap<\/a>, and these tips to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/\">load Bootstrap faster<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Upgrading_from_Bootstrap_4\"><\/span>Upgrading from Bootstrap 4<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Rename data attributes: <code>data-toggle<\/code> becomes <code>data-bs-toggle<\/code>.<\/li>\n<li>Replace <code>.ml-*<\/code> and <code>.mr-*<\/code> with <code>.ms-*<\/code> and <code>.me-*<\/code> (start\/end, for RTL support).<\/li>\n<li>Replace <code>.form-group<\/code> with spacing utilities, and custom form classes with the new form classes.<\/li>\n<li>Remove jQuery-dependent plugin code or rewrite it in vanilla JavaScript.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"What_is_the_latest_Bootstrap_version\"><\/span>What is the latest Bootstrap version?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bootstrap 5.3.x is the current stable series. Check getbootstrap.com for the newest release.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Does_Bootstrap_5_need_jQuery\"><\/span>Does Bootstrap 5 need jQuery?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. Bootstrap 5 runs on plain JavaScript.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_Bootstrap_still_worth_learning\"><\/span>Is Bootstrap still worth learning?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, for quick, responsive layouts and admin panels. Utility-first frameworks like Tailwind are popular alternatives.<\/p>\n<p>Are you using Bootstrap 5 on your site? Share your tips in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What&#8217;s new in Bootstrap 5? Bootstrap is one of the most popular front-end frameworks for building responsive, mobile-first websites, and&#8230;<\/p>\n","protected":false},"author":4,"featured_media":54508,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[52],"class_list":["post-53625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-popular"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/53625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=53625"}],"version-history":[{"count":2,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/53625\/revisions"}],"predecessor-version":[{"id":65590,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/53625\/revisions\/65590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/54508"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=53625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=53625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=53625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}