Using bootstrap with Adonis.js Framework

Using Bootstrap with Adonis.js Framework

Out of the box, the starter kits for building web applications with Adonis Framework are setup to use tailwindcss. Now, I don’t know if you’re familiar with tailwindcss, but it’s generally a very do-it-yourself collection of CSS class names to construct styles with.

Whilst I can work with tailwindcss, sometimes I just want to have some generally nice looking UI without a whole lot of effort initially, just so I can test out an idea and get something working that looks better than completely unstyled web content.

There are UI component libraries for tailwindcss, but if I’ve gotta setup something special to use them, then I may as well setup something that I already am familiar with for getting things done quickly. There’s a time and a place for building a UI design framework and component library, today’s not it.

So, how do you use Bootstrap with Adonis Framework? What do you need to change to get Bootstrap Icons working with it? Turns out it’s pretty simple.

First we need to add bootstrap and bootstrap-icons to our project:

$ npm add --save bootstrap bootstrap-icons

Next we also need sass, since Bootstrap uses sass under the hood:

$ npm add --save-dev sass

Next, we need to configure Vite to use scss and include the Bootstrap Icons:

You can also see here that I’ve changed the default resources/css/app.css to resources/css/app.scss — this will enable using the scss functionality from Bootstrap.

Now we can delete the resources/css/app.css file and create a resources/css/app.scss file, and paste in the following:

@import 'bootstrap/scss/bootstrap'; 
$bootstrap-icons-font-dir: 'bootstrap-icons/font/fonts/'; 
@import 'bootstrap-icons/font/bootstrap-icons.scss';

Next, if we want the Javascript parts of Bootstrap, we can edit resources/js/app.js to have:

// Import all of Bootstrap's JS 
import * as bootstrap from 'bootstrap'

Finally, we need to tell our edge.js views to use the new files, by default you’ll have a line in resources/views/pages/home.edge like:

@vite(['resources/css/app.css', 'resources/js/app.js'])

And we just need to change the .css to .scss and we’re done. We can also delete all the tailwind stuff from that file. In a real-world application, you’ll probably make use of a layout component and that’d look something like this one.

Now that we’ve done all those changes, make sure to restart your development server, and you should be able to carry on using Bootstrap!