How to replace milligram to bootstrap in phoenix 1.5?

Phoenix Forum Questions / Help
,
1

Hi, someone has tried to replace milligram to bootstrap as the CSS?

or do you know some post related to that?

thanks.

2

The FullstackPhoenix website has a generator for both bootstrap and tailwindcss that might be helpful.

https://fullstackphoenix.com/boilerplates

3 Likes
3

A: In short, just import bootstrap directly.
B: But, how to import?
A: In out context, import is a feature provided by Webpack. Do you know something about it?
B: No.
A: So… that’s a long story.

It’s better to know some basic concepts of Webpack, or it will block you again in the future.

It just likes ‘before you using Phoenix, you should learn some basic Elixir’.

1 Like
4

It is not that complicated…

To remove milligram comment in assets/css/app.css reference to phoenix.css

Next install bootstrap…

npm i --prefix bootstrap

and reference it in app.css like this

@import "~bootstrap/scss/bootstrap.scss";

# or 

@import "~bootstrap/dist/css/bootstrap.min.css";

And You will already get the BS look and feel. But using bootstrap javascript is a bit more complicated, as it needs jquery, popper.js. You need to learn a little bit of Webpack.

You need also to configure webpack for fonts and images if You use icons.

BS5 alpha is out, dropping jquery dependencies, and I am waiting the beta version to remove jquery from my projects :slight_smile: