bootstrap 5 safari support

Bootstrap 5: Handling Cross-Browser Compatibility Issues

Common Cross-Browser Issues with Bootstrap 5

Despite the advancements in web standards, browsers interpret CSS and HTML differently. This means that a feature or layout that looks perfect in one browser might break in another. Some common issues include:

• Alignment and spacing inconsistencies
• Variations in font rendering
• Different interpretations of CSS3 properties
• JavaScript execution discrepancies

Strategies for Ensuring Compatibility

To address these issues, developers should employ several strategies:

• Normalize CSS: Use a reset or normalize stylesheet to reduce browser inconsistencies.
• Prefixed CSS Properties: Utilize tools like Autoprefixer to add vendor prefixes automatically.
• Feature Detection: Implement feature detection with Modernizr to tailor experiences based on browser capabilities.
• Polyfills: Where necessary, use polyfills to emulate missing features.
• Cross-Browser Testing: Regularly test your site on different browsers and devices.

Bootstrap 5 Specific Tips

In the context of Bootstrap 5, here are additional tips to consider:

• Use the provided CSS Custom Properties: Bootstrap 5 introduces custom properties that can be overridden for customization and compatibility.
• Responsive Classes: Leverage Bootstrap's responsive utility classes to ensure layouts adapt across devices.

Troubleshooting with Browser Developer Tools

Browsers come equipped with developer tools that are invaluable for debugging compatibility issues. These tools allow you to inspect elements, modify CSS on-the-fly, and view JavaScript logs. By using these tools, you can quickly identify and resolve problems specific to each browser.

Code Example: Resolving a Flexbox Issue

This snippet ensures that flex containers work across different browser versions by providing fallbacks.

The Role of Professional Developers

Tackling cross-browser compatibility can be complex, which is why many businesses opt to hire bootstrap developers who specialize in creating robust solutions that work across all platforms. A skilled developer will save time and reduce headaches by preemptively addressing potential issues during development.

If you're interested in enhancing this article or becoming a contributing author, we'd love to hear from you.

Please contact Sasha at [email protected] to discuss the opportunity further or to inquire about adding a direct link to your resource. We welcome your collaboration and contributions!

What’s New in Bootstrap 5

Share this article

When to Use Bootstrap (and when not)

Upgrading from bootstrap 4 to 5.

• What’s Changed
• What’s Been Dropped
• What’s New

Frequently Asked Questions (FAQs) about Bootstrap 5

Bootstrap is one of the most popular CSS libraries. It allows developers to easily use beautiful styles and components and create responsive websites. Using Bootstrap can save developers time, especially with components that are used in almost every project.

Bootstrap 5 (the current major version, released in May 2021) has brought with it tons of changes and improvements, including the addition of new components, new classes, new styling for old components, updated browser support, the removal of some old components, and much more.

In this article, we’ll cover what has changed in Bootstrap 5, what has been dropped, and, most excitingly, what’s new.

Bootstrap bills itself as “the world’s most popular framework for building responsive, mobile-first sites”, and with 152k stars on GitHub, I don’t think that claim is too far-fetched. Especially for beginners, Bootstrap is a great way to start creating modern and clean websites. It makes it easy to realize complicated, mobile-first designs and provides many components that you’ll likely need across multiple projects.

Bootstrap has a low learning curve and lends itself well to static websites that don’t require a build step, as you can just reference the library from Bootstrap’s CDN. This is in contrast to some other popular CSS frameworks that might be optimized for use with a bundler or task runner.

You should also be aware, however, that Bootstrap isn’t a silver bullet. For the uninitiated, Bootstrap makes it easy to produce messy and convoluted markup. It’s also a relatively heavy library in terms of kilobytes (although this is improving with each release), so it might not be the best choice if you’re only using one or two of its features. As with any abstraction, it will help enormously if you have a good grasp of the underlying technology and can make an informed decision on when to use it.

Upgrading from Bootstrap 4 to 5 is generally pretty easy. Most of the components, their classes and utility classes that were available in Bootstrap 4 are still available in Bootstrap 5. The main thing you should focus on when migrating is whether or not the classes or components you’re using have been dropped . If they’ve been dropped, there are replacements or ways to achieve the same result using utility classes. The second thing you should focus on is switching from data-* attributes to data-bs-* in components that require JavaScript as a part of their functionalities. (We’ll cover this more in the next section.)

If you use Bootstrap’s Sass files, there are some variables and mixins that have been renamed. Bootstrap 5 has an extensive and detailed section all about customization , as well as details about the Sass variables and mixins for each component in their respective documentation pages.

What’s Changed

Bootstrap 5 brings core changes to Bootstrap as a library, with a change in required dependencies, browser support and more. It also brings changes to the components and classes that we’ve always used in previous versions.

jQuery no longer a dependency

As a major change from the previous versions, jQuery is no longer a dependency of Bootstrap. Now, you can use Bootstrap in its full glory without it, but you still need Popper.js. This change makes it easier to use Bootstrap in projects that don’t require or use jQuery — such as when using Bootstrap with React.

You can still use jQuery with Bootstrap if it’s a part of your website. If Bootstrap detects jQuery in the window object, it will automatically add all components to jQuery’s plugin system. So, if you’re migrating from v4 to v5, you don’t need to worry about this change, and you can still use jQuery with Bootstrap as necessary.

But what if you use jQuery in your website, but you don’t want Bootstrap to use jQuery? You can do that by adding the attribute data-bs-no-jquery to the body element of the document:

How does Bootstrap work without jQuery? For example, in v4 you would use the following code in JavaScript to create a Toast element:

In Bootstrap 5, you can use that same code to create a Toast element if your website already uses jQuery. Without jQuery, you’ll need to use something like the following code to create a Toast element:

