- Read Tutorial
- Watch Guide Video
Now that I'm happy with the design we have on our edit user account page we can start populating these same style elements throughout the rest of the application. If I go to the registration page which I can click log out and then register. You can see that this is not looking very good
but we can use the exact same styles that we used on our edit account page including having the two columns. So let's come into sublime and I'm going to go and I'm going to click on View and layouts and then I'm going to go with two rows and doing this in sublime So I'm going to edit right here so that I can see it and then I'm going to pull down the new registrations new file and put it right here.
and now what I can do is essentially just copy all of this so I can grab those first top items. We're going to make a few changes it's not going to be identical but this is going to at least give us a good starting point. So now I'm going to do that. Let's come select everything and I'm going to hit tab a few times until this is fully nested inside. So we want to have our div class card card block row and then column.
Now the way that I want to set this up is I actually want to have, I may have to rearrange this slightly but I essentially want to have the email and name here on the left hand side and then the passwords on the right hand side. Let's take a look and see how we can do that.
This is where the subtle changes come in, before we wanted the entire form on the left hand side. Here we want the form actually to be the entire page. And we want the elements made up of columns so the way that we can do that is I can actually just grab this column call right here. And then all of these other items will be able to move to the left slightly including the form element, the divisors. Everything like that. And now our e-mail and name are what's going to be inside of these. So I can say column md 8. And then inside of this move is inside. And now we have to make sure we close off our DIV tag. And that's going to give us what we need.
Next thing is we need to have form groups for each one of our fields and we can even come and do it for these other ones down here as well and our actions. Everything's good there. Now one other thing we have to do is make sure that we close off these three divs so if you count the lines we have 1, 2, 3. We'll need to do the same thing down here at the bottom. So I'm going to close off one, another one, and we're going to have to do one more. That's going to close off and if you line them up you'll see that it close off the card, the card block, and then the row. And the row, remember once again, is what contains all of our columns.
So here we have column md 8 that's going to include our email and our name. Now let's come and let's do the same thing for our password and for our password confirmation. And close off the div tag and then nest these inside.
So far so good.
Next thing is we need is our form control classes. I'm going to come add it to the end of the email field and the text field and moving down we're going to do it in both of the password fields. Then our button right now is going to look pretty ugly so let's come and fix that. You can come in grab just the button primary here for sign up
save and we're still not done. Because remember how we added the special off link class? We need to still do that over here. So we're going to create a another div that our auth links are going to go inside of, And now close it off. And that should give us at least a good starting point. I'm not sure if this is going to be everything that we need. But let's go see what this looks like now. Hit refresh and still not exactly what we're looking for.
Let's see exactly what is occurring here. Anytime you implement a set of classes and they aren't working the first thing that I do is I'll right click, click on inspect and see exactly what's going on. So if I do that here. You can see that we have a form element right here. And then we have column md 8 and I think this is what our issue as I just copied and pasted column md 8 right here and that is going to be a problem. Remember how I said that they always need to add up to 12? I don't think this is the whole issue but this is at least one of the issues. These need to both be at 6 or else you're going to end up with some weird behavior. Hit refresh. And that still didn't fix it but that at least fixed an issue we would have later on.
So now let's click inspect again and see all of these items. So first and foremost our row is looking good. So that part is accurate. Now we have auth links that's kind of over here all by itself. And then we have this other item which is the form. And I think that this may be what the issue is because it seems to be kind of be locking this in place. So let's come up all the way to the top and let's see exactly what could be causing that.
I think the issue is if you scroll all the way down and you see what is being nested inside, the issues actually that I want our row to be nested inside of the form and right now I have it outside so I'm going to fix that and pull that part of it out and I'm going to actually implement the row call right here. Everything and the way I cheat with sublime is I just put my cursor right here and then scroll down with my mouse and go all the way down to make sure that I am lined up. And now what I can do is I can grab all of these elements so everything here hit tab and then I can close this out.(He nested everything over)
Moving down notice how we should now have one spot that's missing. So we have an extra div here. And now we can un-indent everything so that it's nested properly. Just to make it easier to see I'm going to switch the layout so it's all in one now. So now we have our row and then inside of this we have our columns nested and let's see what this looks like. And this other auth link call this may have to be nested inside here as well but we're not going to worry about that at this moment. Let's come hit refresh. There you go. That's what we needed.
So essentially what was going on right there is because I know that was kind of a lot to take in if you have not worked with bootstrap before. But what I was doing before was I had the row that took up the entire thing and this is something specific to bootstrap. And so the row was taking up the entire card component but then I had the form nested inside of it and that was what was causing the conflict. So instead I brought the row inside of the form and then it gave the type of behavior and we now have our nice columns and all of that.
We're still not quite done yet though because notice how these are not really lined up the way that you'd want them to be. So what I can do here is kind of cool. We can actually add more columns. So I'm going to add more columns and if I do something like this. (He added more columns) This is kind of a trick for being able to get your columns lined up differently so I'm going to create two more columns. I'm going to make one nine and the other three because I always have to add up to 12. Then I'm going to put our form group for our button here(he put it under the new columns) and then I'm also going to put our auth link here and that's going to help them be lined up. Fix the indentation. And now let's see what this looks like.
I'm going to come down here. And let me take one quick look just to make sure I do not have any issues with indentation because it looks like I have if you notice do you see how I have one line that kind of looks like it's missing? That may have something to do with the auth links that I had. I have my card block all the way down. And then I have the form for that's going down. This is the part that is lined up. So that looks like it's the issues so I need to grab everything there. Perfect. (he indented every back)So your div for row should now be lined up. And now if you scroll all the way down notice how this is all nice and lined up with this diagonal kind of direction. That is going to be a nice way of doing it just to make sure that we have closed out all of our div tags.
Coming back to Chrome. If I hit refresh this is starting to look a little bit better. Still not perfect. Let's see exactly what else we need to do. What I ideally want is for this to be aligned all the way to the right it may be even bigger. And one very cool little class that can accomplish this in bootstrap is called the button block. So I can say btn-block. And now if I hit refresh you can see this takes up this whole area right here and this is what I'm looking to do.
So this is looking good. Now technically I also could look at what I need to do in order to move this all the way to the right. So let's right click on this, click inspect. And if I click on element style I can say text align right and you can see that that doesn't actually do anything. So even though I'm saying text align right this is not actually performing the override that we're really looking for. The reason why this direct text align isn't working even when we're calling it right on the element itself is because of the way just the links are being set up by bootstrap. All of our text by default is being said hey I want you to move to the left and simply changing text aligned to the right isn't going to do that because we're calling it on the link. What we need to do is call it on the parent element. So if I undo that and I can close out of the inspector and switch back here.(here is the code) Let's see how we could do it. We know our links have this parent element of auth links. So if I come here and just so you know this is a bad practice you wouldn't ever do this inside of a production app and I'm not going to keep this here. But this is something where you can test your theories out so I can say text align right. And now if I come here hit refresh you can see that that works.
That tells me that all I have to do is add text align right in to either auth links or to create. This is what I'm going to do. I may not want all my auth links to be to the right. I may just want this one. So what I can do is say register text and that's going to be a new style and I'm going to copy that. But open up our application CSS and come down here. Say register text and now inside of this I can put text align right. And now this should give us the behavior we're looking for. So put text align right there. Come back. If I hit refresh. Now this is working and this has the links like I want.
I am still not sure I may not want that quite as wide as as it is right now. So what I can do is I can actually change this. So instead of nine and three for the grid I can say ten to two. And there you go I like less size better and we're nice and bottoned up here on the right hand side. So now if I click any of these links you can see that this is working. And now if I actually log in and go to edit you can see that this page looks nice. And now our registration page also looks nice. So far so good. In the next guide I'm going to knock out the log in page and then also the forgot your password page so I will see you in those guides.