Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Concept: Bootstrap forms
Login or
purchase this course
to watch this video and the rest of the course contents.
0:02
As we've seen, beautiful forms are key to user engagement and happiness.
0:07
And, you just want your app to look beautiful and entice people to interact with it.
0:12
So we've seen that those forms on the left can easily be transformed to the forms on the right, using just a couple of CSS statements
0:21
and some Bootstrap CSS classes. Remember, we've added form-control to the inputs and text areas, button to the button,
0:31
and we added a little margin to input some text areas. Let's look at the code. Here you can see we have our inputs,
0:38
we've added the placeholders so we don't have to deal with having a title or a label and the important thing is we've added form-control.
0:45
This makes the input display or layout in what's called block style, that means each input is on its own new line,
0:52
that's why we don't need a "br" or some sort of line break, but it also makes them wide and sort of full screen
0:58
as we talked about to look best on mobile devices and small screens. So we threw this input and text areas style to say let's set the max width to 350
1:06
and we also thought they were a little cramped, so let's put a margin on it. And that's how we got that really nice-looking form
1:13
out of basically raw HTML with Bootstrap.