This just uses Vanilla JavaScript to query the document for elements having a .toast class, then initializes a Toast component on the element using new bootstrap.Toast() .

Browser support change

Up until v4, Bootstrap used to support Internet Explorer (IE) 10 and 11. As of Bootstrap 5, support for IE has been fully dropped. So, if you need to support IE in your website, you probably should be careful when migrating to v5.

Other changes in browser support include:

• Firefox and Chrome support now starting from version 60
• Safari and iOS support now starting from version 12
• Android Browser and WebView support now starting from version 6

Change in data attributes

Bootstrap 5 has changed the naming of the data attributes that are generally used by its components that use JavaScript as part of their functionality. Previously, most components that relied on some JavaScript functionalities would have data attributes starting with data- . For example, to create a Tooltip component in Bootstrap 4:

Notice the usage of data-toggle and data-placement . In Bootstrap 5, data attributes for these components now start with data-bs to easily namespace Bootstrap attributes. For example, to create a Tooltip component in Bootstrap 5:

Instead of using data-toggle and data-placement , we use data-bs-toggle and data-bs-placement . If you use JavaScript to create components in Bootstrap, there’s probably no need to make any changes. However, if your components rely only on data attributes to function, you need to change all data attributes that start with data to start with data-bs .

In Bootstrap 4’s documentation under Browsers and devices , there’s a list of bugs that occur on some browsers. These bugs are no longer listed in the same list for Bootstrap 5. The list includes the following:

• Hover styling was being applied to elements on touch events on iOS, which wasn’t desirable as it was considered as an unexpected behavior.
• Using .container in Safari 8 and above caused a small font size on printing.
• Border radius was being overridden by validation feedback (but could be fixed by adding an extra .has-validation class).

The list of bugs and issues in Bootstrap 4’s documentation also details bugs that happened on browser versions that are no longer supported.

Other changes

There are many more changes that are either minor or don’t cause a drastic, noticeable change. These changes are:

Bootstrap 5 now uses Popper v2 . Make sure to upgrade your version of Popper. Popper v1 won’t work anymore, as Bootstrap 5 requires @popperjs/core instead of the previous popper.js .

Bootstrap 5 can now be used as a module in the browser using a version of Bootstrap built as an ECMAScript module .

As Libsass and Node Sass (which were used in Bootstrap 4) are now deprecated, Bootstrap 5 uses Dart Sass to compile the source Sass files to CSS.

There’s been a change in some Sass variable values, like $zindex-modal that changed from 1050 to 1060, $zindex-popover from 1060 to 1070, and more. For that reason, it’s recommended to check the Sass variables of each component or utility classes on Bootstrap 5’s documentation.

Previously, to make an element hidden but keep it discoverable for assistive technologies, the class .sr-only was used. This class is now replaced with .visually-hidden .

Previously, to make an interactive element hidden but keep it discoverable for assistive technologies, you needed to use both .sr-only and .sr-only-focusable classes. In Bootstrap 5, you just need to use .visually-hidden-focusable without .visually-hidden .

Blockquotes with a named source are now wrapped by a <figure> element.

Here’s an example of how Blockquotes are now in Bootstrap 5:

See the Pen Bootstrap 5 Blockquotes by SitePoint ( @SitePoint ) on CodePen .

In previous versions, table styles were inherited. This means that if a table is nested inside another table, the nested table will inherit the parent table. In Bootstrap 5, table styles are independent of each other even if they are nested.

Border utilities now support tables. This means that you can now change the border color of a table using the border color utilities.

Here’s an example of using border utilities with tables in Bootstrap 5:

See the Pen Bootstrap 5 Bordered Tables by SitePoint ( @SitePoint ) on CodePen .

The default styling of breadcrumbs has been changed, removing the default grey background, padding and border radius that was in previous versions.

Here’s an example of the style of Breadcrumbs in Bootstrap 5:

See the Pen Bootstrap 5 Breadcrumbs by SitePoint ( @SitePoint ) on CodePen .

Naming of classes that used left and right to refer to the position to use start and end has been changed. For example, .dropleft and .dropright in dropdowns are replaced with .dropstart and .dropend respectively.

Similarly to the previous point, utility classes that uses l for left and r for right now use s for start and e for end respectively. For example, .mr-* is now .me-* .

The .form-control-range class that was used for range inputs is now .form-range .

Gutters are now set in rems rather than the previous px .

.no-gutters has been renamed to .g-0 as part of the new gutter classes added (more on that in later sections).

Links are now underlined by default, even when not hovered.

Custom form element class names have changed from .custom-* to be part of the form components classes. For example, .custom-check is replaced by .form-check , .custom-select is replaced by .form-select , and so on.

Adding .form-label to labels is now required.

Alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips now use the same padding values using the $spacer variable.

Default padding in badge elements is now changed from .25em/.5em to .35em/.65em .

Wrappers for toggle buttons are used with checkboxes and radio buttons. The markup is also now simplified. In Bootstrap 4, a toggle button checkbox was achieved with the following markup:

In Bootstrap 5, it can be done in a simpler manner:

The active and hover states of buttons have increased contrast now in color.

Carousel chevron icons now use SVG from Bootstrap Icons .

The close button class is now renamed from .close to .btn-close , and uses an SVG icon instead of &times; .

Dropdown dividers are now darker for better contrast.

Navbar content should now be wrapped within a container element. For example in Bootstrap 4:

Becomes in Bootstrap 5:

The .arrow class in popover components is now replaced by .popover-arrow , and class .arrow in Tooltip components is now replaced by .tooltip-arrow .

The popover option whiteList has been renamed to allowList .

The default Toast duration is changed to 5 seconds.

The default value for fallbackPlacements in tooltip, dropdown and popover components has been changed to the array ['top', 'right', 'bottom', 'left'] .

.text-monospace has been renamed to .font-monospace .

