Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Demo: Bootstrap forms in action
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Here we have a standard input form and the goal of this is going to be able to create a blog post. We are not going to write the server-side stuff,
0:09
we are just going to talk about the Bootstrap components for now. So, here we have a form, we have the method that we can post it back,
0:15
we've already talked about this in the second web development section. But, over here we've got this input and it just, we are using placeholders,
0:24
this is kind of a nice touch and we've got this text area where you type out the content of your post, and then a nice button.
0:30
So let's see how this looks. Well, that's probably even worse than you would expected, there is various pieces there like all flowing together,
0:38
I guess we could throw in some "brs" onto them, right, some new lines, so let me just make a quick copy we'll kind of have a before and after;
0:47
we could put some line breaks here. So now we've got it looking like this. So what we are going to do is, let me put a few line breaks in here
0:59
and give it some room, we are going to make this top one look nice.
1:01
So it turns out "brs" are not the answer, even though they do slightly improve the situation. We are going to go and use the Bootstrap forms,
1:08
so to do that, we are going to set the class here and the class is going to be form-control, like so,
1:15
now if we just set this and this on each one of them, and the button is not going to be a form control, but remember from he button section,
1:23
it's going to be a btn and we could decide what style we want, we'll say "primary" for now.
1:30
Now if we just refresh this, it's not perfect but it is much better-looking
1:37
and see the little nice glow that comes on, you can see that there is some padding this stuff is not stuck right up against the edges there,
1:46
I think some of the styling is coming from Bootstrap already so having it I guess we can look really quick, so if I put like- there you go,
1:55
this is how it looks with no Bootstrap at all, right? OK. But there are a few things that we need to work on. First of all,
2:03
that these things are touching each other, that is not super good so let's go fix that and normally, this would be in the CSS file
2:10
but just because these are standalone HTML pieces, let me just stick it in here so let's say any time we have a form,
2:16
and the form has an input, or the form has a text area or it has a button, any of those things.
2:25
What we want to do is we want to say "margin is 5 pixels". All the way around, so let's see how that looks.
2:32
There you go, that looks pretty good, you know what, we've got a lot of room on this screen, let's go for 10, go for broke,
2:37
there that looks like a decent amount of space around each one of these, and notice we are styling the bottom as well,
2:43
let's actually make it only a target this one, we'll say the id here is "new", so we can come up and say form#new
2:51
to apply only to the form with the "new" id. There you go, I can see the bottom one is still like it was.
2:57
Perfect! So we've got these three things here, and this is looking pretty good but notice,
3:01
it's fully across the screen, now, it depends on the container it's in or whether or not this is OK, if you look at Bootstrap,
3:08
if you go over here on Bootstrap and you check out the CSS thing, it says look, they have decided to be mobile first,
3:16
and so, and you can kind of tell like this is more or less built to look good
3:20
on something that is like that size, it looks less good on something like this, so let's apply a little bit of a style here
3:27
to make this a little more manageable for desktop apps. So again, we'll come down here and we want to style
3:34
let's say those two things, but separately. We don't want to include the button, we could say width, and just fix it but let's be a little more careful
3:42
and say max-width: 350px, it's probably good, let's see how that looks, here we go, so now regardless of the size,
3:50
except for the reason I use "max" is if it gets too small we still want it to not start to scroll, right, so we just want to limit how much it grows.
3:59
So, to me, this is a pretty good-looking form already, and all we've done is use the inputs
4:06
and stuff in the text area is form-control plus a little CSS to set the padding and to set the max width
4:15
and for the buttons we've just used "btn", "btn-primary" or you could use "danger", you could use whatever, "success",
4:22
whatever color you want down there, you can go with that.