Submodule 9.1: Buttons - Forms

Buttons

In this lesson, we will examine user input for a website through the use of Buttons support in Bootstrap.

Set up for the lesson

• Download the contactus.html file and move it to the leChocolat folder. This file is already pre-formatted with some content.
• Set up the links in the navigation bars for all the three pages, index.html, aboutus.html and contactus.html so that we can navigate from one to the other with ease.
• Also set up the links in the footer correctly to point to the appropriate pages.

Adding a Button Bar

We are now going to add content to contactus.html file to learn more about buttons and button bars. Go to the div where we specify "Button group goes here", and replace it with the following code to create a button bar containing three buttons:

Buttons source:

Note how we define the button bar using the btn-group class, and then add the three buttons using the <a> tag.

In this case, the three buttons are hyperlinks that cause an action and have an href associated with them. So we decided to use the <a> tag instead of the <button> tag. Note how the <a> tags have been styled using the btn class .

Do a Git commit with the message "Buttons"