.font-weight-* has been renamed to .fw-* and .font-style-* to .fst-* .

.rounded-sm and .rounded-lg have now been replaced by a range of rounded classes .rounded-* from 0 to 3.

What’s Been Dropped

Change can come at a cost. As a new version comes out that brings changes and enhancements, it also drops a few of the old features that it previously supported. With this ne release, some of Bootstrap’s components, utility classes or other features have been dropped.

Most of the items that were dropped from Bootstrap 5 were dropped because the same can be achieved by using utility classes instead of making them a standalone component. Also, some items that have been dropped had proven to be unused or unnecessary.

Here’s a list of what’s been dropped from Bootstrap 5:

As mentioned in the previous section, support for IE has been completely dropped.

Badge color classes (for example, .badge-primary ) have been dropped in favor of using the color utility classes (for example, .bg-primary ).

The .badge-pill badge class, which gave a badge a pill style, has been dropped in favor of using .rounded-pill , which achieves the same result.

The .btn-block button class has been removed, as the same result can be achieved by using display utility classes like .d-block .

The Masonry .card-columns card layout that was previously available has been dropped, as it had a lot of side effects .

The flip option for dropdown components has been removed, in favor of Popper’s configurations.

The Jumbotron component has been dropped, as the same result can be achieved by using utility classes.

Some of the order utility classes ( .order-* ) have been dropped, as they previously ranged from 1 to 12. Now they range from 1 to 5.

The media component has been dropped, as the same result can be achieved with utility classes.

The .thead-light and .thead-dark classes have been dropped, as .table-* variant classes can be applied to all table elements.

The .pre-scrollable class has been dropped, as it’s not used much.

The .text-justify class has been dropped, due to responsiveness issues , as has the .text-hide class, because its method is old and shouldn’t be used. And the .text-* classes don’t add hover or focus states to links anymore. Those .text-* classes should be replaced with .link-* classes.

Input groups that have multiple inputs or components don’t need to use .input-group-append and .input-group-prepend anymore. Elements that should be in the group can just all be added directly as children of the .input-group .

Here’s an example of using input groups with multiple inputs:

See the Pen Bootstrap 5 Input Group by SitePoint ( @SitePoint ) on CodePen .

.form-group , .form-row , and .form-inline have all been dropped in favor of layout classes.

.form-text doesn’t have a set display property anymore. The element’s display will depend on whether the element itself is a block or inline element.

Validation icons have been removed for <select> elements with multiple .

The .card-deck class has been removed in favor of grid classes.

Negative margins have been disabled by default.

.embed-responsive-item elements are now removed in favor of applying the styling on all the children of ratios, which was previously Responsive embeds (more on that in the next section).

Finally, Bootstrap brings a lot of exciting additions to its library in version 5. Some of these changes include new features, new supported concepts, new components, new utility classes and more.

Responsive Font Sizes is now enabled by default

Responsive Font Sizes (RFS) was in previous versions of Bootstrap, but it was disabled by default. Bootstrap 5 enables RFS by default, making fonts in Bootstrap more responsive. RFS is a side project created by Bootstrap to initially scale and resize font sizes responsively. Now, it’s capable of doing the same for properties like margin, padding, box-shadow, and more.

What it does is basically to calculate the most fitting values based on the browser dimensions, and these calculations are translated to calc functions when it’s compiled. Using RFS also ditches the previous usage of px to use rem , as it helps achieve better responsiveness.

If you’re using the Sass files for Bootstrap, you can now use mixins made by RFS, including font-size , margin , padding , and more, which allow you to make sure your components and styles are responsive.

Right-to-left support

Bootstrap 5 adds tight-to-left (RTL) support using RTLCSS . As Bootstrap is used all around the world, it’s a big and important step to make RTL support available out of the box. For that reason, Bootstrap 5 has ditched specific naming for directions (for example, usage of left and right ) in favor of start and end . This makes Bootstrap flexible enough to work with both left-to-right (LTR) and RTL websites. For example, .dropleft is now .dropstart , .ml-* is now .ms-* , and more.

To make Bootstrap recognize and apply RTL stylings on your website, you need to set the dir of <html> to rtl , and add a lang attribute with the RTL language of the website. For example, lang="ar" .

Finally, you’ll need to include Bootstrap’s RTL CSS file:

And with that, your website will support RTL.

New breakpoint

Bootstrap 5 brings support for the new breakpoint xxl targeting devices with width greater than or equal to 1400px . Previously, the highest breakpoint was xl , which targeted devices with width greater than or equal to 1200px . This change allows for better responsiveness for devices with larger screens, as the xl breakpoint was not enough.

Using the new breakpoint is similar to all of the other breakpoints. For example, to apply padding for devices width greater than or equal to 1400px , you can do that using the class .p-xxl-2 .

Improved documentation

Although this is not part of the library itself, it’s good to note the improvement in the documentation of Bootstrap. Documentation in Bootstrap 5 has better organization of content, as components that have more extensive details in them have their own sections now. For example, the Form component in Bootstrap 4 was just one page with all the components crammed inside it. In Bootstrap 5, the Form component’s documentation is a section on its own, with subsections for different subcomponents including Form Control, Select, Input Groups, and more.

Additionally, the navigation in the documentation is easier now through the sidebar, especially for smaller screens. In Bootstrap 4, the table of content sidebar can’t be seen on smaller devices, making it harder to find the section required on the page. In Bootstrap 5, the table of content is always seen on all screen sizes.

Moreover, in Bootstrap 5 you can find all the Sass variables, mixins and functions for each component on its page. Previously, there was just a Theming page that had some details on how to change the theme variables in Bootstrap. Now, there’s a customization section on its own that has more details on how to customize Bootstrap’s theme.

New components

Bootstrap 5 brings some new components into the library. Some of these components were part of other components and are now standalone components.

