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.