Elixir Phoenix: Installing Bootstrap 4 Beta
Time to try it out
Bootstrap 4 is finally out of alpha and into beta. I have stayed away from Bootstrap 4 while it was in alpha. Now that it is in beta and I am updating one of my projects to Phoenix 1.3, it is a good time to try it out.
This will involve removing Bootstrap 3 from the phoenix.css, installing Bootstrap and jQuery using npm, and making some changes to our brunch-config.js.
Let’s get started!
You will first want to uninstall the version of Bootstrap your app is currently using. This could mean removing a CDN link, using npm uninstall, or removing it from your phoenix.css file. For my app, I will be removing it from phoenix.css.
Before you run any of the following commands, if you are using Phoenix 1.3, be sure you run cd assets so you are in the correct directory. Run the following two commands.
We will next make a few changes to our assets/brunch-config.js. Here are the three parts we will be adding.
assets/brunch-config.jsAnd here are the parts in the context of our default brunch-config.js (yours may look slightly different depending on other changes you may have done).
Next, we will need to change the name of our app.css to app.scss. Inside our app.scss, we will add @import "bootstrap";.
That is all there is to it. Hope this helps!
Follow me on Twitter @thebrianemory. Follow me here, click the hands below to show some appreciation, leave a comment, and get in touch!
