{"id":1606,"date":"2020-10-26T14:36:55","date_gmt":"2020-10-26T14:36:55","guid":{"rendered":"https:\/\/www.ipraxa.com\/blog\/?p=1606"},"modified":"2023-07-06T06:40:37","modified_gmt":"2023-07-06T06:40:37","slug":"bootstrap-5-whats-new-whats-changed","status":"publish","type":"post","link":"https:\/\/www.ipraxa.com\/blog\/bootstrap-5-whats-new-whats-changed\/","title":{"rendered":"Bootstrap 5 &#8211; Key Features &#038; Improvements with Screenshots"},"content":{"rendered":"<p>Since its release back in 2011, Bootstrap has been the most popular open-source CSS framework to quickly build modern, responsive, and dynamic websites and applications. The latest stable version of the framework is <a href=\"https:\/\/blog.getbootstrap.com\/2020\/08\/06\/bootstrap-4-5-2\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">4.5.2<\/a>, and the Bootstrap team is all set to launch the new updated version, Bootstrap 5.<\/p>\n<p>After several months of redefining its features, the Bootstrap team recently released the first alpha version of the much-awaited Bootstrap 5. While many changes are still to come, <a href=\"https:\/\/blog.getbootstrap.com\/2020\/06\/16\/bootstrap-5-alpha\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Bootstrap 5 alpha<\/a> gives us a sneak peek of the significant new features and improvements heading to the upcoming version. Let&#8217;s dive in to know what&#8217;s new coming to Bootstrap 5, including the release date.<\/p>\n<h2 align=\"center\">Bootstrap 5 New Features and Highlights<\/h2>\n<p>As with any major release, a lot has changed in Bootstrap 5. Let&#8217;s see what&#8217;s changed and what&#8217;s new coming to the upcoming version of Bootstrap.<\/p>\n<h3>#New Look &amp; Feel<\/h3>\n<p>The Bootstrap 5 docs pages are no longer full-width. This change has been done to:<\/p>\n<ul>\n<li>Bring an updated look and feel to the Bootstrap site.<\/li>\n<li>Improve readability.<\/li>\n<li>Make the website feel more content-like and less app-like.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-1607\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-1.png\" alt=\"Bootstrap 5 Features\" width=\"500\" height=\"383\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-1.png 1500w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-1-300x230.png 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-1-1024x785.png 1024w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-1-768x589.png 768w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Additionally, Bootstrap 5 is getting a brand new logo that is inspired by the CSS. The new logo features the letter &#8216;B&#8217; in a rounded square bounded by curly braces.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-1608\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-2.png\" alt=\"Bootstrap 5 Features\" width=\"500\" height=\"250\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-2.png 2000w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-2-300x150.png 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-2-1024x512.png 1024w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-2-768x384.png 768w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-2-1536x768.png 1536w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>While these changes have already been rolled out to &#8216;Blog&#8217; and &#8216;Icons&#8217; sections, you can expect them to be implemented in other website areas soon.<\/p>\n<h3>#Switching from jQuery to Vanilla JavaScript<\/h3>\n<p>Since the last nine years, Bootstrap has been leveraging jQuery&#8217;s power to offer dynamic features such as dropdowns, carousel, menu expansion, etc. into their websites and applications. However, with the advent of modern JavaScript frameworks such as Angular, Vue, and React, the Bootstrap team has decided to drop jQuery as a dependency from version 5.<\/p>\n<p>Instead, Bootstrap 5 relies on pure vanilla JavaScript to offer behaviors such as popover, slider, dropdown, etc. As a result, projects built on version 5 will be significantly lightweight and faster, and you&#8217;ll have better control and maintenance over your code. The best thing is you can still use jQuery if your project depends on it.<\/p>\n<p>This is one of the most significant changes made to the framework in the last few years, making Bootstrap a future-friendly framework that integrates with modern JavaScript-based frameworks.<\/p>\n<h3>#Responsive Font Sizes<\/h3>\n<p>Designing a website that looks great across multiple viewports has been daunting for some developers. To maintain the readability on different viewports, you currently have to manually specify specific font sizes for a particular viewport using media queries.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-1609\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-3.png\" alt=\"Bootstrap 5\" width=\"450\" height=\"305\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-3.png 974w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-3-300x204.png 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-3-768x521.png 768w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>To make the process effortless and hassle-free, the upcoming version of Bootstrap will enable responsive font sizes by default. This will automatically resize the typography elements according to the user&#8217;s viewport through Bootstrap&#8217;s side project, <a href=\"https:\/\/github.com\/twbs\/rfs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">RFS engine<\/a>.<\/p>\n<h3>#Dropping Support for Internet Explorer<\/h3>\n<p>This is the second significant change after jQuery. With Microsoft putting all its efforts towards the Edge browser, which is based on Google&#8217;s open-source Chromium engine, Internet Explorer is no longer relevant to <a href=\"https:\/\/www.ipraxa.com\/blog\/web-development-technologies\/\">modern web development technologies<\/a> because it doesn&#8217;t support current JavaScript standards.<\/p>\n<p>And this is the reason why the Bootstrap team decided to drop support for Internet Explorer. As a result, <a href=\"https:\/\/www.ipraxa.com\/hire-dedicated-developers.html\">web designers and developers<\/a> can now focus on building modern web pages rather than worrying about breaking any code on older browsers&#8217; versions.<\/p>\n<h3>#Enhanced Grid System<\/h3>\n<p>Bootstrap 5 is built on top of the existing grid system. Instead of replacing the current grid system with something completely new, the Bootstrap team has made several improvements to it, so that everyone could upgrade to the upcoming version without much effort.<\/p>\n<p>Here&#8217;s a rundown of what&#8217;s new in the Bootstrap 5 grid system:<\/p>\n<ul>\n<li>A new extra-extra-large (xxl) grid tier for resolutions \u22651400px.<\/li>\n<li>.g* utilities replace .gutter classes, much like padding\/margin utilities.<\/li>\n<li>The new grid system replaces the form layout options.<\/li>\n<li>Addition of vertical spacing classes.<\/li>\n<li>By default, columns no longer have position: relative.<\/li>\n<\/ul>\n<h3>#Remove Card Decks<\/h3>\n<p>Generally, <a href=\"https:\/\/www.ipraxa.com\/bootstrap-development.html\">Bootstrap developers<\/a> have to write bulky code to create cards having equal widths and heights, which aren&#8217;t attached.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-1610\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-4.jpg\" alt=\"Bootstrap 5 Features\" width=\"450\" height=\"182\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-4.jpg 1199w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-4-300x122.jpg 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-4-1024x415.jpg 1024w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-4-768x311.jpg 768w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>It&#8217;s very time-consuming work, which is no longer needed in Bootstrap 5. The new version removes the card decks since it offers more responsive control with the enhanced grid system.<\/p>\n<h3>#Navbar Optimization<\/h3>\n<p>The <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/navbar\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">navbar component<\/a> is a principal part of Bootstrap, which developers utilize regularly. Bootstrap 5 optimizes the navbar by:<\/p>\n<ul>\n<li>Removing unnecessary &#8220;<em>display: inline-block<\/em>&#8221; from Flex child components<\/li>\n<li>Removing line-height: inherit;<\/li>\n<li>Adding a default &#8220;container&#8221; element to the navbar<\/li>\n<\/ul>\n<p>Apart from that, the Bootstrap team has also implemented a dark dropdown via <em>dropdown-menu-dark<\/em> class, which turns the dropdown menu into a black background.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-1611\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-5.jpg\" alt=\"Bootstrap 5 Features\" width=\"450\" height=\"87\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-5.jpg 1179w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-5-300x58.jpg 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-5-1024x198.jpg 1024w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-5-768x149.jpg 768w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<h3>#Custom SVG Icon Library<\/h3>\n<p>Bootstrap 5 introduces its own, brand new, and open-source SVG icon library crafted carefully by the co-founder of the framework himself. That means you now don&#8217;t have to use third-party icon libraries such as Material Icons or Font Awesome.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-1612\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-6.png\" alt=\"Bootstrap 5 Features\" width=\"450\" height=\"273\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-6.png 700w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-6-300x182.png 300w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>Since these icons are available as a separate package, you can even use them already in your projects before the official release of Bootstrap 5.<\/p>\n<h3>#Migration from Jekyll to Hugo<\/h3>\n<p>Bootstrap has been using Jekyll as its documentation static site generator for a long time. However, in recent years, Hugo has emerged as the fastest and most flexible static site generator.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-1613\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/image-7.png\" alt=\"Bootstrap 5 Features\" width=\"450\" height=\"161\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/image-7.png 893w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/image-7-300x107.png 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/image-7-768x274.png 768w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>Given that Jekyll requires the Ruby installation and offers a slow static site generation, the Bootstrap team decided to switch from Jekyll to Hugo in version 5. Written in Go language, Hugo has no external runtime dependencies and is much faster than Jekyll.<\/p>\n<h3>#CSS Custom Properties<\/h3>\n<p>Thanks to dropping support for Internet Explorer, Bootstrap 5 now allows you to use CSS custom properties. While there were only a handful of root variables introduced for color and fonts in version 4, the upcoming version makes them available in several components and layout options.<\/p>\n<p>This means you&#8217;ll be able to define and reuse values for styling. Consequently, your theme development experience will get improved to a great extent. Bootstrap 5 aims to harness both Sass and CSS custom properties&#8217; powers to make the framework even more flexible for developers.<\/p>\n<h3>#Improved Customizing Docs<\/h3>\n<p>In an attempt to improve Docs, Bootstrap 5 introduces a whole new <a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/customize\/overview\/\" target=\"_blank\">Customize<\/a> section using which you can learn how to customize the framework.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-1614\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-8.png\" alt=\"Bootstrap 5 Features\" width=\"450\" height=\"345\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-8.png 1500w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-8-300x230.png 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-8-1024x785.png 1024w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-8-768x589.png 768w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>Additionally, version 5 offers a much more extensive and beautiful inbuilt color palette so that you can easily customize the look and feel of your website or application without ever leaving the codebase.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-1615\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-9.png\" alt=\"Bootstrap 5 Features\" width=\"450\" height=\"140\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-9.png 1774w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-9-300x93.png 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-9-1024x319.png 1024w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-9-768x239.png 768w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-9-1536x478.png 1536w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<h3>#Optimized Forms<\/h3>\n<p>Bootstrap 5 introduces a separate, dedicated section for Forms documentation and components. The main objective of this move is to give all forms styles the emphasis they deserve.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-1616\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-10.png\" alt=\"Bootstrap 5 Features\" width=\"450\" height=\"327\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-10.png 1500w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-10-300x218.png 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-10-1024x744.png 1024w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-10-768x558.png 768w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>Alongside the new section, they have redesigned all of Bootstrap&#8217;s form controls. Unlike introducing custom form controls in version 4, they&#8217;ve gone fully custom in Bootstrap 5.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-1617\" src=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-11.png\" alt=\"Bootstrap 5 Features\" width=\"500\" height=\"315\" srcset=\"https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-11.png 902w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-11-300x189.png 300w, https:\/\/www.ipraxa.com\/blog\/wp-content\/uploads\/2020\/10\/Image-11-768x484.png 768w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<h3>#A Brand New Utility API<\/h3>\n<p>The new version of Bootstrap comes packed with a brand new utility API to remove or modify the default utility classes. The new API is similar to the utility-first CSS framework Tailwind CSS. It opens up a whole new world of possibilities to create utility classes for sizing, spacing, positioning, etc.<\/p>\n<h2 align=\"center\">Bootstrap 5 Release Date<\/h2>\n<p><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\">Bootstrap 5<\/a> has only been formally announced, and the exact release date has not been officially announced yet. However, speculations are Bootstrap 5 can be launched anytime soon in 2020. That&#8217;s all we know for now!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since its release back in 2011, Bootstrap has been the most popular open-source CSS framework to quickly build modern, responsive, and dynamic websites and applications. The latest stable version of the framework is 4.5.2, and the Bootstrap team is all set to launch the new updated version, Bootstrap 5. After several months of redefining its <\/p>\n<p> <a class=\"text-btn read-more\" href=\"https:\/\/www.ipraxa.com\/blog\/bootstrap-5-whats-new-whats-changed\/\">Read More <svg xml:space=\"preserve\" enable-background=\"new 0 0 30 18\" viewBox=\"0 0 30 18\" height=\"18px\" width=\"30px\" y=\"0px\" x=\"0px\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M20.305,16.212c-0.407,0.409-0.407,1.071,0,1.479s1.068,0.408,1.476,0l7.914-7.952c0.408-0.409,0.408-1.071,0-1.481\n\n\n\nl-7.914-7.952c-0.407-0.409-1.068-0.409-1.476,0s-0.407,1.071,0,1.48l7.185,7.221L20.305,16.212z\" class=\"handle\"\/><path d=\"M1,8h28.001c0.551,0,1,0.448,1,1c0,0.553-0.449,1-1,1H1c-0.553,0-1-0.447-1-1\n\n\n\nC0,8.448,0.447,8,1,8z\" clip-rule=\"evenodd\" fill-rule=\"evenodd\" class=\"bar\"\/><\/svg><\/a><\/p>\n","protected":false},"author":4,"featured_media":1620,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[293,297,296,295,298,294],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/posts\/1606"}],"collection":[{"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/comments?post=1606"}],"version-history":[{"count":12,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/posts\/1606\/revisions"}],"predecessor-version":[{"id":2848,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/posts\/1606\/revisions\/2848"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/media\/1620"}],"wp:attachment":[{"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/media?parent=1606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/categories?post=1606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ipraxa.com\/blog\/wp-json\/wp\/v2\/tags?post=1606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}