{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/guest-post/bootstrap4-vs-bootstrap5/","result":{"data":{"markdownRemark":{"id":"0cec5fff-69d1-58a0-b1c9-65f6f00a046b","excerpt":"Introduction Bootstrap is an open-source tool collection for creating responsive web pages and web apps. It is the combination of HTML, CSS, and JavaScript…","html":"

Introduction

\n

Bootstrap is an open-source tool collection for creating responsive web pages and web apps. It is the combination of HTML, CSS, and JavaScript framework that makes it easy to develop responsive, mobile-first websites. It mainly aims to resolve the cross-browser compatibility issue. Bootstrap is at the core of every website that is perfect for all screen sizes and looks perfect in every modern browser.

\n

Getting Started with Bootstrap

\n

In order to start using Bootstrap in your web pages, you need to add a few CSS and JS tags in your template file.

\n
CSS Link tag\n\n<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
\n
JS Link tag\n\n<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>\n\n<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>\n\n<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
\n
\n

NOTE: Always add the jquery script first, followed by the popper and bootstrap scripts. Then you can add any of your custom scripts below them.

\n
\n

Bootstrap Versions

\n

The developers have been working continuously to enrich the developer experience of using Bootstrap for customizing the web pages quite easily. They've released many minor and major versions. But the major releases that are the most popular are the Bootstrap v4.x and Bootstrap v5.x. Let's look at what all v4.x offered and how those things evolved in the v5.x release with additional features.

\n

Bootstrap v4.x

\n

Bootstrap 4 was launched back in January 2018, and it was a great improvement over the existing previous versions. However, the most loved features included the following.

\n\n

Bootstrap v5.x

\n

Bootstrap 5 came into play back in May 2021. This release was launched after several iterations of alpha and beta releases and hence had a stack of major additions and new features. Some of the most talked about features are listed below.

\n\n

Let's dive into its features by comparing how things changed in Bootstrap 5 and understanding what better design perspectives it offers for developers.

\n

Bootstrap 5 vs. Bootstrap 4

\n

The above section talked about the features of both Bootstrap 4 and Bootstrap 5. This section talks about the upgrades that Bootstrap 5 provides over Bootstrap 4.

\n

Enhanced Grid System

\n

The grid system is retained in Bootstrap 5. However, an extra grid tier xxl has been introduced to minimize the effort in making the pages responsive on higher resolution displays.

\n

Columns don't have a default relative position in Bootstrap 5.

\n

Classes have been added to address vertical spacing.

\n

Enhanced Form Elements

\n

The form elements in Bootstrap 4 have defaulted to the browser-provided view. However, in Bootstrap 5, the form elements have a custom design that enables them to have a consistent look and feel in all browsers.

\n

The new form controls are based on completely semantic, standard form controls. This helps developers to avoid adding extra markups for form controls.

\n

Utilities API

\n

Unlike Bootstrap 4, Bootstrap 5 enables the developers to modify and create their own utilities.

\n

You can simply use sass to create your own utilities.

\n

You can use the state option to generate dummy class variations like hover and focus.

\n
$utilities: (\n  "opacity": (\n    property: opacity,\n    class: opacity,\n    state: hover,\n    values: (\n      0: 0,\n      25: .25,\n      50: .5,\n      75: .75,\n      100: 1,\n    )\n  )\n);
\n

Support for IE

\n

Bootstrap 5 no longer supports Internet Explorer 10 and 11 like its predecessor, Bootstrap 4.

\n

Extended Colors

\n

Bootstrap 4 had limited color options. But Bootstrap 5 has included many new color options to its color palette, enabling you to choose from the various shades available. You can find some of the color shades below.

\n

\n \n \n

\n

Bootstrap Icons

\n

Bootstrap 4 didn't have an SVG icon library. You had to use other third-Party libraries like Font Awesome to use icons in your applications. But Bootstrap 5 has taken care of this issue by introducing its own SVG library with 1000+ icons.

\n

It also includes a web font version in the stable version release of the icon library.

\n

\n \n \n

\n

Site Generation Strategy

\n

Bootstrap 5 has moved to Hugo for its static site generation over Jekyll. Hugo is a fast static site generator implemented in Go and is quite popular. You can learn more about Hugo here.

\n

Popper.js Update

\n

Bootstrap 5 update brings in an update for Popper.js as well, Popper.js v2. Popper.js generally helps to design the tooltips and popovers. With v2, the following changes come in:

\n\n

Placeholder Components

\n

Bootstrap 5 allows loading placeholders in your pages. This means that you can utilize the space of the components by showing placeholders in their place while they're still loading the actual content.

\n

\n \n \n

\n

RTL Support

\n

Bootstrap 5 has added support for RTL (Right-to-Left), which means you can develop content that needs writing from the right side of the page and continues to the left. As a result, websites in languages like Arabic, Sindhi, and Urdu can easily be developed.

\n

\n \n \n

\n

jQuery Deprecation

\n

Bootstrap used jQuery from the very beginning as a dependency to offer dynamic features. With Bootstrap 5, jQuery is dropped, and Vanilla JS is introduced as its replacement.

\n
\n

NOTE: There are still JS dependencies that depend on Popper and Vanilla JS modules. However, jQuery is optional and can be added based on the requirement of the project.

\n
\n

Other Significant Changes

\n\n

\n \n

This is all for this blog post at the moment. I hope you had a great time reading this and learned something new. Do let me know in the comments if you liked the content.

\n
\n

NOTE: All the images used in this blog post are taken from the official Bootstrap website and are used here for reference purposes only.

\n
\n","headings":[{"value":"Introduction","depth":2},{"value":"Getting Started with Bootstrap","depth":2},{"value":"Bootstrap Versions","depth":2},{"value":"Bootstrap v4.x","depth":3},{"value":"Flexbox Grid","depth":4},{"value":"Grid Tiers","depth":4},{"value":"Syntactically Awesome Style Sheets (Sass)","depth":4},{"value":"Cards","depth":4},{"value":"Spacing Utilities","depth":4},{"value":"Bootstrap v5.x","depth":3},{"value":"Enhanced Grid System","depth":4},{"value":"Enhanced Form elements","depth":4},{"value":"Utilities API","depth":4},{"value":"Support for IE","depth":4},{"value":"Extended Colors","depth":4},{"value":"Bootstrap Icons","depth":4},{"value":"Bootstrap 5 vs. Bootstrap 4","depth":2},{"value":"Enhanced Grid System","depth":3},{"value":"Enhanced Form Elements","depth":3},{"value":"Utilities API","depth":3},{"value":"Support for IE","depth":3},{"value":"Extended Colors","depth":3},{"value":"Bootstrap Icons","depth":3},{"value":"Site Generation Strategy","depth":3},{"value":"Popper.js Update","depth":3},{"value":"Placeholder Components","depth":3},{"value":"Floating Labels","depth":3},{"value":"RTL Support","depth":3},{"value":"jQuery Deprecation","depth":3},{"value":"Other Significant Changes","depth":3},{"value":"Summary","depth":2}],"fields":{"slug":"/engineering/guest-post/bootstrap4-vs-bootstrap5/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"This article discusses the differences between Bootstrap 4 and Bootstrap 5 and helps you understand which version you should use for your projects.","title":"Bootstrap 4 vs. Bootstrap 5: What is the Difference?","canonical":null,"date":"October 21, 2021","updated_date":null,"tags":["Bootstrap","Frontend","Sass"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/8f7ef876ee3ee88f8ddb1becc34c70fa/03979/coverImage.png","srcSet":"/static/8f7ef876ee3ee88f8ddb1becc34c70fa/f5f11/coverImage.png 200w,\n/static/8f7ef876ee3ee88f8ddb1becc34c70fa/6d133/coverImage.png 400w,\n/static/8f7ef876ee3ee88f8ddb1becc34c70fa/03979/coverImage.png 800w,\n/static/8f7ef876ee3ee88f8ddb1becc34c70fa/aca38/coverImage.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rutam Prita Mishra","github":"Rutam21","bio":"He is a full-stack Java developer and a passionate tech geek who is currently exploring the open source world. He loves writing technical documentation and articles in his free time. He is also an avid traveller and loves to explore different places and their cuisines.","avatar":null}}}},"pageContext":{"id":"0cec5fff-69d1-58a0-b1c9-65f6f00a046b","fields__slug":"/engineering/guest-post/bootstrap4-vs-bootstrap5/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}