Bootstrap 4.4.1 | What is the latest version of Bootstrap?
What’s New for Front-end Developers in Bootstrap 4.4.0 and 4.4.1
Bootstrap has launched 4.4.0, and within a couple of days, Bootstrap released 4.4.1 as well. It claims to have updated dozens of CSS & JavaScript bugs and also moved to GitHub Actions for CI/CD. Moreover, the Bootstrap team has cleaned its documentation, fixed typos, and links, and even offers a new security doc. The security doc bears the guidelines on reporting vulnerabilities. Additionally, Bootstrap updated its spacing and alignment for modal footer elements such as buttons to automatically wrap when space is constrained.
The new version of Bootstrap ships new responsive containers, new responsive classes, new functions, new mixin, etc. Let’s have a detailed look at the updates in the coming sections. The Bootstrap team promises to ship all the features in 4.4.0 to v5. This ensures that there will be minimal to no code redundancies when v5 releases. So, you can start using 4.4.0 right away.
NEW INCLUSIONS & FIXES IN VERSION 4.4.0:
- New responsive .row-cols classes to quickly specify the number of columns across breakpoints. It helps to develop responsive card decks.
- Fluid up to a particular breakpoint, available for all responsive tiers.
- New escape-svg() function to simplify the embedded background-image SVGs for forms and more.
- New make-col-auto() mixin to make the .col-auto class available with custom HTML.
- Fixed an issue with Microsoft Edge not picking up :disabled styles by moving selectors to [disabled].
- New add() and subtract() functions to avoid errors and zero values from CSS’s built-in calc feature.
MIXINS REMOVED IN 4.4.0:
As said earlier, since the team at Bootstrap wants to make 4.4.0 compatible with v5, they have decided to remove the following mixins:
VERSION 4.4.1
Though the new add() and subtract() functions introduced in 4.4.0 work as expected with Bootstrap’s node-sass-based build system, some alert developers noticed that things broke when using other Sass compilers such as Dart Sass or Ruby Sass. The Bootstrap team resolved this issue in 4.4.1 by tweaking these functions a bit to deliver what is expected.
Bootstrap 4 Template Starter Page
Bootstrap 4 requires to set up with the latest design and development standards. Use an HTML5 doctype and include a viewport meta tag for responsive behaviors. Below is a sample starter template that your pages should look like.
<!doctype html><html lang="en"><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><title>Hello, world!</title></head><body><h1>TechAffinity - Best IT Services Company in Tampa</h1><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script></body></html>
New Bootstrap Icons
Bootstrap Icons are designed to work with Bootstrap themes, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled using CSS. They’re built for Bootstrap, and they’ll work with any project.
The icons are open-source, so free to download, use, and extend. Since it is in the early stages, you can expect lots of updates.
As front-end technologies evolve at a rapid pace, you have to stay updated to implement new design trends to make your website more attractive. Rich functionalities add value to the user experience design and make it easy for your visitors to navigate and get what they are looking for.
Our team of tech-savvy front-end developers stays updated with all the recent UI design and user experience trends. Feel free to share your front-end development queries with media@techaffinity.com or get in touch by scheduling a meeting.
Originally published at https://techaffinity.com on December 5, 2019.
