How to add Bootstrap to Ruby on Rails 7

In this post we're going to be creating a new ruby on rails 7 application and we're going to use bootstrap as a default CSS framework so how we do this in ruby on rails seven is a little bit different from how we did in previous versions of ruby on rails.So previously we would have to go through this entire process of installing similar age or including a link to the Cdn version of the scripts that we need.However, in ruby on rails seven, we can actually do this from the command line when we are creating a new application Before we get into that, make sure to take advantage of the skill share, premium 30 day full access using the link in the description below.So you can access unlimited courses for a full 30 days including my own ruby and rails six course which is on the website.So make sure to use that code and take advantage of that in the description below.So let's get back into the post when we create a new ruby on rails seven ap we have the option of specifying what CSS framework that we want to use and that's how we're going to set this up in this post.One thing to note before we create the application is that we want to make sure that we're using the right version of ruby.So in this case I'm using ruby version Manager and you've probably seen me in the previous post talking about this, we can use ruby version Manager to specify the version of ruby that we are running when we create our application.So in this case I'm going to list the known versions of ruby that I have installed And you can see the default one is 2.7.3.So RVM use 3.0.0.so I'll run that same command again.Now we can see we've got this version of ruby loaded.One thing I could do here is to create a new gem set for this test application or this test Ruby on Rails 7 app.and what we'll do is use ruby version manager to do that say ruby gem set, create, let's call this test app.So this just means that any gems that we install as part of this Rail seven App, they are all contained within this gem set.So now the next thing we can do is use the rails new and I want to show this help pass in the help option here just to give you an idea of what we can use here.So what options are available to us, Somebody screen. It's a little bit small here.Let me just make this bigger. So you can see it.So if we look at the C S. S frameworks so we have this option to choose a CSS framework or processor as they've labeled here.So we can use tailwind bootstrap you know, and a number of other options here.So whichever one you prefer to work with in this case for this post, I want to show, just using bootstrap, but you can also use tailwind if you prefer that two.So let's clear this green and I'm going to create a new application based on the CSS framework, so we'll say C S s and that will be bootstrapped.So now when we do this it will configure bootstrap for our application.Of course we need to give our our rails, new application a name.So in this case I'll just call it test that.So this is installing all of the gems into the new gems set that we created at the beginning of the post.So one of the nice things about installing your CSS framework in this way is that it removes a lot of the problems that you may encounter when you add it to a new application.So this is something that a lot of people have experienced in ruby on rails six.When they add bootstrap, when they add tailwind, that there are some issues linking up the style sheets.When we installed bootstrap and tailwind in ruby on rails six.The common way to do it was using web packer and installing bootstrap or tailwind in this way can lead to a number of problems, especially when it comes to linking up your style sheet.So in ruby on rails six.When you were using s CSS files, it would have to compile it into CSS files before it gets uploaded to the server.So when you push the production, you're actually pushing a compiled version of the style sheet and part of the issue there was linking of that style sheet from the nPM node modules.So it is quite tricky and way in the way that it was set up in the previous version of rails.But I think in this version it is a little bit more simple because it it handles a lot of these issues for you.So the installation is finished now and what I'm gonna do is open this up in our code editor, so it's clear this green and now we want to open this up in our code editor.So first of all, let's open that directory.So once we open this up in our code editor we can have a look at what's been done for us.So we've got the new application set up and if we have a look in here, let's have a look and see what we've got.So we've got our so have a look at this package dot jayson.So we in the package dot jayson, let me see if I can hide this a little bit.so you can see I've got bootstrapped installed here as part of the dependencies under this Jason package dot jayson for the dependencies.We can see we've got bootstrap, we've also got sass installed and we've got the hot wire default packages installed.So if you look here at the bottom under scripts, we can see that we've got this build CSS.So this script from what I understand is just running this build to include bootstrap, so that would be included as part of the application dot CSS once it is compiled and you can see there's an option here for no source map and load path equals node modules.So now let's have a look at our assets directory.So there should be something in here that includes the style sheet.So again, we've got this import bootstrap slash c s s c s s slash bootstrap.So this is basically taking this out of the node modules directory, so if we actually went in and look in the node modules, we can probably find this CSS file is being imported or this s CSS file has been imported, whatever it is.So if we look here, we'll see the node modules and if we open that up and we go down, let's have a look.Let's look for Bootstrap. So that's under S E S s.So we don't really need to look in here at all.I'm just curious to see how this is being okay.So now what is happening is it's importing all of these separate partial files that includes all of these components and layout functionality for Bootstrap, so all of this is getting imported and built into one single file.So you could actually go and have a look at these if you wanted but we don't really need to do that.But the point here is really that it just simplifies all of this stuff by including the option when you're installing Or when you're setting up a new rail seven application.So we didn't have this luxury in rails five or Real six.So this just takes a lot of the effort and a lot of work out of getting up and running with a new CSS framework.So you could go ahead and test this further.So if I run the application now and if you just to make sure that this is working correctly.So in here on the application dot html dot RB.So that's the default layout that will be loaded once we open this in our browser.So in here I could just, you know, go ahead and create a default container class.That's like the top level layout class for for bootstrap and then I could say class equals row, class equals column.So this will give it like a 12 layout. Alright, 12 column layout.So rather than the page being the entire width, like from end to end, this would limit the max width of the page and it's an easy way for us to see that this is working Okay, let's move this across and maybe this isn't the easiest way to see that this is working because I've got this default page.But let's load a custom page here. So this default one is the default route.So let's look at the controllers, we have a application controller and you know, I could just put in a default, this isn't normally normally we create a new controller to do this, but I could just go default home.Just create a new route. And then that would that would give me a new folder in here.It's called this application home dot to meld on your b and if I wanted to make that work then I would just change the routes in here.So you set the route as the default route, which is like this.I have an example here,I think I called at home.So that's Reload the page so you can see now that you can see now that, you know, we've got this max with this, this column layout so we can see now that the pages loading and we've got this new view that I've created is like an example here.So what's happening is this is actually already working for bootstraps?We've got the layout, you know, it's got this max with on the layout and you could test this further if you wanted to see, you could simply come back into this, let's give the listeners to a quick example here.I could just create this as a give this a button of success and reload the page and you'll see you've got this kind of bootstrap button.So that's a very quick example of how to set up bootstrap and your new application, your new ruby on rails, seven application.And in the same way you could have just easily done tailwind here so you could change that value that you're passing in when you create the new app.So you just say it it's tailwind instead and then you would simply be able to come in and use the the classes for tailwind.So that's about it for this post.Just a really short quick one on how to set up bootstrap and a new ruby on rails, seven application.If you've enjoyed this post, make sure to give it a like and subscribe to the blog and I will see you all in the next post.