Previously, Accordion was part of the Collapsible component, rather than it being its own component. In Bootstrap 5, Accordion is a new component. With Accordion comes a new class, .accordion , that holds inside it a list of accordion items. Additionally, Accordions have a new style compared to the previous style in Bootstrap 4. Here’s an example of the accordion component:

See the Pen Bootstrap 5 Accordion by SitePoint ( @SitePoint ) on CodePen .

Bootstrap 5 also adds some classes to change the styling of the Accordion. For example, .accordion-flush removes some of the styling of the default Accordion like the background or border colors. You can also make an accordion item always open by removing the data-bs-parent attribute from its .accordion-collapse element.

Another new component is Offcanvas , which allows you to create an overlaying sidebar. It’s the sidebar that’s usually used on websites to show the menu on smaller devices. You can place it on any side of the page by using .offcanvas-start for left in LTR, .offcanvas-top for top, .offcanvas-end for right in LTR, and .offcanvas-bottom for bottom. You can also specify whether the Offcanvas should have a backdrop or not. Here’s an example of using the Offcanvas component:

See the Pen Bootstrap 5 Offcanvas by SitePoint ( @SitePoint ) on CodePen .

Floating Label

Floating Label is a new component part of the Form components. It allows you to create an input whose label looks like a placeholder at first, then when the input receives focus the label floats to the top of the input above the value. It also works on <select> elements and <textarea> elements. Here’s an example of using floating labels:

See the Pen Bootstrap 5 Floating Label by SitePoint ( @SitePoint ) on CodePen .

Other additions

Other than the new components, there are new classes for existing components, new utility classes, new helper classes, and more. Here’s a list of all the other new additions in Bootstrap 5:

Class .row-cols-auto has been added, which allows the columns to take their natural width.

A new utility class has been added to justify content called .justify-content-evenly .

Previously, gutters between columns were achieved using spacing utilities. Now, you can set the gutter between columns using the new Gutter layout utility. To set a horizontal gutter, use .gx-* . To set vertical gutter, use .gy-* . To set gutter both horizontally and vertically, use .g-* .

A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

Vertical alignment utility classes can now be used with tables.

A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

There’s now the option to change the divider in Breadcrumb using the CSS variable --bs-breadcrumb-divider .

Here’s an example of changing the divider to >> :

See the Pen Bootstrap 5 Breadcrumbs Divider by SitePoint ( @SitePoint ) on CodePen .

There’s a new dark variant for carousels using the class .carousel-dark , and a new dark variant for dropdowns using .dropdown-menu-dark .

There’s a new auto close option in Dropdown that can change the default behavior of when the Dropdown menu closes. By default, dropdown menus close when clicking outside the dropdown or one of the dropdown items. You can change that by setting the data-bs-auto-close data attribute to inside , which makes the dropdown close when clicking on one of the dropdown items but not when clicking outside. You can also set it to outside , which will make the dropdown close only when clicking outside the dropdown. Finally, you can set it to false to make it only close when the dropdown button is clicked again. If you’re initializing the dropdown with JavaScript, you can use the autoClose option instead of the data attribute. Here’s an example of its usage:

See the Pen Bootstrap 5 Dropdown autoClose by SitePoint ( @SitePoint ) on CodePen .

There’s now improved styling for file inputs in forms.

A new color input has been added, using the class .form-control-color .

A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

See the Pen Bootstrap 5 Form Inputs by SitePoint ( @SitePoint ) on CodePen .

New color tints and shades have been added in Sass variables.

There are two new display heading sizes .display-5 and .display-6 .

There’s a new white variant for close buttons .btn-close-white .

Dropdowns can now have .dropdown-items wrapped in <li> elements.

Items in List groups can now be numbered using the new class .list-group-numbered .

There are transition properties to links in Pagination component, which improves its style.

There’s a new .bg-body class that sets the background color of the body to white.

There are new position utility classes to set the top , left , right or bottom properties of an element. For example, .top-0 .

New .translate-middle-x and .translate-middle-y classes have been added to easily center absolute elements horizontally and vertically respectively.

There are new border width utility classes .border-* ranging from 1 to 5.

There’s a a new display utility .d-grid and new gap utility .gap .

There are new line height utilities .lh-1 , .lh-sm , .lh-base and .lh-lg .

There are new ratio helpers replacing what previously was responsive embed helpers. The class names are renamed by replacing embed-responsive with ratio and by with x . For example, what previously was .embed-responsive-16by9 is now .ratio-16x9 .

A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

There are .fs-* utilities for font sizes, as RFS is now enabled by default.

Bootstrap has been one of the leading CSS libraries for most of the past decade. It allows developers to easily build responsive websites and deliver a good user experience. With Bootstrap 5’s additions and changes, this process will be even easier and will allow for improving website’s designs and providing a good user experience. If you’re using Bootstrap 4 and you’re thinking of migrating to Bootstrap 5, the migration is easy and you probably won’t need to make a lot of changes.

What are the major differences between Bootstrap 4 and Bootstrap 5?

The most significant difference between Bootstrap 4 and Bootstrap 5 is the removal of jQuery in the latter. Bootstrap 5 now uses vanilla JavaScript, which makes it lighter and faster. Another major change is the switch from Jekyll to Hugo for the documentation static site generator. Bootstrap 5 also introduces a new utility API, an expanded color palette, and updated form controls.

How can I migrate from Bootstrap 4 to Bootstrap 5?

Migrating from Bootstrap 4 to Bootstrap 5 involves several steps. First, you need to remove jQuery and replace it with vanilla JavaScript. Next, update your Bootstrap CSS and JS links to the latest version. You also need to replace the old classes with the new ones introduced in Bootstrap 5. Lastly, update your form controls and check the official Bootstrap migration guide for any additional changes.

