Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Introduction to Bootstrap forms
Login or
purchase this course
to watch this video and the rest of the course contents.
0:02
Any web app worth interacting with must have not just HTML forms for user input, but beautiful and engaging ones. Too often they look more like this,
0:16
here is a registration page that has a few icons and so that's kind of cool, but other than the few icons, it really looks terrible,
0:24
it has not much of a style, these are more or less the default styles that come with your web browser.
0:30
However, with just a little bit of work, we can make this look much better. The one on the right is enticing and you know on the other side of that
0:39
"create an account" page is some kind of really cool and engaging application.
0:44
The one on the left, this is probably more like something put up on your intranet
0:49
that you have to deal with that you dread every time you have to go to it, and half the time it doesn't even work.
0:54
Having these forms that look nice and are engaging is really important and you'll see the Bootstrap has a couple of options for this,
1:02
Bootstrap has a couple of classes that we can use, that make the basics of having really nice input forms easy.
1:09
Now it just so happens that this registration page here on the right comes from this place called codepen
1:15
and someone there was nice enough to actually create this in a form that we can play with.
1:20
So if you go over here, you'll see that you can actually play with the CSS and the HTML and you can come over here and change it however you want.
1:29
Now it says "registration dialogue". So if you like this form and you want to play with it, hey, here is something to start with;
1:35
we are going to go back and focus on the simpler form just building out the ability to create a blog post
1:42
and make this form that starts out looking really bad look... you now, not amazing but pretty decent, just a few key Bootstrap classes.