Preview
Video Player
00:00
00:00
Custom Form Controls for Cross-Browser Consistency
6:23Bootstrap includes custom form styles that change how a browser normally displays form controls. Bootstrap's styles provide a consistent visual design that makes your forms look the same in different browsers and devices.
Bootstrap includes custom form styles
that change how a browser normally
0:00
displays form controls.
0:04
Bootstrap styles provide a consistent
visual design that makes your forms look
0:07
the same in different browsers and
devices.
0:11
For example, form controls like
check boxes, radio buttons, and
0:14
select menus are more visually appealing
than the browser's default styles.
0:19
As you can see, Bootstrap's styles provide
large clickable areas for checking and
0:27
selecting the control, and clear
visual feedback, with color and icons.
0:33
Adding custom styles to a form is simple.
0:41
For example, in Firefox,
0:44
our select menu doesn't match
the appearance of the menu in Chrome.
0:46
Notice the differences
in the select arrows.
0:51
To trigger the custom styles,
0:55
we can give the select element
the class custom-select.
0:58
Now they look consistent in both browsers.
1:08
I'll switch over to Firefox.
1:12
Refresh and now the arrows look the same.
1:15
This also includes Safari.
1:18
The next section of the form should
display a list of JavaScript topics
1:23
that users are interested in.
1:27
So first below the third form group and
just above the closing form tag,
1:29
let's add an HR tag to create separation
between each section of the form.
1:34
To apply a top and bottom margin,
give it the class my-4.
1:39
Right below, let's add an h5 element,
1:44
with the text,
Which Topics Interest You Most.
1:48
Then I’ll give it a bottom
margin using the class mb-4.
1:56
We're going to use custom styled
check boxes to display the list of
2:07
JavaScript topics.
2:11
So back in my code below the h5.
2:13
We'll add a new div with
the class form-check.
2:16
Then I'll go back to the docs and
copy the custom checkbox snippet and
2:25
paste it inside the new form group.
2:30
And I will change the text to
say JavaScript Frameworks.
2:41
Over in the browser,
notice how the check box displays
2:54
a colorful check icon and
border when checked.
2:58
When you apply the custom control classes,
3:03
Bootstrap hides the original form control
and builds a new custom style check box.
3:06
Pretty clever.
3:11
Now I'll add the rest of the JavaScript
topics by simply copying and
3:13
pasting the form-check div we just
created and changing the text.
3:17
So this check box will be for
JavaScript libraries.
3:25
Right below we'll add a third
check box for Node.js.
3:33
Below that, we'll add a check box for
Build Tools.
3:43
And finally, a check box for ES 2015.
3:53
And, as you can see,
the custom check boxes appear stacked.
4:03
We're on separate lines, by default.
4:06
All right, the registration form
is beginning to take shape.
4:09
Before we build the rest of the form,
4:13
let's make the main modal title stand
out from the rest of the form headings.
4:15
Currently they're similar in size and
color so let's add contrast to the form.
4:20
Back in my code I'll scroll up and
give the div with the class
4:25
modal header the bg info
background color utility class.
4:31
And I'll change the text color to
white with the class text-white.
4:37
The colors of the modal header now
match the colors of our jumbotron
4:48
component, nice.
4:52
Finally the conference will have
an early bird registration period
4:54
where users can register
at the discounted price.
4:59
So the organizers would like to notify and
5:02
alert users that early bird registration
lasts only 2 days after the site launches.
5:04
Displaying an alert message box is simple,
with the alert component.
5:10
You can include any length
of text inside an alert and
5:15
you choose the alert color to display
using one of the four contextual classes.
5:19
Bootstrap also provides
an interactive alert box
5:24
that closes when a user
clicks the close icon.
5:27
So this is the one I'll use in my form.
5:30
I'll copy this code snippet and
paste it right above the opening form tag.
5:33
Then I'll change the alert
text to say Hurry.
5:44
Early bird registration ends in two days.
5:53
The alert box displays above the form and
when you click the close icon,
6:09
the alert box disappears.
6:13
And notice the fading effect.
6:15
That's created by the fade and
show classes.
6:17