As I mentioned in the last guide, this is going to be a pretty time-consuming process here. And in fact, I have a timer going so that if I go too long, I'm simply going to stop it will save and then we will move on in the next guide with it. And the reason why it's so time-consuming is that we're going to have to build the styles for each one of our authorization pages. So that is going to be our registration page. Our login page our forgot your password page and also the edit page for users. We're going to have to build our styles here. Now some of this is going to be very repetitive. So what my process is going to be is I'm going to take one of our harder ones which is actually going to be this edit page right here, and I'm going to do that one first, and I'm going to go a little bit slower in that one. So I'm explaining myself at each stage and exactly what I'm doing from that point for the each of the other pages. I will move a little bit faster so that way I'm not implementing anything that you're not aware of but simultaneously you don't feel like it's monotonous and a waste of time going through it. Honestly, if you're going to be using frameworks like bootstrap and these type of code libraries then it is very important to understand this and to become fluent and how all of this works.

Now also part of the reason it's going to be a little time consuming is that we're going to override some of the styles provided by bootstrap. So we're going to have to do kind of research how that should work, and I'll walk you through that whole process.

So first and foremost let's talk about some of the key components that we're going to have to work with. I don't really want to have my form on this kind of background. I like having this background for the rest of the layout but the form itself I want to have that on a white or can like an off-white background I think that gives a little bit of nice or professional kind of touch. So let's get a look at the bootstrap documentation, and I'm going to show you a component that I find perfect for this. If you take in any of my other rails courses that have bootstrapped for this is one of my favorite ones, so you come down and come to components in the documentation section and come to card. You'll see that bootstrap for has this concept of cards, and I absolutely love these. They provide all of the kinds of things you'll notice from sites like Twitter or Facebook where there are these little kind of rectangular components where you can put content inside. If they come by default with slightly rounded corners and they just I think they have a really good look and feel and they have all kinds of different ones. So we're going to take what they have, and we're also going to customize them a little bit. So technically we can grab any of these. I want to grab one of the more basic ones so coming down and see this is a pretty basic one right here.

This is I think this is perfect. We can put a button inside where we do not have to in the same spot so we can just come and grab these items and I'm not going to worry. This comes with sizing utilities as you can see. I'm not so much going to worry about that. I'm going to perform some overrides and show you how that can work. But let's just copy this code here. In order to affect the page that we want to close our contact page and open up the registration page and if you want to follow along then this is going to be in views, devise, registrations, and edit. This is the file we're going to start off with. Now before I try to do any kind of implementation, I'm just going to paste this the very top of the file just to see what it does. Coming back refresh you can see this gives us our card. It also gives us that size.

So I'm going to pull that w 75 and pull that off because I don't need that. And now that gives us the full container size. So as you may notice this goes from all the way to the left all the way to the right. And this is what I want for these larger components. I'm going to walk through how to shrink it down for smaller components later. So this is the start of I want now inside of this you can see some other divs, so this has a card. It has a card block, a card title, and then it has card text. Each one of those items I don't care for this card title we're going to be able to implement this ourself right here.

So if I just come up slide that in. Now if I hit refresh it says edit user. And you may also notice that it's all white. So let's perform our first override. The easiest way to do that is simply going to be adding it to one of these classes so we could do it to card block. Let's see what this looks like. I'm going to open up the application CSS file and coming all the way down. I'm going to also add a comment. So I'm going to say custom styles. So this way we can know this is where our custom styles that we've added are. So now with all of this, I'm going to grab a card block, and I have to put a dot in front of it because this is a CSS class. Now let's see what we can do about color. So I'm going to say color black.

Now if I hit refresh. Is that going to fix it? Yes, it does see that. What that essentially did. This goes to what style sheets do. This is a CSS file. Technically it's an SCSS file but just ignore the first one that stands for Sassi which means that we have some very cool features we can add to CSS files. Just think of this as a traditional CSS file and think of what the C stands for. I talked about how the C stands for cascading which means that card block is something provided by bootstrap but because we are defining this at the very end of the file and this is even after bootstrap is brought in, because if you go to the top of the file, we imported bootstrap. So it has all of those CSS files and styles provided by bootstrap at the very very end where a calling card block. What essentially we're doing is we're simply saying hey for a card block I want you to add this style to it, so it doesn't overwrite it in the sense that it knocks out all of the cool stuff provided by card block. It simply appends to it, and it adds onto it. So that's how we're able to get this behavior. So that's exactly what I want to start off it says edit user.

Now let's talk about implementing our form. The first thing I'm going to do is I'm going to get rid of all of this placeholder text.

