Image
#bootstrap #rails
Posted May 06, 2021 ‐  2 min read

Rails : How to work with Bootstrap v5

A tiny article to explain the workflow when you work with Bootstrap v5. If you want a setup from scratch, see this article.

1. Download the source file

Go to the "download" section of Bootstrap, the URL should look like https://getbootstrap.com/docs/5.0/getting-started/download/ - the version number may vary, it depends which version you prefer.

Then click on "Download source".

Unzip the file, then open the created directory, and copy the scss folder.

scss folder

Then paste it at the root of your regular workspace folder, and give this folder a memorable name (like bs5_scss)

2. Open a workspace

Now open your favorite code editor (here Sublime on the screenshot) at the root of this new folder

Bootstrap and Sublime

Good ! now you are able to search in the pre-compiled stylesheet.
It's also worth reading the code to see how the CSS is structured.

After the quick tour, open the _variables.scss file.

3. Let the _variables.scss file open

Note that you can change the SCSS, but the most customizable file is _variables.scss - hence the name.

Outside these variables, deep Bootstrap customisation is still possible, but is more hacky - you have to be good at CSS.

My advice here is to stick to the _variables.scss file customisation, and simply use the capacity of each CSS property to be overloaded if you need deeper customisation. Thus, you won't risk breaking Bootstrap's internal mechanisms.

One good news is that version 5 of Bootstrap is deeply customisable, and in these times of utility-first CSS classes, you can even add your own utility classes.

4. Be able to toggle with this workspace

Now each time you have to work with Bootstrap, you can simply read the sources, it's even easier if you are able to toggle between your IDE's workspaces. I've mapped the CMD + @ shortcut on my Mac to allow window switching, you probably have another trick in your environment.

5. Let's the official docs in the browser open

This is a no-brainer : open the official docs here, and use the "search" button on the top-left corner. I can't remember when Bootstrap added a fuzzy search, but I find it extremely useful for daily coding.

6. Conclusion

I think that the combination of a tab opened to the official docs and a workspace opened to the source is extremely powerful.

You can't memorize all the selectors and all the way of thinking of a CSS framework.

That's very true for heavy CSS frameworks like Tailwind or Bootstrap. And still relevant if you use a smaller CSS framework (in this case, a cheatsheet could suffice though).

Help needed 😊

If you enjoyed the article, you can :

  • Share the article on Twitter , or LinkedIn , or Reddit , it will stimulate the writing effort, thanks !
  • Subscribe to the newsletter, you'll be warned each time a new Rails tutorial is released : we start from the rails new command to fully understand a new concept.
  • Subscribe to the Bootrails Beta, it's a tool to launch new Rails apps.

Thanks to all,

David