John_Shelby

John_Shelby

Phoenix 1.7 Bootstrap CSS for Core Components

Hello,

When I upgraded to phoenix 1.7, core components with tailwind CSS are now available. Does anyone have rewritten classes for these components in Bootstrap CSS please? I have little experience, I want to use these components, but at the same time I have no idea how to efficiently convert them to Bootsrap CSS.

I knew I couldn’t convert it 1:1, but I was asking for an alternative.

If anyone has a conversion to Bootsrap and shares, I’d appreciate it.

Thank you very much for any help! :slight_smile:

Most Liked

jmnda

jmnda

Hello, I have linked to a repo I was using before I migrated from Bootstrap to Flowbite. The repo has core_components.ex with Bootstrap styles. I have striped away the personal stuff so it’s just a bare dashboard template. I have added some simple LiveViews for Product and ProductCategory to see the components in action.
Repo: GitHub - jmnda-dev/phx-bootstrap-dashboard: A Phoenix framework bootstrap dashboard with Bootstrap styles `core_components` · GitHub

The Modal and some form inputs have some of their styles in the app.scss file. You can follow the ReadMe for setup instructions.
If you have any questions let me know.

7rans

7rans

It shouldn’t be too difficult, just a bit time consuming.

You could start by converting all the tailwind classes to inline styles. With the exception of a few css variables that’s rather straightforward translation. Then you’d have equivalent functionality but no longer need tailwind dependency.

After that you can migrate to bootstrap at your leisure. See Phoenix 1.8 and Bootstrap 5 · FullstackPhoenix for some ideas on this.

simonangatia

simonangatia

Thank you so much. It really helped me.

Where Next?

Popular in Questions Top

Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
vac
Hi, I’m quite new in Elixir and I’m trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and I...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41539 114
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
Lily
In templates/appointment/index.html.eex: <%= for appointment <- @appointments do %> <tr> <td><%= appoi...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

We're in Beta

About us Mission Statement