Let's talk about what we need to do to get our form inside. It can simply cut and copy lines 12-57 go up paste it in.

Now if I hit save and come back and hit refresh you can see that this is in here and it's still kind of ugly.

Part of the reason why is one. We're not giving the form styles here. So that's going to be one of the things that we need to do. But also one thing that I'm not a huge fan of is I don't like having two headings on top of each other like this. What I actually want is I want all of our edit user content to be here, and then I want this cancel my account unhappy button here on the right-hand side. What we're going to do is set up columns to make that work. So in order to do that I'm going to come right above. Or I should say right below the form here are actually let me pull this up. We want to edit user all the way down to update. Actually, I'm going to create the column starting right above at edit user. So my column is actually going to be starting here. The way that you do this and bootstrap is you create a div, and this is going to be kind of like a parent div and you give it a class of row.

Now inside of this, you create divs for your columns. So you're great you're going to create two divs, and you give them a class with a column, and then you define the size. So for this, I want to give this a size of md-8.

This is going to then create a grid and it's going to give this whatever's inside of here is going to take up eight twelfths. That's the way a grid works with bootstrap is. Imagine this being the start of the grid and this being the end of it.

The way it works is you're going to have one, two, three, four, five, and all the way down to where you get till 12. Think of them as like little Lego blocks that go from side to side, and there's 12 of them. Once you get to eight which is going to be right around here that's where one column is going to end, and then the other column is going to begin. So we're going to create that first column and everything we put inside there is going to fit inside of it. And now we're going to create another column. And this one because these always have to add up to 12. You may have three of them but they still have to add up to 12. Or else you're going to get some distortion.

So first I'm going to pull out this cancel my account content(on lines 55-58) because it's just less. I'm going to put it inside of this column(col-md-4), and inside this grid then I'm going to grab all of the edit(lines 14-55) all the way down to the end. so this is the form itself, and I'm going to paste this in and then make sure you indented properly.

Then for the back, I'm going to leave this here(line 59), for now, we're going to do some things with this afterward. Let's see if we are making progress, If I hit refresh like that we now have our edit which is all of our form elements here and then we have canceled my account right up here.

Still not perfect but it's getting better. So let's now take a look at how we can get these form elements, and I use bootstrap every single day, so I know all the class names and that kind of thing, but I want to show you where you can find these. Once you do it a few times you'll see that they're pretty common sense, so they're relatively easy to remember. If you come to the bootstrap documentation come all the way up and then go to forms. This is going to show you all of the available forms, and it's really cool they have all kinds of various form elements and things that you can type in. We're going to just use the basic ones and there they're these ones right here at the top. So in order to add these styles the first thing is we need to wrap every one of our form elements in what's called a Form group class. So, in other words, this email address right here. This is all inside of a form group so I can simply copy this and come into sublime. I'm going to put this right at the top and then delete it just so I have something to go off of as a reference point. Right now if you notice it has a class of field that's what devise gave us what we want form group, and we want this for each one of our form components.

Add all of those. That's the first part. So I like to delete them when I'm done with them so that I don't risk duplicating. Now the label this is set for us automatically and as you can see we don't have any classes or anything so we can just get rid of this. Also, that whole little thing where it says will never share all your email address with anyone you can put that in if you want. I'm not going to. So all we have to worry about is this last thing which is the actual text input itself, and all we need here is this class. Everything else we can get rid of. So I'm going to get rid of all of that. Now, all we have to do is come to the end of each one of these text fields and come here, and the way you know is Notice where it says label, and then the one right underneath says text field or password field or one of those come to each one of those, hold down the command key the entire time. The put comma class colon than in quotation marks then paste the form control, and once you have that done.

Now each one of those elements is going to have the right style. So if I come back to the site hit refresh and look at that, that is looking a million times better.

Let me come back here. There is only one more thing that I want to do before I hit pause on the video because this is like I said this one is taken while I want to give you a break so I'm going to add a class to our button and this is going to be btn-btn primary. If you want to research all the buttons that are available, you can come up to the regular component list and then click on buttons, and this will show you all of the buttons along with their names. I want primary right here. You could do secondary success any of those. I just want primary. You can see now it says update. I also for cancel my account when I want to add one for that as well as a class btn-btn danger. hit refresh. Now you have a red button, so all this is looking good.

I'm going to pause the video and give you a little break and when we come back I'm going to show you how we can style the text here so that one is aligned to the left and then also you can barely see our back button right here so we're going to create a class that customizes all of the links in our authorization are in our authentication form. So I will see you in the next guide.