What are the new features in Bootstrap 5?

Bootstrap 5 introduces several new features. It now uses vanilla JavaScript instead of jQuery, making it lighter and faster. It also introduces a new utility API for more flexible customization, an expanded color palette, updated form controls, and a new SVG icon library. The documentation has also been improved with the switch from Jekyll to Hugo.

How does the new utility API in Bootstrap 5 work?

The new utility API in Bootstrap 5 allows for more flexible customization. It lets you create your own utility classes, control which utilities are generated, and even modify existing utilities. This makes it easier to tailor Bootstrap to your specific needs and preferences.

What is the purpose of the expanded color palette in Bootstrap 5?

The expanded color palette in Bootstrap 5 provides more options for customization. It includes a wider range of colors, allowing you to create more diverse and visually appealing designs. This makes it easier to match the color scheme of your website or application to your brand’s colors.

How have form controls been updated in Bootstrap 5?

In Bootstrap 5, form controls have been updated to use CSS instead of JavaScript for better performance and simplicity. They also have a new look with more modern and clean designs. Additionally, custom forms have been replaced with the new form controls for better consistency.

What is the new SVG icon library in Bootstrap 5?

The new SVG icon library in Bootstrap 5 provides over 1,000 free, high-quality icons. These icons are customizable and can be used in various parts of your website or application, such as in buttons, menus, and alerts. They are also optimized for accessibility.

How has the documentation been improved in Bootstrap 5?

In Bootstrap 5, the documentation has been improved with the switch from Jekyll to Hugo for the static site generator. This makes the documentation faster and easier to use. It also includes more examples and explanations to help you understand how to use Bootstrap effectively.

Is Bootstrap 5 compatible with all browsers?

Bootstrap 5 is compatible with the latest versions of all major browsers, including Chrome, Firefox, Safari, and Edge. However, it no longer supports Internet Explorer. This is because Internet Explorer is outdated and does not support many modern web technologies.

How can I start using Bootstrap 5?

To start using Bootstrap 5, you can download it from the official Bootstrap website. You can also use a CDN to include Bootstrap in your project. Once you have Bootstrap, you can start using its classes and components in your HTML files. Be sure to check the official Bootstrap documentation for more information and examples.

I am a full-stack developer passionate about learning something new every day, then sharing my knowledge with the community.

Bootstrap 5 Tutorial

Bootstrap 5 forms, bootstrap 5 grid, bootstrap 5 other, bootstrap 5 ref.

Bootstrap 5 is the newest version of Bootstrap , which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.

Bootstrap 5 is completely free to download and use!

Start learning Bootstrap 5 now »

Learn Bootstrap 5

Try it Yourself Examples

This tutorial contains hundreds of Bootstrap 5 examples.

With our online editor, you can edit the code, and click on a button to view the result.

Bootstrap 5 Example

Click on the "Try it Yourself" button to see how it works.

Advertisement

Bootstrap 5 vs. Bootstrap 3 & 4

Bootstrap 5 is the newest version of Bootstrap ; with new components, faster stylesheet and more responsiveness.

Bootstrap 5 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 11 and down is not supported.

The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched to JavaScript instead of jQuery .

Note: Bootstrap 3 and Bootstrap 4 is still supported by the team for critical bugfixes and documentation changes, and it is perfectly safe to continue to use them. However, new features will NOT be added to them.

Bootstrap 5 Exercises

Test yourself with exercises.

Use a Bootstrap class to center the following text:

Start the Exercise

Did You Know?

W3.CSS is an excellent alternative to Bootstrap 5.

W3.CSS is smaller, faster, and easier to use.

If you want to learn W3.CSS, go to our W3.CSS Tutorial .

Bootstrap 5 Quiz Test

Test your Bootstrap 5 skills at W3Schools!

Start Bootstrap 5 Quiz!

My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study at W3Schools without using My Learning.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

• Business Consulting
• COTS Applications
• Intelligent Automation
• Cloud Infrastructure
• Integration Services
• Data Analytics & AI
• Generative AI
• Digital Transformation Services
• Digital Product Engineering
• Quality Engineering Services
• Application Management
• Infrastructure Services
• IT Outsourcing
• Informatica
• Life Sciences and Healthcare
• Financial Services & Insurance
• Government Public Sector
• Cargo Planning Controls
• Convertorama
• Digital Operations Platform
• EDI Snowflake Data Hub
• Finance Assist
• Finance AI Solution
• GxP Validation
• InfatoODI 2.0
• Smart Lot Flow Management (SLFM)
• JadeConnect Integration
• Jade RightStart
• Jade SCM AI Insight
• Knowledge Base AI
• Oracle Cloud Migrator
• Pre-Auth AI
• Propero R12 Upgrade
• Snowflake Consumption Metrics
• Snowflake Test Data Management
• Track & Trace
• Case Studies
• Newsletters
• Whitepapers
• Perspectives
• Awards & Recognition
• Jade Foundation
• Press Releases
• Let's Talk

Ten Reasons to Use Bootstrap 5 for Better UI Development

Pratikasha shinde.

Oct 06, 2021

Bootstrap is one of the most popular front-end frameworks used for web development. It provides a set of CSS, JavaScript, and HTML components that help developers create responsive and mobile-first web pages .

The latest version, Bootstrap v5, has several new features and improvements over version 4. This blog provides a quick comparison between Bootstrap v5 and v4 and discusses some of its key features and how they help you develop a better UI.

What’s New with Bootstrap 5

Bootstrap helps build websites and web pages quickly and with a better UI. Ideally, it saves time from writing a lot of CSS code and gives developers more time to design web pages. In addition, UI developed through Bootstrap is more responsive.

Bootstrap 5 has introduced a plethora of changes and improvements. Some of the major updates include the addition of new components, new classes, revamped styling for existing components, enhanced browser support, the removal of outdated components, and several other changes.

Some of you might be using Bootstrap v4 and know the benefits and limitations of using this framework. However, as the v5 is available now, here is a quick comparison of the two versions, to help you understand what’s new with Bootstrap 5.

Boostrap V4 vs V5

Ten reasons to use bootstrap 5 for ui development.

As shown in the comparison table above, many things have changed with Bootstrap 5 compared to Bootstrap 4. If you are considering moving your old projects from v4 to v5 or starting a whole new project with Bootstrap 5, here are the reasons to choose Bootstrap 5 for better UI development.

1. jQuery is no longer a dependency

When Bootstrap was first created in 2010, jQuery was the dominant framework and served as the backbone for Bootstrap. However, some developers didn't appreciate the forced dependency on jQuery and preferred to use Bootstrap with more modern frameworks like Vue.js and React.

Now, Bootstrap 5 has removed the dependency on jQuery, making it easier to use with different frameworks. However, certain components such as dropdowns, sliders, and popovers still require Poppers and its vanilla JavaScript module. If your project requires jQuery, you can still add it, but it's no longer necessary for Bootstrap to function properly.

2. CSS custom properties

Bootstrap 5 has introduced CSS custom properties, which offers an alternative to SASS variables for improving code reuse and organizing the Bootstrap codebase. These CSS variables can now also be accessed and manipulated in JavaScript, allowing for more flexibility in making changes to the CSS.

This new feature is a significant improvement over Bootstrap 4, which only offers root variables for color and font customization. With Bootstrap 5, components can use local variables to style elements, providing more fine-grained control over the appearance of the webpage. For e.g  

3. Color palette

Bootstrap 5 offers an expanded color palette. Unlike other CSS frameworks, Bootstrap 5 provides developers with a broad range of shades, including $blue-100, $blue-200, $blue-300, and so on, up to $blue-900.

With over 100 color options to choose from, developers have more flexibility in customizing the appearance of their projects without needing to make significant changes to the codebase. In addition, Bootstrap 5 also features improved color contrast and allows overriding of the default colors with their custom palette using the Color Shades Generator.

4. Updated form controls

Bootstrap 5 has updated form controls, providing a more streamlined and consistent experience for users. Unlike in Bootstrap 4, there is no longer a need for custom classes to style form controls. In Bootstrap 5, radio buttons and checkboxes are included by default.

The improved form controls in Bootstrap 5 offer several benefits, including better accessibility, ease of use, and a more modern look and feel. By eliminating the need for custom classes, developers can now create forms more quickly and with less code.

5. Responsive Font Size (RFS)

Bootstrap 5 offers a responsive font size feature that adjusts font sizes as the viewport size changes. This eliminates the need to write complex media queries and manually adjust font sizes for different screen sizes, making it easier to create responsive designs.

6. Smaller file size

Bootstrap 5 has a smaller file size compared to its previous versions. This means faster load times for your web pages and a better user experience for your visitors.

7. New utility classes

Bootstrap 5 comes with several new utility classes that allow you to add responsive spacing, colors, and typography to your web pages. These classes can easily save you a lot of time and effort when designing your UI.

8. Updated grid system

The grid system in Bootstrap 5 has been updated to be more flexible and customizable. You can now define custom grid breakpoints and adjust the number of columns per row to fit your design needs.

9. New components

Bootstrap 5 comes with several new components, including off-canvas navigation, toast notifications, and accordions. These components can save you a lot of time and effort when building complex UI elements.

10. Updated JavaScript plugins

Bootstrap 5 has updated its JavaScript plugins to be more modular and lightweight. This means faster load times for your web pages and a better user experience for your visitors.

Bootstrap 5 has also improved browser support to modern browsers such as Firefox, Chrome, Safari, and Edge. It has removed support for Internet Explorer to ensure that Bootstrap can leverage the latest web technologies and provide a smoother, more consistent experience for users.

It has also removed some old components that were no longer relevant or used in modern web development . This streamlines the framework and reduces its overall size, thereby, improving the load times and performance of web pages built with Bootstrap.

In conclusion, Bootstrap 5 brings a host of improvements that enhance its capabilities and make it more versatile and user-friendly for developers.

Subscribe to our email Newsletter

Popular posts.

Consolidation in Oracle Fusion

Data Migration Testing - Best Practices

Forecasts in Salesforce

10 Benefits of Selenium Test Automation

ServiceNow Domain Separation

About the Author

Senior Associate Engineer, Cloud ADM - Microsoft

Pratikasha is a Senior Associate Engineer who works as a UI developer in all front-end technologies. She has 3 years of experience in Front-end development and delivery. She has designed and developed UI work for multiple client projects with SharePoint, React JS and worked for internal projects (jCorpNet).

How Can We Help You?

Related Posts

xUnit Testing - One of the most advanced and reliable tool for Software Testing

Is the Legacy EBS System a Relic of the Past? Elevate Your Business Analysts with Dynamic Oracle EBS Testing

ERP Testing Recommendations and Best Practices to Keep Your NetSuite Optimized

How Worksoft Certify Simplifies Your Software Testing Processes

A Simplified Guide to Adopting Software Testing as a Service (TaaS)

How to Ensure Seamless Mobile Retail Experiences with Omnichannel Testing

Bootstrap 5 vs Bootstrap 4 – What’s New & What Changed?

The team behind the most popular CSS framework Bootstrap has released a new version. As of writing this article, stable release of Bootstrap 5 is out ( versions ) and available for use. Let us see what are these new introduced features in Bootstrap 5 and what are the differences in Bootstrap 4 vs Bootstrap 5.

While there are many under the hood changes such as a new logo for Bootstrap, move to Hugo from Jekyll, we will touch upon those aspects first that affect web development projects most.

