Skip to main content
25 Javascript and CSS Asset Pipeline:

Using Bootstrap 4 Rubygem with Rails

Episode 88 · September 2, 2015

Bootstrap 4 was just announced and you can start using it today in your Rails app

Frontend


Transcripts

If you're like me, you probably use Bootstrap in many rails applications, many websites in general, over the last few years. It's been about four years since bootstrap was released, and bootstrap version 4.0 is about to be released in the next couple months, so bootstrap 4.0 alpha has been announced, and it comes with all kinds of changes, such as they moved from Less into Sass, which means that the rails community gets the benefit from that, because now you don't have to have both Sass and Less in your rails app, they've improved the grid system, done a bunch of other things, they've also re-written all the jQuery like JavaScript plug-ins from scratch, there's all kind of changes that have happened which are great for us, but annoying because we have to upgrade our applications from Bootstrap 3 to 4, and I know how much of a pain that is to maintain those if you never upgrade, so we're going to take a look at all of this right now and kind of work our way into it, and just be familiar with what changes are going to be required. You've probably installed bootstrap 2 or 3 in your rails app at some point, and you may have used the bootstrap-sass gem because this converted that code into Sass, so it was a little more flexible in the asset pipeline and just kind of worked smoother. There are plenty of other ways to have installed this, but this is one of the most common ways of doing so. A recent discussion about this gem has been talked about, and they decided to create a new gem called "bootstrap-rubygem", which you can find on Github, and this is going to be where Bootstrap version 4 alpha and above live from now on for rails users. This is the gem that you're going to be using from now on, and you can install it and take a look at it with bootstrap 4.0 alpha by adding the gem and specifying from Github. They have similar instructions on setting this up as they did with the old one, but there's a few changes, namely one mentioning this tether requirement that might be important for your application if you're using tool tips or something like that. Tether is an awesome little library built by the hubspot team, and it allows you to use things like the tool tips and a lot more flexible matter. Just something bootstrap had annoying tool tips in the past, depending on how your html and css is laid out. This is the gem that you're going to be using going forward in rails to run bootstrap 4, and it's really simple to set up, and then you can take a look at v4-alpha.getbootstrap.com, and that is where the documentation will live for version 4 and so on.

That's about it right now, there's not a whole lot of information out on bootstrap 4, you'll have to dive into the source code a lot, I'm sure. The documentation is a little sparse on their website right now, but they have some really fancy things such as these new officially supported bootstrap themes that you can buy for about 100 bucks, which is pretty great because they look pretty well done. That's bootstrap 4, and the changes you'll need to make to get started, checking out bootstrap 4 in rails today. That's it for this episode, I will talk to you later. Peace

Transcript written by Miguel

Discussion


Fallback

Fallback

FYI - twitter themes - are built with BT3 just so you know


Fallback

I put rails-assets-tether on ruby gems which has the advantage of not specifying the source and also giving the ability to use rails-assets-tether in another gem(and thus specify in gemspec) https://rubygems.org/gems/r...


Login or create an account to join the conversation.