{"id":5164,"date":"2021-10-19T05:49:36","date_gmt":"2021-10-19T05:49:36","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5164"},"modified":"2021-10-19T05:51:02","modified_gmt":"2021-10-19T05:51:02","slug":"what-is-new-in-bootstrap-5","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/","title":{"rendered":"What is New in Bootstrap 5?"},"content":{"rendered":"<h2>Bootstrap<\/h2>\n<p>Bootstrap is the popular framework for making responsive application development for the web and mobile. Bootstrap includes HTML- and CSS-based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc. I will see other libraries that were built based on Bootstrap lately. I think currently everyone must have worked with Bootstrap in your journey as a software developer, and now it\u2019s time to explore the most recent version. Bootstrap 5&#8217;s alpha version was released recently, and in this blog, I&#8217;ll discuss five of its major features.<\/p>\n<h3>1. Grid System is Modified<\/h3>\n<p>The grid system is one of the framework\u2019s main attractions, and with the latest Bootstrap release, the Bootstrap team has increased its grid system capabilities.<\/p>\n<ul>\n<li>A new extra size (xxl) grid tier has been added in Bootstrap 5.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-1.png\" alt=\"Bootstrap 1\" width=\"512\" height=\"210\" class=\"alignnone size-full wp-image-5166\" srcset=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-1.png 512w, https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-1-300x123.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/li>\n<\/ul>\n<h3>2. Updated Input UI in Form Controls<\/h3>\n<p>Bootstrap 5 has improved its form controls, input groups, and etc. Bootstrap 4  was using custom form controls in addition to the defaults provided by each browser. In v5, these are all now customized. All the checkboxes, radio buttons, switches and more to give them the same look and behavior across different browsers.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-2.png\" alt=\"Bootstrap 2\" width=\"512\" height=\"296\" class=\"alignnone size-full wp-image-5168\" srcset=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-2.png 512w, https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-2-300x173.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-3.png\" alt=\"Bootstrap 3\" width=\"512\" height=\"296\" class=\"alignnone size-full wp-image-5169\" srcset=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-3.png 512w, https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-3-300x173.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-4.png\" alt=\"Bootstrap4\" width=\"512\" height=\"404\" class=\"alignnone size-full wp-image-5170\" srcset=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-4.png 512w, https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-4-300x237.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/p>\n<p>Find more information: <a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/forms\/overview\/\">Bootstrap 5 Form<\/a><\/p>\n<h3>3. Customizing Docs<\/h3>\n<p>As I discussed at the start, an outsized number of libraries are created by extending Bootstrap. With the latest, Bootstrap is prepared to support extending Bootstrap quite even with the new <a href=\"https:\/\/v5.getbootstrap.com\/docs\/5.0\/customize\/overview\/\">Customization Section<\/a>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-5.png\" alt=\"Bootstrap5\" width=\"512\" height=\"298\" class=\"alignnone size-full wp-image-5171\" srcset=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-5.png 512w, https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/Bootstrap-5-300x175.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/p>\n<h3>4. Custom CSS Properties<\/h3>\n<p>In the previous Bootstrap, CSS custom properties were only included in a limited root variable for colors and fonts. But with version 5, they are available in <a href=\"https:\/\/studysection.com\/blog\/components-of-hadoop-architecture\/\">components<\/a> and layout options as well. Let&#8217;s see the example they have provided in the documentation:<br \/>\n<strong>For Example: <\/strong><br \/>\n<em>:root {  &#8211;main-bg-color: brown;}<br \/>\n.one {  background-color: var(&#8211;main-bg-color);}<br \/>\n.two {  background-color: black;}<br \/>\n.three {  background-color: var(&#8211;main-bg-color);}<br \/>\n.four {  background-color: var(&#8211;main-bg-color);}<br \/>\n.five {  background-color: var(&#8211;main-bg-color);}<\/em><\/p>\n<h3>5. jQuery is no longer a dependency<\/h3>\n<p>As a serious change from the previous versions, jQuery isn&#8217;t any longer a dependency of Bootstrap. Now, you can use the latest Bootstrap in its full brilliance without it, but you still need Popper.js. This change makes it easier to use Bootstrap5 in projects that don\u2019t require or use jQuery \u2014 like when using Bootstrap with React. You can still use jQuery with Bootstrap if it\u2019s a section of your website.<br \/>\nIf Bootstrap detects a jQuery error in the window object, it will automatically add all missing components to jQuery\u2019s plugin system. So, if you\u2019re migrating from Bootstrap 4 to Bootstrap 5, you don\u2019t worry about this variation, and you&#8217;ll still use jQuery with Bootstrap as necessary.<\/p>\n<p><strong>Note:<\/strong> To get more info please go through Bootstrap official Website: <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap 5<\/a>.<br \/>\n<small>Microsoft Windows 10 is a widely used operating system in computers all over the world. If you have skills in Microsoft Windows 10 then you can get a <a href=\"https:\/\/www.studysection.com\/windows-10-advanced\">Windows 10 Certification<\/a> from StudySection which can help you in getting hired. A beginner level certification exam for newbies and an advanced level certification exam for experts is available on StudySection.<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap Bootstrap is the popular framework for making responsive application development for the web and mobile. Bootstrap includes HTML- and<\/p>\n","protected":false},"author":1,"featured_media":5173,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[162],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is New in Bootstrap 5?<\/title>\n<meta name=\"description\" content=\"Bootstrap is a popular framework for responsive application development. Bootstrap 5 includes HTML and CSS-based design templates.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is New in Bootstrap 5?\" \/>\n<meta property=\"og:description\" content=\"Bootstrap is a popular framework for responsive application development. Bootstrap 5 includes HTML and CSS-based design templates.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-19T05:49:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-19T05:51:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/What-is-new-in-Bootstrap-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"450\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"What is New in Bootstrap 5?\",\"datePublished\":\"2021-10-19T05:49:36+00:00\",\"dateModified\":\"2021-10-19T05:51:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/\"},\"wordCount\":497,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Bootstrap\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/\",\"url\":\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/\",\"name\":\"What is New in Bootstrap 5?\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-10-19T05:49:36+00:00\",\"dateModified\":\"2021-10-19T05:51:02+00:00\",\"description\":\"Bootstrap is a popular framework for responsive application development. Bootstrap 5 includes HTML and CSS-based design templates.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is New in Bootstrap 5?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is New in Bootstrap 5?","description":"Bootstrap is a popular framework for responsive application development. Bootstrap 5 includes HTML and CSS-based design templates.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/","og_locale":"en_US","og_type":"article","og_title":"What is New in Bootstrap 5?","og_description":"Bootstrap is a popular framework for responsive application development. Bootstrap 5 includes HTML and CSS-based design templates.","og_url":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-10-19T05:49:36+00:00","article_modified_time":"2021-10-19T05:51:02+00:00","og_image":[{"width":450,"height":300,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/What-is-new-in-Bootstrap-5.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"What is New in Bootstrap 5?","datePublished":"2021-10-19T05:49:36+00:00","dateModified":"2021-10-19T05:51:02+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/"},"wordCount":497,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Bootstrap"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/","url":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/","name":"What is New in Bootstrap 5?","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-10-19T05:49:36+00:00","dateModified":"2021-10-19T05:51:02+00:00","description":"Bootstrap is a popular framework for responsive application development. Bootstrap 5 includes HTML and CSS-based design templates.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/what-is-new-in-bootstrap-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is New in Bootstrap 5?"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":336,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5164"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=5164"}],"version-history":[{"count":7,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5164\/revisions"}],"predecessor-version":[{"id":5177,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5164\/revisions\/5177"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/5173"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=5164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=5164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=5164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}