What’s New in Bootstrap 5 for Web Developers

As with any major version change, a lot has changed in Bootstrap 5 over Bootstrap 4. Here is the list of major differences you need to keep in mind when updating your old projects that are built with Bootstrap 4 or earlier. If you are starting a new project with Bootstrap 5 or are using Bootstrap templates , keeping these changes in mind will help you make a decision about choosing Bootstrap 5 over Bootstrap 4.

1. Vanilla JavaScript instead of jQuery

Ever since Bootstrap was introduced, it utilized jQuery as a dependency to offer dynamic features such as menu expansion, carousel, dropdowns etc. However, this forced dependency on jQuery was not liked by many developers who wanted to use Bootstrap with modern JavaScript frameworks such as React and Vue.js. With Bootstrap 5, they have removed this dependency.

Note that this does not mean that there is no JavaScript dependency in Bootstrap 5. Behaviors such as dropdown, slider, popover etc. in Bootstrap 5 depends on Popper as well as its own vanilla JavaScript module. There will be no requirement of adding jQuery. If your project depends on jQuery, you can still add it.

2. Browser support – IE 10 and 11 support removed

With Microsoft moving its efforts completely towards Edge browser , Internet Explorer is fast losing market share. Moreover, Edge has adopted the open source chromium engine which allows it to have all the modern JavaScript and CSS features on par with latest version of Chrome and Firefox. Given this, Bootstrap team has dropped support for Internet Explorer which allows it to provide a modern set of features such as CSS variables, faster JavaScript and better APIs.

Here is a full list of browsers that Bootstrap 5 no longer supports:

• Dropped Microsoft Edge Legacy
• Dropped Internet Explorer 10 and 11
• Dropped Firefox < 60
• Dropped Safari < 10
• Dropped iOS Safari < 10
• Dropped Chrome < 60
• Dropped Android < 6

3. CSS custom properties

Thanks to dropping support for Internet Explorer, Bootstrap 5 now supports custom CSS properties. In Bootstrap 4 root variables were present for only color and fonts. Bootstrap 5 now offers CSS variables in a handful of components and layout options. For example, table component makes use of local variables to make striped, hover-able, and active table styles easier.

4. Expanded color palette

Many CSS frameworks such as Tailwind offer an extensive set of color palette which has been quite popular with developers. Bootstrap 5 has now expanded its color palette to include more colors that are present in different shades such as $blue-100, $blue-200, $blue-300, …., $blue-900. This allows you to easily customize the look and feel of your app without ever leaving the codebase. You can easily override these colors with your own color palette using the color shades generator .

5. Updated Form Controls

Bootstrap 5 includes custom designed form controls. In Bootstrap 4 the form controls were using whatever defaults each browser provided. In Bootstrap 5 the form controls will offer much more consistent look and feel in all browsers due to its custom design.

These new form controls are all built on completely semantic, standard form controls and thus there is no need of adding extra markups for form controls and labels.

6. Utilities API

A new utility API has been built into Bootstrap 5. You can use Sass to create your own utilities. You can also use the utility API of Bootstrap to modify or remove the default utility classes.

You can also now use the  state  option to generate pseudo-class variations such as :hover  and  :focus . An example:

CSS utility classes that get generated with above:

7. Enhanced grid system

While Bootstrap 5 keeps the grid system structure that was introduced in Bootstrap 4, it enhances it by adding new classes. This would mean less effort will be required to move the grid structure from the older to newer version.

Here is the what changed in the Bootstrap 5 grid system:

• New xxl grid tier.
• Gutter classes can be added in grid using .g* utilities.
• Form layout options have been replaced with the new grid system.
• Vertical spacing classes have been added.
• Columns are no longer  position: relative  by default.

8. CSS Grid Support

Bootstrap 5 has introduced an experimental version of CSS Grid  as an  opt-in replacement  to the default grid system. Using it is not mandatory, however those who prefect CSS Grid over Flexbox would like it.

9. New offcanvas component and Navbar Offcanvas

A new offcanvas component has been added in Bootstrap 5 which can be used to create expanding sidebars for navigation or for shopping carts or offcanvas menu. These offcanvas components can be placed on the left, right, or bottom of the viewport and can be configured with data attributes or the JavaScript APIs.

  .navbar-expand-*  classes has also been expanded to include support for offcanvases inside the navbar. You can wrap your navbar elements with the appropriate offcanvas HTML and point your navbar toggler button to the offcanvas menu for it to work. Read the offcanvas navbar docs  for more information.

10. New accordion

Bootstrap 5 adds support for brand new .accordion component . The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability. You can also use .accordion-flush to remove the default  background-color , some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

11. Floating labels in Form Inputs

A new floating label support has also been added in bootstrap 5. This behavior is similar to the behavior shown by many material design UI frameworks such as MDB . Form validation styles also work as expected with floating labels present.

12. Placeholder component

A new placeholders component has been added that allows you to create UI while your app is still loading.

13. RTL support

Bootstrap 5 now includes RTL support. RTL ( right-to-left ) support means that you can build websites in languages such as Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi. The writings in these languages starts from the right of the page and continues to the left which demands it’s own specific style settings in order to accommodate with your overall design. Now that Bootstrap 5 has the RTL support in-build, you will be able to use RTL versions of Bootstrap CSS file to create RTL websites. Check docs and examples for RTL.

14. Easier customization & theming

Bootstrap 5 offers a new Customize section which expands on v4’s theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. A npm starter project is also provided to help you get started with customizing Bootstrap faster. Setting up Bootstrap with Parcel is also now documented.

15. Namespaced data attributes

