DEV Community

loading...
Cover image for Why bootstrap utilities makes your Ionic development easier

Why bootstrap utilities makes your Ionic development easier

Rohan "HEXcube" Villoth
Cube³ the Fun!😊 I’m a UI/UX designer, open source enthusiast and former web developer.
・2 min read

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
Enter fullscreen mode Exit fullscreen mode

or for yarn:

yarn add bootstrap-utilities
Enter fullscreen mode Exit fullscreen mode

Add then add the following line to global.scss:

@import "~bootstrap-utilities";
Enter fullscreen mode Exit fullscreen mode

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.

Credits & Sources

Cover image created from logos of Bootstrap and Ionic.

Discussion (0)