bootstrap

Bootstrap exercises

Exercise #1: 960.gs

This is not an exercise about Bootstrap (yet).

Complete exercise1.html such that that page displays as shown below:

You need to create the boxes using the prepared CSS classes. See this page for an example.

Hint: the first (blue) box becomes:

<div class="grid_6">
  <div class="blue"></div>
</div>

Exercise #2a: Grid layout

Complete exercise2a.html to create the following layout using Bootstrap.

Hint: use Rows and columns and background colors

Exercise #2b: Responsive layout

Include breakpoints to make the design from exercise #2a responsive.

Hint: use grid system on rows and display utility

Mobile view:

Desktop view:

Exercise #2c: Spacing

Add spacing between columns and rows. This requires to add one level of nesting to the design. Start from exercise2c.html.

Hint: use grid system on rows and display utility

Mobile view:

Desktop view:

Exercise #3: Tables

Add Bootstrap classes to exercise3.html to create the following 4 tables:

Exercise #4: Simple form

Style the form given in exercise4.html using Bootstrap. (You will also need to include the Bootstrap css file in the header.) See the Bootstrap form documentation for help. Add some margin between the groups using mb-3.

Exercise #5: Responsive form

Create a responsive form, as shown below. You can use the form.html as starting point. Remember to create new elements for nested rows.

Mobile view:

Desktop view:

Exercise #6: Wild & Wacky Vegetables

Format and extend the given starter html file using Bootstrap by following the steps below.

1. Use the Bootstrap grids classes to create a sidebar and main content. Use a card and nav list to style the sidebar.

1. Add a quote, table, and search form to the page:

3. Use the Bootstrap alert component to add a danger alert. Use the thumbnails classes to give the images borders.

Exercise #7: Components

Try the some Bootstrap components in action by building the following page step-by-step. There is no starter file for this exercise, you need to code everything from scratch.

1. Add a navigation bar, a full-width element, and 3 columns with some content.
   • Use custom css only for background color #e2e3e5.
   • Use text classes
   • Add appropriate padding

2. Extend the navigation bar with the followings:

• The navbar should always be fixed on the top of the screen.
• Add three menu items plus a dropdown menu to the left. Mark the second menu item as active.
• Add a sign-in form with email and passwords fields to the right.

• The navbar should collaps on mobile screens:

3. Add some buttons, a dismissable alert, a "New" badge, and a small pill badge showing the number of contacts.