Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Style the login form
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We have our button style but would you accept that as a login form? I don't know I guess maybe in 1995 you would you would not accept it now.
0:09
But we're actually so so close to making this beautiful. Lets just do a little tiny bit more work here. Over on this lets go to the body
0:18
and set a background color. It didn't matter what I pick, I'm just going to use this little feature here that lets me kind of pull
0:27
and grab cool like, lets go for a light blue but then lighten it up. That could be a cool one and then for the form I say background color is white.
0:37
How we doing? Okay, next lets have this kind of float in the middle so we're going to say max width is going to be 450 px. Better, getting there.
0:51
Now I'd like that to be down and centered. Right how do we do that? Well we can set the margin left to be auto and the margin right to be auto
1:03
and that puts it right in the middle you can see it centers, that's a pretty cool little trick and then lets say margin top is going to be 50 px
1:12
pretty good and hey while we're at it lets do border radius to be, I don't know, 10 pixels. There we go, beautiful.
1:22
Next lets come down here and we'll put maybe an h2 login here we go and lets have that centered as well
1:31
do a couple of things, also want to center those buttons and put them on their own line so I'll put them into a div. I'll add a class of actions
1:42
up here we'll say the actions and the h2's have a text line of center. There we go, a little bit better. The only thing we have left to work with
1:52
are those two things right there. Now that turns out to be pretty easy. We can come over here and say that these do we have a class, no classes yet
2:03
so we'll say it has a class and it'll be a form control, this is a bootstrap thing. Ready, look at that, looks pretty awesome.
2:14
I really like the way this looks, it kind of lights up when you go in there, its got the cool rounded edges
2:18
if you make a mistake that rounded edge turns red really quite nice. Now one thing that is a little funky that seems to happen here always
2:26
is a little too much padding on the right so lets just go to the form, say "padding right" it's going to be 30 px, lets try that.
2:36
There we go, good enough maybe 40 something like that. Here we go, I feel like that's pretty balanced right there. So there's our login page.
2:45
We used the bootstrap form control there and the button style right there and you know there's a little bit more work to do.
2:53
So I feel like our little login form is looking really good, we used the styles. One thing to note if we didn't set this width here
3:02
like so, they actually look really bad and bootstrap is kind of mobile first in its style it look okay like that but it looks terrible like this.
3:11
So you want to either constrain the size of these things or just put them into something that is itself constrained like this
3:17
and then it will look really good. That's it. Hopefully you like this little log and form we built and you saw how incredibly easy this was.
3:26
Had a couple of classes on form elements make our buttons button style and off we go.