Ionic makes it easy for web developers to build mobile and web apps with the same codebase. And it's latest iteration, Ionic 5, provides a responsive grid and some basic CSS utilities. However, coming from a background of web development with Bootstrap 4, I missed responsive utility classes based on breakpoints. Things like ml-md-5 for a left margin of 5 units on medium screen sizes and up and px-xl-3 for a horizontal padding of 3 units on extra large screen sizes and above. See the spacing utilities docs of Bootstrap 4 for a better idea. In contrast, Ionic only had basic ion-padding-<direction> classes with no option for choosing padding size or breakpoints.
So, I searched for a way to get these utility classes on my Ionic 5 project and found Bootstrap Utilities, a package providing only the utilities portion of Bootstrap 4.1, without the rest of Bootstrap. As a result, this is a lightweight library, having no conflict with Ionic 5's CSS classes. Can't say the same for other specialized and heavyweight utility libraries like Tailwind (for which, you may refer to "Using TailwindCSS with Ionic 5 and Angular 10"). Another advantage is, the grid breakpoints of both frameworks are compatible as well. See Bootstrap 4's breakpoints and Ionic 5's breakpoints.
How To Use
bootstrap-utilities node package can be added to your project, with the usual steps:
npm install bootstrap-utilities --save
or for yarn:
yarn add bootstrap-utilities
Add then add the following line to global.scss:
@import "~bootstrap-utilities";
Now, all the utility CSS classes from Bootstrap 4.1 are available for use in your Ionic 5 project. To see a detailed list of classes available, refer the utilities section of Bootstrap 4.1 documentation. These classes could make UI development in Ionic 5 easier and faster for developers having experience in Bootstrap, as well as those who want more advanced utilities than what Ionic offers.
Top comments (0)