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:06
And, you just want your app to look beautiful and entice people to interact with it.
0:11
So we've seen that those forms on the left can easily be transformed
0:15
to the forms on the right, using just a couple of CSS statements
0:20
and some Bootstrap CSS classes.
0:23
Remember, we've added form-control to the inputs and text areas,
0:27
button to the button,
0:30
and we added a little margin to input some text areas.
0:33
Let's look at the code. Here you can see we have our inputs,
0:37
we've added the placeholders so we don't have to deal with
0:40
having a title or a label and the important thing is we've added form-control.
0:44
This makes the input display or layout in what's called block style,
0:48
that means each input is on its own new line,
0:51
that's why we don't need a "br" or some sort of line break,
0:54
but it also makes them wide and sort of full screen
0:57
as we talked about to look best on mobile devices and small screens.
1:01
So we threw this input and text areas style to say let's set the max width to 350
1:05
and we also thought they were a little cramped, so let's put a margin on it.
1:09
And that's how we got that really nice-looking form
1:12
out of basically raw HTML with Bootstrap.
