olivermt
Without further ado: GitHub - surface-ui/surface_bootstrap · GitHub
Some TODOs:
- Get it up under https://bootstrap.surface-ui.org and get it linked from main surface docs
- Some utility classes for rows and grids, just need to think a bit more on how to make it oppinionated enough to be useful in saving time but also allowing the insane amounts of permutations you need to do to full flexbox stuff
- Tooltips and popovers coming soon ™
I hope this library will seriously lower the bar for people to start using Surface and be able to pump out pages using the Comic Sans of the internet 
Thanks a dozen to all my sparring partners on the Slack in getting this out: @msaraiva @paulstatezny @Malian and many more.
Open issues for any bugs or feature requests!
Where Next?
Trending in Announcing
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Producing high quality Elixir screencasts since 2017.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First Post!- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
the_wildgoose
This looks fantastic! Huge fan of Surface! (If anyone hasn’t tried it, then give it a whirl!)
One thought: I had a colleague struggle with integrating a modal popup and I took a glance. It seems like at least the modal can be emulated fairly simply without the bootstrap JS? It appears to just hide/show the modal div + cover the whole page with an inserted overlay. I wonder if there is another route to integration here without the hooks? Just a thought?
Most Liked
olivermt
Small maintenance release 0.1.1.
Coming up in next few days is:
olivermt
v0.2.0 released!
Migrate to Surface 0.4.1 (atoms not auto-cast anymore), has to be 0.4.1 or above because 0.4.0 swamps with compiler warnings due to a change in LiveView
[BREAKING CHANGE] Completely rework NavBar, look at examples to see how to use NavBar. It has been moved to only implement the outer and main components as I was unable to find a proper middleway for all the permutations. This is a BREAKING CHANGE because the old NavBar was naively done and could not support sidebars, and it also did not implement the collapser properly.
Added a naive tooltip implementation, injects a with random ID, so it might provoke rerenders.
Exposed a hook you can simply use with
:hook={{ "Hook", from: SurfaceBootstrap.Tooltip }}. This requires you to put a unique HTML ID on your component, as this is a requirements for hooks to fire.olivermt
v0.2.3 (2021-06-22) released!
Icon.valuesprop to Button that passes on to:valuesdirective.optsprop to Button to pass on as attrs on<button>Last Post!
olivermt
v0.2.4 (2021-06-23)
v0.2.5 (2021-06-23)
Breadcrumb