1
00:00:00,350 --> 00:00:04,910
Bootstrap includes custom form styles
that change how a browser normally

2
00:00:04,910 --> 00:00:07,400
displays form controls.

3
00:00:07,400 --> 00:00:11,720
Bootstrap styles provide a consistent
visual design that makes your forms look

4
00:00:11,720 --> 00:00:14,420
the same in different browsers and
devices.

5
00:00:14,420 --> 00:00:19,980
For example, form controls like
check boxes, radio buttons, and

6
00:00:19,980 --> 00:00:25,430
select menus are more visually appealing
than the browser's default styles.

7
00:00:27,530 --> 00:00:33,450
As you can see, Bootstrap's styles provide
large clickable areas for checking and

8
00:00:33,450 --> 00:00:39,701
selecting the control, and clear
visual feedback, with color and icons.

9
00:00:41,500 --> 00:00:44,250
Adding custom styles to a form is simple.

10
00:00:44,250 --> 00:00:46,690
For example, in Firefox,

11
00:00:46,690 --> 00:00:51,370
our select menu doesn't match
the appearance of the menu in Chrome.

12
00:00:51,370 --> 00:00:55,479
Notice the differences
in the select arrows.

13
00:00:55,479 --> 00:00:58,585
To trigger the custom styles,

14
00:00:58,585 --> 00:01:04,442
we can give the select element
the class custom-select.

15
00:01:08,180 --> 00:01:12,930
Now they look consistent in both browsers.

16
00:01:12,930 --> 00:01:14,090
I'll switch over to Firefox.

17
00:01:15,520 --> 00:01:18,730
Refresh and now the arrows look the same.

18
00:01:18,730 --> 00:01:20,430
This also includes Safari.

19
00:01:23,460 --> 00:01:27,410
The next section of the form should
display a list of JavaScript topics

20
00:01:27,410 --> 00:01:29,670
that users are interested in.

21
00:01:29,670 --> 00:01:34,249
So first below the third form group and
just above the closing form tag,

22
00:01:34,249 --> 00:01:39,069
let's add an HR tag to create separation
between each section of the form.

23
00:01:39,069 --> 00:01:44,111
To apply a top and bottom margin,
give it the class my-4.

24
00:01:44,111 --> 00:01:48,041
Right below, let's add an h5 element,

25
00:01:48,041 --> 00:01:52,655
with the text,
Which Topics Interest You Most.

26
00:01:56,712 --> 00:02:02,432
Then I’ll give it a bottom
margin using the class mb-4.

27
00:02:07,034 --> 00:02:11,346
We're going to use custom styled
check boxes to display the list of

28
00:02:11,346 --> 00:02:13,250
JavaScript topics.

29
00:02:13,250 --> 00:02:16,662
So back in my code below the h5.

30
00:02:16,662 --> 00:02:23,342
We'll add a new div with
the class form-check.

31
00:02:25,559 --> 00:02:30,504
Then I'll go back to the docs and
copy the custom checkbox snippet and

32
00:02:30,504 --> 00:02:33,071
paste it inside the new form group.

33
00:02:41,371 --> 00:02:47,089
And I will change the text to
say JavaScript Frameworks.

34
00:02:54,050 --> 00:02:58,762
Over in the browser,
notice how the check box displays

35
00:02:58,762 --> 00:03:03,410
a colorful check icon and
border when checked.

36
00:03:03,410 --> 00:03:06,350
When you apply the custom control classes,

37
00:03:06,350 --> 00:03:11,180
Bootstrap hides the original form control
and builds a new custom style check box.

38
00:03:11,180 --> 00:03:11,680
Pretty clever.

39
00:03:13,560 --> 00:03:17,854
Now I'll add the rest of the JavaScript
topics by simply copying and

40
00:03:17,854 --> 00:03:22,162
pasting the form-check div we just
created and changing the text.

41
00:03:25,176 --> 00:03:29,478
So this check box will be for
JavaScript libraries.

42
00:03:33,296 --> 00:03:38,873
Right below we'll add a third
check box for Node.js.

43
00:03:43,641 --> 00:03:48,653
Below that, we'll add a check box for
Build Tools.

44
00:03:53,196 --> 00:03:57,481
And finally, a check box for ES 2015.

45
00:04:03,384 --> 00:04:06,683
And, as you can see,
the custom check boxes appear stacked.

46
00:04:06,683 --> 00:04:09,560
We're on separate lines, by default.

47
00:04:09,560 --> 00:04:12,320
All right, the registration form
is beginning to take shape.

48
00:04:13,410 --> 00:04:15,550
Before we build the rest of the form,

49
00:04:15,550 --> 00:04:20,540
let's make the main modal title stand
out from the rest of the form headings.

50
00:04:20,540 --> 00:04:25,390
Currently they're similar in size and
color so let's add contrast to the form.

51
00:04:25,390 --> 00:04:31,269
Back in my code I'll scroll up and
give the div with the class

52
00:04:31,269 --> 00:04:37,044
modal header the bg info
background color utility class.

53
00:04:37,044 --> 00:04:43,109
And I'll change the text color to
white with the class text-white.

54
00:04:48,707 --> 00:04:52,109
The colors of the modal header now
match the colors of our jumbotron

55
00:04:52,109 --> 00:04:53,150
component, nice.

56
00:04:54,690 --> 00:04:59,130
Finally the conference will have
an early bird registration period

57
00:04:59,130 --> 00:05:02,030
where users can register
at the discounted price.

58
00:05:02,030 --> 00:05:04,750
So the organizers would like to notify and

59
00:05:04,750 --> 00:05:10,360
alert users that early bird registration
lasts only 2 days after the site launches.

60
00:05:10,360 --> 00:05:15,080
Displaying an alert message box is simple,
with the alert component.

61
00:05:15,080 --> 00:05:19,130
You can include any length
of text inside an alert and

62
00:05:19,130 --> 00:05:24,150
you choose the alert color to display
using one of the four contextual classes.

63
00:05:24,150 --> 00:05:27,220
Bootstrap also provides
an interactive alert box

64
00:05:27,220 --> 00:05:30,680
that closes when a user
clicks the close icon.

65
00:05:30,680 --> 00:05:33,640
So this is the one I'll use in my form.

66
00:05:33,640 --> 00:05:39,519
I'll copy this code snippet and
paste it right above the opening form tag.

67
00:05:44,969 --> 00:05:51,150
Then I'll change the alert
text to say Hurry.

68
00:05:53,440 --> 00:05:55,059
Early bird registration ends in two days.

69
00:06:09,230 --> 00:06:13,930
The alert box displays above the form and
when you click the close icon,

70
00:06:13,930 --> 00:06:15,742
the alert box disappears.

71
00:06:15,742 --> 00:06:17,447
And notice the fading effect.

72
00:06:17,447 --> 00:06:20,954
That's created by the fade and
show classes.