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