{"id":5004,"date":"2020-06-18T12:58:00","date_gmt":"2020-06-18T12:58:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5004"},"modified":"2020-08-19T13:18:56","modified_gmt":"2020-08-19T13:18:56","slug":"bootstrap-5-whats-new-about-it-and-release-date","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/","title":{"rendered":"Bootstrap 5: What\u2019s New, About It and Release Date"},"content":{"rendered":"\n<p><a href=\"https:\/\/getbootstrap.com\/\"><strong>Bootstrap<\/strong><\/a>, the most popular <strong>front-end framework<\/strong> built to design <strong>modern<\/strong>, <strong>responsive<\/strong>, and <strong>dynamic <\/strong>interfaces for <strong>professional design<\/strong> <strong>web pages<\/strong>, is currently undertaking a major update, <strong>Bootstrap\u00a05<\/strong>.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/v5.getbootstrap.com\/\" target=\"_blank\"><strong>Bootstrap 5 alpha<\/strong><\/a>\u00a0was officially <strong>released <\/strong>on <strong>June 16, 2020<\/strong> after several months of refining. With all of the major changes in this version, the <strong>Bootstrap 5<\/strong> development team informed the users that the current version is still in alpha version thus, breaking changes will continue to occur until the first beta is released so it\u2019s better to always check the open issues and pull requests on their official\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/twbs\/bootstrap\" target=\"_blank\"><strong>GitHub repository<\/strong><\/a>\u00a0for open questions and\u00a0feedback.<\/p>\n\n\n\n<p><strong>Bootstrap <\/strong>is a <strong>free <\/strong>and <strong>open-source<\/strong> <strong>collection <\/strong>of <strong>CSS <\/strong>and <strong>JavaScript\/jQuery code<\/strong> used for creating dynamic layout websites and web applications. Being a tool for creating front-end design, it consists of a series of HTML- and CSS-based design templates for different components of a website or application such as forms,\u00a0buttons,\u00a0navigation,\u00a0modals, typography and other interface components with helpful JavaScript extensions. It doesn\u2019t matter if you are a beginner to web development or an experienced developer, Bootstrap is a powerful tool for whatever type of website and web application you are trying to\u00a0build.<\/p>\n\n\n\n<p>In addition, Bootstrap provides an out-of-the-box solution with hundreds of third-party components that you can integrate with it which allows you to build a prototype fast to materialize your ideal website without spending a lot of time. Which in the end you might end up customizing to build the final design of your website or web application as most of the configuration is already set up for&nbsp;you.<\/p>\n\n\n\n<p><strong>Bootstrap 4<\/strong> is currently on version 4.4.1 which now has a lot of vital features such as cards, flexbox, Sass integration and powerful plugins built on jQuery. After more than 4 years of progress since the alpha version of\u00a0Bootstrap 4\u00a0was released on August 19, 2015; an update is being developed in the background for the version 5\u00a0upgrade.<\/p>\n\n\n\n<p>The\u00a0Startup app\u00a0will be updated to Bootstrap 5 as soon as the framework is updated.<\/p>\n\n\n\n<p><strong>In this article<\/strong>, let\u2019s take a look at Bootstrap 5\u2019s major updates including the release date, integration, and\u00a0modification.<\/p>\n\n\n\n<h2>Bootstrap Version 5: What Should We&nbsp;Expect?<\/h2>\n\n\n\n<p>Bootstrap 5\u2019s official&nbsp;<a href=\"https:\/\/github.com\/twbs\/bootstrap\/projects\/11?card_filter_query=class\" target=\"_blank\" rel=\"noreferrer noopener\">Github project tracking board<\/a>&nbsp;has more than 765 tasks being shipped with more than 83 pull requests and 311 issues. If we base the release date from the previous development timeframe (Bootstrap 4 to Bootstrap 4.1) the development team took about 3 months to complete Bootstrap 4.1 to Bootstrap 4.2 took about 8 months. We might expect&nbsp;<strong>Bootstrap 5 in the first half of 2020<\/strong>. Bootstrap hasn\u2019t confirmed the official release date&nbsp;yet.<\/p>\n\n\n\n<p>In hindsight, there is a list of changes that we expect on version 5 such as the removal of jQuery which is a major lift for this version and the drop of Internet Explorer 10 and 11&nbsp;support.<\/p>\n\n\n\n<p>The following are some of the expected changes in Bootstrap&nbsp;5:<\/p>\n\n\n\n<ul><li>jQuery was removed<\/li><li>Switch to Vanilla JavaScript<\/li><li>Responsive Font Sizes<\/li><li>Drop Internet Explorer 10 and 11 support<\/li><li>Change of gutter width unit of measurement<\/li><li>Removed Card Decks<\/li><li>Navbar Optimization<\/li><li>Custom SVG icon library<\/li><li>Switching from Jekyll to Hugo<\/li><li>Class updates<\/li><\/ul>\n\n\n\n<h3>jQuery&nbsp;Removed<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5005\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/jquery\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jQuery.jpg\" data-orig-size=\"960,540\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"jQuery\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jQuery-300x169.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jQuery.jpg\" loading=\"lazy\" width=\"960\" height=\"540\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jQuery.jpg\" alt=\"\" class=\"wp-image-5005\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jQuery.jpg 960w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jQuery-300x169.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jQuery-768x432.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p><strong><a href=\"https:\/\/jquery.com\/\">jQuery<\/a>\u00a0<\/strong>is a library that offers a general-purpose abstraction layer for classic web scripting that is efficient in almost any web development requirements. Its extensible nature allows you to access elements in a document without writing a lot of JavaScript, modify the appearance of your content in a web page which developers take advantage of to bridge the gap across all browsers, change the content of a document, respond to a user\u2019s interaction, retrieve information from a server without refreshing a page through AJAX, add animation to your web page, simplify common JavaScript tasks and the list goes\u00a0on.<\/p>\n\n\n\n<p>While Bootstrap has been using jQuery for more than 8 years, jQuery has become quite a large and bloated framework that requires websites using it to download and add trivial load time for a library that may not be used by any other plugin except Bootstrap&nbsp;itself.<\/p>\n\n\n\n<p>As <strong>JavaScript frameworks <\/strong>like <strong>Angular<\/strong>, <strong>Vue <\/strong>and <strong>React <\/strong>dominate the web development community nowadays, jQuery has been losing its popularity as most of these modern frameworks work through the virtual DOM and not on the DOM directly that leads to much faster performance. Although it might sound absurd, it turns out it is much more proficient and anyone using these frameworks will have better control and maintenance over their code than those who use\u00a0jQuery.<\/p>\n\n\n\n<p>Moving forward, any jQuery querying features will have to be done with pure or vanilla JavaScript code in Bootstrap 5 which will help with the file size or weight of the&nbsp;framework.<\/p>\n\n\n\n<h3>Switch to Vanilla&nbsp;JavaScript<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5006\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/vanilla-js\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Vanilla-Js.jpg\" data-orig-size=\"960,540\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Vanilla-Js\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Vanilla-Js-300x169.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Vanilla-Js.jpg\" loading=\"lazy\" width=\"960\" height=\"540\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Vanilla-Js.jpg\" alt=\"\" class=\"wp-image-5006\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Vanilla-Js.jpg 960w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Vanilla-Js-300x169.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Vanilla-Js-768x432.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p>JavaScript is the programming language of the web. Most modern websites are powered by JavaScript and all modern web browsers on desktops, consoles, tablets, games and mobile phones include JavaScript interpreters, which makes JavaScript the most universal programming language in the&nbsp;world.<\/p>\n\n\n\n<p>The removal of jQuery support in Bootstrap 5 gives way to writing efficient vanilla JavaScript code without worrying about the size or adding up any other non-essential functions. While jQuery has been around for a long time, it is completely impossible to use jQuery alone because for the most part, what jQuery does is add a&nbsp;<strong>$<\/strong>&nbsp;object to the global scope, with a lot of functions in it. Even more slick libraries like prototype are not an alternative to JavaScript, but exist only as extra tools to solve common&nbsp;problems.<\/p>\n\n\n\n<p>If you know how JavaScript works from the root, this major change won\u2019t affect you much but for some developers who only know how to use jQuery, this might be a good chance to learn the&nbsp;language.<\/p>\n\n\n\n<h3>Responsive Font&nbsp;Sizes<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5007\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/responsive-font-sizes\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Responsive-Font-Sizes.jpg\" data-orig-size=\"974,661\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Responsive-Font-Sizes\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Responsive-Font-Sizes-300x204.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Responsive-Font-Sizes.jpg\" loading=\"lazy\" width=\"974\" height=\"661\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Responsive-Font-Sizes.jpg\" alt=\"\" class=\"wp-image-5007\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Responsive-Font-Sizes.jpg 974w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Responsive-Font-Sizes-300x204.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Responsive-Font-Sizes-768x521.jpg 768w\" sizes=\"(max-width: 974px) 100vw, 974px\" \/><\/figure>\n\n\n\n<p>Designing a website that looks good across multiple platforms or viewports has been quite challenging for some developers. Media queries have been a great tool to solve typography common problems that allow developers to control the appearance of typographies on web pages by specifying specific font sizes for the typography elements on a specific&nbsp;viewport.<\/p>\n\n\n\n<p>Bootstrap 5 will enable responsive font sizes by default which will automatically resize the typography element according to the size of the user\u2019s viewport through RFS engine or Responsive Font&nbsp;Sizes.<\/p>\n\n\n\n<p>According to&nbsp;<a href=\"https:\/\/github.com\/twbs\/rfs\" target=\"_blank\" rel=\"noreferrer noopener\">RFS repository<\/a>, RFS is a unit resizing engine which was originally developed to resize font sizes. RFS offers the ability to resize basically every value for any CSS property with units, like margin, padding, border-radius or&nbsp;box-shadow.<\/p>\n\n\n\n<p>It is a preprocessor or postprocessor-powered-mechanism that automatically calculates the appropriate font-size values based on the user\u2019s screen size or viewport. It works on known preprocessors or postprocessor tools such as Sass, Less, Stylus or&nbsp;PostCSS.<\/p>\n\n\n\n<p>As an example, assuming that you have a&nbsp;<strong>hero-title<\/strong>&nbsp;class which is a class for your h1 tag element that you want to use for your main title on the hero section. Using&nbsp;<a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sass<\/a>&nbsp;the following mixin will do the&nbsp;trick:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><code>.hero-title {<\/code><code>@include font-size(<\/code><code>4<\/code><code>rem);<\/code><code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>This will be compiled to&nbsp;this:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><code>.hero-title {<\/code><code>font-size<\/code><code>: calc(<\/code><code>1.525<\/code><code>rem + <\/code><code>3.3<\/code><code>vw);<\/code><code>}<\/code><code>@media (<\/code><code>min-width<\/code><code>: <\/code><code>1200px<\/code><code>) {<\/code><code>.hero-title {<\/code><code>font-size<\/code><code>: <\/code><code>4<\/code><code>rem;<\/code><code>}<\/code><code>}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3>Drop Internet Explorer 10 and 11&nbsp;Support<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5008\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/internet-explorer\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Internet-Explorer.jpg\" data-orig-size=\"960,540\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Internet-Explorer\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Internet-Explorer-300x169.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Internet-Explorer.jpg\" loading=\"lazy\" width=\"960\" height=\"540\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Internet-Explorer.jpg\" alt=\"\" class=\"wp-image-5008\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Internet-Explorer.jpg 960w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Internet-Explorer-300x169.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Internet-Explorer-768x432.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p>In <strong>1995<\/strong>, <strong>Microsoft released <\/strong>the\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/support.microsoft.com\/en-us\/hub\/4230784\/internet-explorer-help\" target=\"_blank\"><strong>Internet Explorer<\/strong><\/a>\u00a0which blew everyone\u2019s mind because for the first time there was a <strong>browser <\/strong>that supported CSS and Java applets that made it one of the most widely used web browsers back in 2003 with 95% usage\u00a0share.<\/p>\n\n\n\n<p>Fast forward to 2020, Internet Explorer is no longer relevant with Chrome, Firefox, and Edge. In fact, it became one of the web designer\u2019s nightmares since it doesn\u2019t support modern JavaScript standards. In order to work with Internet Explorer, be it 10 or 11, JavaScript codes need to be compiled to ES5 instead of ES6, which increases the size of your projects up to 30%. This obviously limits your ability to use the features of ES6 or newer JavaScript standards. What\u2019s even worse is it doesn\u2019t support a lot of modern CSS properties which limits your modern web design&nbsp;potential.<\/p>\n\n\n\n<p>In Bootstrap 5, the Bootstrap team decided to drop the support for Internet Explorer 10 and 11 which is a pretty good move as it will enable web designers and developers focus more on designing modern web pages without having to worry about breaking any piece of codes on old browsers or increasing the size of every&nbsp;project.<\/p>\n\n\n\n<h3>Change Gutter Width Unit of&nbsp;Measurement<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5009\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/grid-system\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Grid-System.jpg\" data-orig-size=\"1920,1029\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Grid-System\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Grid-System-300x161.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Grid-System-1024x549.jpg\" loading=\"lazy\" width=\"1024\" height=\"549\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Grid-System-1024x549.jpg\" alt=\"\" class=\"wp-image-5009\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Grid-System-1024x549.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Grid-System-300x161.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Grid-System-768x412.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Grid-System-1400x750.jpg 1400w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Grid-System.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>CSS offers ways to specify sizes or lengths of elements using various units of measurement such as px, em, rem, % vw, and vh. While pixels or px is considered to be widely known and used for its absolute units, relative to DPI and resolution of the viewing device, it does not change based on any other element which is not good for modern responsive web&nbsp;design.<\/p>\n\n\n\n<p>Bootstrap has been using px for its gutter width for quite a long time which will no longer be the case in Bootstrap 5. According to the fixes made on Bootstrap 5\u2019s official&nbsp;<a href=\"https:\/\/github.com\/twbs\/bootstrap\/pull\/28517\" target=\"_blank\" rel=\"noreferrer noopener\">Github project tracking board<\/a>, the gutter width will now be on&nbsp;<strong>rem&nbsp;<\/strong>instead of&nbsp;<strong>px<\/strong>.<\/p>\n\n\n\n<p>Rem stands for \u201croot em\u201d which means equal to the calculated value of font-size on the root element. For instance, 1 rem is equal to the font size of the HTML element (most browsers have a default value of&nbsp;16px).<\/p>\n\n\n\n<h3>Remove Card\u00a0Decks<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5010\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/card-decks\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Card-Decks.jpg\" data-orig-size=\"1199,486\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Card-Decks\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Card-Decks-300x122.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Card-Decks-1024x415.jpg\" loading=\"lazy\" width=\"1024\" height=\"415\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Card-Decks-1024x415.jpg\" alt=\"\" class=\"wp-image-5010\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Card-Decks-1024x415.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Card-Decks-300x122.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Card-Decks-768x311.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Card-Decks.jpg 1199w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In <strong>Bootstrap 4<\/strong>, in order for you to be able to set equal width and height cards that aren\u2019t attached to one another, you need to use card decks as shown\u00a0below.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><code>&lt;<\/code><code>div<\/code> <code>class=\u201dcard-deck\u201d&gt;<\/code><code>&lt;<\/code><code>div<\/code> <code>class=\u201dcard\u201d&gt;<\/code><code>&lt;<\/code><code>img<\/code> <code>class=\u201dcard-img-top\u201d src=\u201d\u2026\u201d alt=\u201dCard image cap\u201d&gt;<\/code><code>&lt;<\/code><code>div<\/code> <code>class=\u201dcard-body\u201d&gt;<\/code><code>&lt;<\/code><code>h5<\/code> <code>class=\u201dcard-title\u201d&gt;Card title&lt;\/<\/code><code>h5<\/code><code>&gt;<\/code><code>&lt;<\/code><code>p<\/code> <code>class=\u201dcard-text\u201d&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;\/<\/code><code>p<\/code><code>&gt;<\/code><code>&lt;<\/code><code>p<\/code> <code>class=\u201dcard-text\u201d&gt;&lt;<\/code><code>small<\/code> <code>class=\u201dtext-muted\u201d&gt;Last updated 3 mins ago&lt;\/<\/code><code>small<\/code><code>&gt;&lt;\/<\/code><code>p<\/code><code>&gt;<\/code><code>&lt;\/<\/code><code>div<\/code><code>&gt;<\/code><code>&lt;\/<\/code><code>div<\/code><code>&gt;<\/code><code>&lt;<\/code><code>div<\/code> <code>class=\u201dcard\u201d&gt;<\/code><code>&lt;<\/code><code>img<\/code> <code>class=\u201dcard-img-top\u201d src=\u201d\u2026\u201d alt=\u201dCard image cap\u201d&gt;<\/code><code>&lt;<\/code><code>div<\/code> <code>class=\u201dcard-body\u201d&gt;<\/code><code>&lt;<\/code><code>h5<\/code> <code>class=\u201dcard-title\u201d&gt;Card title&lt;\/<\/code><code>h5<\/code><code>&gt;<\/code><code>&lt;<\/code><code>p<\/code> <code>class=\u201dcard-text\u201d&gt;This card has supporting text below as a natural lead-in to additional content.&lt;\/<\/code><code>p<\/code><code>&gt;<\/code><code>&lt;<\/code><code>p<\/code> <code>class=\u201dcard-text\u201d&gt;&lt;<\/code><code>small<\/code> <code>class=\u201dtext-muted\u201d&gt;Last updated 3 mins ago&lt;\/<\/code><code>small<\/code><code>&gt;&lt;\/<\/code><code>p<\/code><code>&gt;<\/code><code>&lt;\/<\/code><code>div<\/code><code>&gt;<\/code><code>&lt;\/<\/code><code>div<\/code><code>&gt;<\/code><code>&lt;<\/code><code>div<\/code> <code>class=\u201dcard\u201d&gt;<\/code><code>&lt;<\/code><code>img<\/code> <code>class=\u201dcard-img-top\u201d src=\u201d\u2026\u201d alt=\u201dCard image cap\u201d&gt;<\/code><code>&lt;<\/code><code>div<\/code> <code>class=\u201dcard-body\u201d&gt;<\/code><code>&lt;<\/code><code>h5<\/code> <code>class=\u201dcard-title\u201d&gt;Card title&lt;\/<\/code><code>h5<\/code><code>&gt;<\/code><code>&lt;<\/code><code>p<\/code> <code>class=\u201dcard-text\u201d&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.&lt;\/<\/code><code>p<\/code><code>&gt;<\/code><code>&lt;<\/code><code>p<\/code> <code>class=\u201dcard-text\u201d&gt;&lt;<\/code><code>small<\/code> <code>class=\u201dtext-muted\u201d&gt;Last updated 3 mins ago&lt;\/<\/code><code>small<\/code><code>&gt;&lt;\/<\/code><code>p<\/code><code>&gt;<\/code><code>&lt;\/<\/code><code>div<\/code><code>&gt;<\/code><code>&lt;\/<\/code><code>div<\/code><code>&gt;<\/code><code>&lt;\/<\/code><code>div<\/code><code>&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>In <strong>Bootstrap 5<\/strong>, the Bootstrap team removed the card decks since the new grid system offers more responsive control. Hence, removing unnecessary extra classes that can be solved via\u00a0grid.<\/p>\n\n\n\n<h3>Navbar&nbsp;Optimization<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5011\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/navbar-optimization\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Navbar-Optimization.jpg\" data-orig-size=\"1179,228\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Navbar-Optimization\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Navbar-Optimization-300x58.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Navbar-Optimization-1024x198.jpg\" loading=\"lazy\" width=\"1024\" height=\"198\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Navbar-Optimization-1024x198.jpg\" alt=\"\" class=\"wp-image-5011\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Navbar-Optimization-1024x198.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Navbar-Optimization-300x58.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Navbar-Optimization-768x149.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Navbar-Optimization.jpg 1179w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The\u00a0Bootstrap navbar component\u00a0is a principal part of Bootstrap that gets used all the time. In previous versions of Bootstrap, you need to have a decent amount of markup in order to make it work. However, in Bootstrap 4 they simplified this through the use of a\u00a0<strong>nav\u00a0<\/strong>or\u00a0<strong>div\u00a0<\/strong>HTML element and unordered list. The navbar class is the default class that always needs to appear on the\u00a0component.<\/p>\n\n\n\n<p>By default, Bootstrap 4 uses inline-block on its display option but in Bootstrap 5, it was removed. They also used flex shorthand and removed the brand margin caused by requiring containers in navbars. Aside from this, they have also implemented a dark dropdown via&nbsp;<strong>dropdown-menu-dark&nbsp;<\/strong>class that turns the dropdown into a black background which we usually see on navbar dropdown&nbsp;items.<\/p>\n\n\n\n<h3>Custom SVG Icon&nbsp;Library<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5012\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/custom-svg-icon-library\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Custom-SVG-Icon-Library.jpg\" data-orig-size=\"1163,711\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Custom-SVG-Icon-Library\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Custom-SVG-Icon-Library-300x183.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Custom-SVG-Icon-Library-1024x626.jpg\" loading=\"lazy\" width=\"1024\" height=\"626\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Custom-SVG-Icon-Library-1024x626.jpg\" alt=\"\" class=\"wp-image-5012\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Custom-SVG-Icon-Library-1024x626.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Custom-SVG-Icon-Library-300x183.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Custom-SVG-Icon-Library-768x470.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Custom-SVG-Icon-Library.jpg 1163w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In version 3 of Bootstrap, there are 250 reusable icon components in the font format called&nbsp;<a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/components\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u201cGlyphicons\u201d<\/a>&nbsp;created to provide iconography to input groups, alert, dropdowns and to other useful Bootstrap&nbsp;components.<\/p>\n\n\n\n<p>However, in Bootstrap 4 it was totally scrapped and web designers and developers need to rely on free icon fonts like Font Awesome or use their own custom SVG icons in order to add value to their web&nbsp;design.<\/p>\n\n\n\n<p>In Bootstrap 5, there\u2019s a brand new SVG icon library crafted carefully by&nbsp;<strong>Mark Otto<\/strong>, co-founder of Bootstrap. Before the official release of Bootstrap 5, these icons can now be added and used to your project at this moment of time. You can visit this&nbsp;<a href=\"https:\/\/icons.getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">page<\/a>&nbsp;to learn&nbsp;more.<\/p>\n\n\n\n<h3>Switching from Jekyll to&nbsp;Hugo<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5013\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/jekyll-hugo\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jekyll-hugo.jpg\" data-orig-size=\"960,540\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"jekyll-hugo\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jekyll-hugo-300x169.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jekyll-hugo.jpg\" loading=\"lazy\" width=\"960\" height=\"540\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jekyll-hugo.jpg\" alt=\"\" class=\"wp-image-5013\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jekyll-hugo.jpg 960w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jekyll-hugo-300x169.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/jekyll-hugo-768x432.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/jekyllrb.com\/\" target=\"_blank\"><strong>Jekyll\u00a0<\/strong><\/a>is a free and open-source\u00a0static site generator. If you know how WordPress, Joomla or Drupal works, then, you probably have an idea of how it works. Jekyll is used to build websites with easy to use navigation, website components and generates all the content at once. Jekyll basically provides page templates such as navigation and footers that will reflect on all of your web pages. These templates are merged with other files with definite information (for instance, a file for each blog post on your website) to generate full HTML pages for website users to\u00a0see.<\/p>\n\n\n\n<p>Bootstrap 4 has been a great tool to integrate with Jekyll through Sass (Syntactically Awesome Style Sheets) but in Bootstrap 5, a major switch from Jekyll to Hugo is&nbsp;anticipated.<\/p>\n\n\n\n<p><strong><a rel=\"noreferrer noopener\" href=\"https:\/\/gohugo.io\/\" target=\"_blank\">Hugo<\/a>\u00a0<\/strong>is described as \u201cA Fast and Flexible Static Site Generator built with love by spf13 in GoLang\u201d. Similar to Jekyll, it is a static site generator but written in Go language. A possible reason for the switch is that Hugo is lightning fast, easy to use and configurable. Compared with Jekyll, it has a great integration with the popular web host and can organize your content with any URL\u00a0structure.<\/p>\n\n\n\n<h3>Class&nbsp;Updates<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"5014\" data-permalink=\"https:\/\/azoora.com\/blog\/framework\/bootstrap-5-whats-new-about-it-and-release-date\/attachment\/class-updates\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Class-Updates.jpg\" data-orig-size=\"1209,357\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Class-Updates\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Class-Updates-300x89.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Class-Updates-1024x302.jpg\" loading=\"lazy\" width=\"1024\" height=\"302\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Class-Updates-1024x302.jpg\" alt=\"\" class=\"wp-image-5014\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Class-Updates-1024x302.jpg 1024w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Class-Updates-300x89.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Class-Updates-768x227.jpg 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Class-Updates.jpg 1209w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Of course, Bootstrap 5 will not be interesting without the new Bootstrap CSS class. Bootstrap 4 has more than 1,500 CSS classes. There will be some CSS class that will no longer be available in the new version and some CSS class that will be&nbsp;added.<\/p>\n\n\n\n<p>Some of the CSS classes that are already removed, according to the Bootstrap 5\u2019s official Github project tracking board&nbsp;are:<\/p>\n\n\n\n<ul><li>form-row<\/li><li>form-inline<\/li><li>list-inline<\/li><li>card-deck<\/li><\/ul>\n\n\n\n<p>Here are some new Bootstrap 5 CSS class&nbsp;added:<\/p>\n\n\n\n<ul><li>gx-* classes control the horizontal\/column gutter width<\/li><li>gy-* classes control the vertical\/row gutter width<\/li><li>g-* classes control the horizontal &amp; vertical gutter width<\/li><li>row-cols-auto<\/li><\/ul>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>One of the frustrating experiences of being a developer is reinventing the base HTML, CSS, and JavaScript for each project. While some prefer to write their own code, it still makes sense to just use an existing framework like&nbsp;Bootstrap.<\/p>\n\n\n\n<p>With all the <strong>new updates coming<\/strong> in <strong>Bootstrap 5<\/strong>, it\u2019s safe to say that the Bootstrap team is making huge steps to make the framework lightweight, simple, useful and faster for the developer\u2019s\u00a0benefit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap, the most popular front-end framework built to design modern, responsive, and dynamic interfaces for professional design web pages, is currently undertaking a major update, Bootstrap\u00a05. Bootstrap 5 alpha\u00a0was officially released on June 16, 2020 after several months of refining. With all of the major changes in this version, the Bootstrap 5 development team informed [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5015,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[145,7,77,119],"tags":[107,146,28,73,122,217],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Bootstrap-5.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1iI","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5004"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5004"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5004\/revisions"}],"predecessor-version":[{"id":5016,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5004\/revisions\/5016"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}