Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Bootstrap Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding a Select Menu

1:51 with Guil Hernandez

The registration form needs to let users select their job role from a menu. In this video, we'll use .form-group and .form-control to display a <select> menu.

Select menu snippet

<option value="full stack js developer">Full Stack JavaScript Developer</option>
<option value="front end developer">Front End Developer</option>
<option value="back end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    The registration form also needs to let users select their job role from a menu. 0:00
    So back in my form. 0:06
    I'll create a new div with the class"form-group". 0:09
    Inside the div, I'll add a label for Job Role. 0:18
    Then right below, add a set of select tags to display a select menu. 0:28
    I'll give the select the class form-control, And the ID role. 0:36
    Instead of typing all the select options, 0:50
    I'll paste five options inside the select element. 0:53
    And you can copy this HTML code from the teacher's notes of this video. 0:57
    Since this section of the form collects a user's basic information, 1:02
    let's create a heading for it. 1:06
    So just below the opening form tag, I'll add an h5. 1:08
    And I'll apply 1.5 rem of bottom margin by 1:16
    giving it the class mb-4, and set the text to basic info. 1:21
    All right, so 1:34
    far we have a neatly structured and visually pleasing form design. 1:35
    Coming up in the next video, 1:39
    you'll learn how to use Bootstrap's custom form control styles. 1:40
    And to learn more about building HTML forms, check out the resources and 1:44
    related courses I've posted in the teacher's notes. 1:48

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up