Bootstrap utilizes HTML attributes to enable JavaScript behaviors. In Bootstrap 5, all such attributes have been renamed from data-* to data-bs-* . Thus all data attributes in Bootstrap 5 now contain bs as an infix. You will need to do find all replace all such data attributes when moving from Bootstrap 4 to 5, however going forward this will keep the data attribute naming of Bootstrap separate from that required by any other libraries or your own.

16. Popper.js v2

Tooltips and popovers in Bootstrap are powered by Popper.js . In Bootstrap 5, v2 of Popper.js has been adopted which brings small breaking changes:

• Removed  offset  option from Tooltip/Popover and Dropdown. This can now be achieved using the  popperConfig  parameter.
• The  fallbackPlacement  option has become  fallbackPlacements .

17. SVG Icon Library

Bootstrap now offers SVG library of 1,000+ icons that are easy to integrate in your code. You can add these icons by inline code or SVG sprite. A web font version will also be introduced with the stable release of this icon library. We have been using this icon library in our current projects (including Bootstrap 4) and have found it to be quite extensive.

18. Better Documentation & Examples

You will also notice a new look and feel to the Bootstrap 5 documentation site which has been revamped to improve readability. Sidebar in documentation now uses expandable sections for faster navigation. You will also find improved Sass docs which will help you customize the default Bootstrap experience.

New examples have been added with several snippets for headers, heroes, jumbotron, features, and sidebars.

19. Hugo over Jekyll for site generation

Bootstrap’s documentation site has adopted Hugo over Jekyll for its static site generation. Hugo is a popular and fast cross platform static site generator written in Go. You can learn about top static site generators here.

20. New Logo

Lastly, Bootstrap 5 now sports a brand-new logo (attached at the start of the article).

Bootstrap 5 vs Bootstrap 4 – Which one to use?

Here are some reasons why you would want to stick to Bootstrap 4 in your current projects:

• Your project needs support for IE 10 and IE 11.
• Your project is dependent on jQuery and you don’t need new features of Bootstrap 5.
• You are already using Bootstrap 4 and don’t want to accommodate new breaking changes of Bootstrap 5 yet.

And here are the reasons why you would want to switch over to Bootstrap 5 in your new projects or update your older ones:

• You are using React or Vue.js and want to use Bootstrap without the dependency on jQuery.
• You want to utilize the new features of Bootstrap such as expanded color palette, enhanced grid system, custom utilities, RTL etc.

As for me, I will keep using Bootstrap 4 in my existing projects. For new web projects, I will start using Bootstrap 5 right away to make use of the new features introduced. Slowly, I will upgrade my existing projects to move to the newer version. You can read the official migrating to v5 guide on Bootstrap site to check of the different classes that would need updating and any additional migration steps.

Checkout Bootstrap templates by our team as well as these Bootstrap UI Kits .

Bootstrap is one of the most popular responsive CSS frameworks that web agencies and web developers prefer. There are many Bootstrap based templates, themes and libraries available which you can find such as these best Bootstrap Templates , Bootstrap admin templates and Bootstrap UI Kits .

SDR team is committed to highlight the latest products, services, freebies and news relevant to community of designers, developers and online entrepreneurs. Do get in touch if you want to share any useful resource with our community.

11 thoughts on “Bootstrap 5 vs Bootstrap 4 – What’s New & What Changed?”

Awesome article. I find this article very comprehensive and useful.👍 Thanks for sharing.

It will be great if all breaking changes are also listed. But with what you’ve mentioned, I think I’m gonna stick with bs4. I can still use vuejs with jquery with no hassle. Thanks for the information.

Thank you very much for the information. The next project will be realized with bootstrap 5 – I am exited if the performance gets even better.

Awesome article.

that’s wonderful!

Very helpful

I found the comparison very helpful, thanks.

This article was very helpful for me!

How about the drop of support for visibility classes and their awful replacement?

Helpful article! Caught this in #15: “Thus all data attributes in Bootstrap 5 not contain bs as an infix.” Should it be “now”?

Leave a Comment Cancel reply

• About Material Minimal
• Installation
• Optimization
• Migrating to v7
• Supported Browsers
• VSC snippets
• Internationalization (i18n)
• Free starter templates
• Buy MDB Pro
• Plugins installation
• Quick start
• Git & repository
• Premium support
• Enterprise & Resellers
• About MDB GO / CLI
• Getting started
• Configuration
• Ruby on Rails
• Grid system
• Breakpoints
• Horizontal alignment
• Utilities for layout
• Vertical alignment
• Background image
• CSS variables
• Hover effects
• Button group
• Placeholders
• Autocomplete
• DateTimepicker
• Input fields
• Input group
• Multi range
• Charts advanced
• Close button
• Interactions
• Screen readers
• Stretched link
• Text truncation
• Vertical rule
• Infinite scroll
• Lazy loading
• Loading management
• Smooth scroll
• Landing page
• Color picker
• Cookies management
• Data parser
• Drag and drop
• eCommerce gallery
• File upload
• Multi item carousel
• Organization chart
• Scroll status
• Storage management
• Table editor
• Vector maps
• WYSIWYG editor
• Admin dashboards
• Landing pages
• Design generators
• YouTube channel

Supported browsers & devices

• Supported browsers

MDBootstrap supports the latest, stable releases of all major browsers and platforms.

Alternative browsers that use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, MDBootstrap should (in most cases) display and function correctly in these browsers as well.

You can find our supported range of browsers and their versions in our .browserslistrc file:

• .browserlistrc

We use Autoprefixer to handle intended browser support via CSS prefixes, which uses Browserslist to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.

• Mobile devices

Generally speaking, Bootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

• Desktop browsers

Similarly, the latest versions of most desktop browsers are supported.

• Internet Explorer

Internet Explorer is not supported. If you require Internet Explorer support, please use MDBootstrap v4.

Access restricted

To view this section you must have an active pro account.

Log in to your account or purchase an MDB5 PRO subscription if you don't have one.