Bootstrap Presentation

In this lab, you will use Bootstrap components and styling to modify the presentation and behavior of a basic HTML file. You will also use a short piece of JavaScript to interact with the modified components.

You will need to consult the Bootstrap documentation throughout this lab. Specifically, you will need to refer to the following:

When working with Bootstrap, you should NOT just copy and paste the code verbatim. The Bootstrap documentation uses <div> elements for all examples, because there is no semantic context. Instead, you will need to understand and apply the classes and attributes as appropriate. For instance, it would be better to do this:

<header class="container">
  ...
</header>

instead of this:

<div class="container">
  <header>
    ...
  </header>
</div>

Admittedly, there are times where a <div> is necessary and there isn't much you can do besides copying. At the least, however, you can always change the id attributes to a meaningful name.

Starting Code

For this lab, you will be working entirely in a single HTML file:

index.html

Note that you are only allowed to use Bootstrap classes for all aspects of this lab, including coloring. You may not use any custom CSS.

Step 1: Bootstrap Fundamentals

Your first task is to modify the index.html to create a navbar and a header container. You will need to consult the Bootstrap documentation to make sure that you are including the Bootstrap library files. Once you have set up your code to use Bootstrap, start with the following changes to create the page shown in this annotated layout:

Set up the <nav> menu to use the Bootstrap navbar component. Add classes and attributes as necessary to match the styling.
Make sure that you do not change the id attributes in the navbar links. They are used for testing.
Make the <header> element into a Bootstrap container with margins all around. This should only involve adding classes to the <header> element. Do not introduce any new elements, such as a <div>.

In the Navbar documentation, the branding link and the list are in the same <div> container. That pushes the links to the left just after the branding link. For this lab, the list will be in a separate <div> to push them to the right.

Once you have the header and navbar set up, your next task is to convert the sections into cards. After doing so, your page should look like this annotated screenshot.

Introduce a <div> element in between the <section> and <h2> elements to act as the main card element. Do not introduce any other elements. The <h2> will be the card header and the <p> will be the card body.

Step 2: Layout and Collapses

Once you have the cards set up correctly, you will use Bootstrap's grid layout (which is NOT the same as the CSS grid layout) to put them into a row. You will also make them into collapsable elements so that clicking on the <h2> element will toggle the display of the corresponding paragraph. This image shows the result if the left collapse has been expanded while the right one has not been.

Use the <main> and <section> elements to define the row and column structure. Add horizontal padding on the <main> element that is exactly the <$spacer> value in width.
Make the <p> elements into collapses by adding that class. Do not introduce a new element, such as a <div>. Make sure that the id attributes are unchanged.
Convert the <h2> elements so that they control the corresponding collapse below them. Make sure that you are including the ARIA and type attributes.

Step 3: Controlling Bootstrap with JavaScript

Your final task is to make the three navbar links (labelled as "One", "Two", and "Both") control the collapse by adding a click event listener to them. Although we will discuss the DOM and event listeners in more detail next week, we have provided enough starter code that you should be able to complete this task.

We have used the document.querySelector function to get a reference to the "One" button and we added an event listener that displays an alert message when the link is clicked. You will change the body of this function to toggle the "Part One" collapse instead. You will need to consult the Collapse documentation for the code you need.

HINT: You should not use the toggle: false property (or any other property) when creating the bootstrap.Collapse instance. Instead, just create the instance, then call the toggle method on it as needed.

Submission

Submit your index.html file to Gradescope.