Make a project folder called “bootstrap,” where you will put all your files for this assignment. Follow instructions for installing Bootstrap.

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

Install Bootstrap.

1. Make a project folder called “bootstrap,” where you will put all your files for this assignment.
2. Follow instructions for installing Bootstrap. This is simply a matter of downloading a copy of the Bootstrap files and placing them into your project folder. Your bootstrap folder should end up with three sub-folders: css, fonts, and js.

Create an HTML page.

1. Copy and paste the HTML source code for the Bootstrap starter template, and save it into your own HTML file named “index.html” in your project folder
2. Edit this HTML code and modify the link to the “Bootstrap core CSS” file so that it correctly points to the CSS file where you have saved it when you installed bootstrap, which is css/bootstrap.min.css
3. Edit this HTML code and modify the link to the “Custom styles for this template” so that it points to a new file you will make, which is css/custom.css

Create a custom CSS file.

1. Copy and paste the CSS source code used by the Bootstrap starter template; save it into a new CSS file named “custom.css” within your css folder.
2. You will add all your custom CSS for this assignment to this file.

Open the HTML page you made in your web browser. Make sure it looks just like the starter template example before proceeding.

 

Customizing the Default Theme

You can quickly and easily change the default style of components and interactive widgets by following the customization workflow outlined on the Bootstrap site.

• For each element you want to customize, find its code in the compiled Bootstrap CSS
• Copy the component's selector and styles and paste them in your custom stylesheet. For instance, to customize the navbar background, just copy the .navbar style specification.
• In your custom stylesheet, edit the CSS you just copied from the Bootstrap source.
• Continue this process until you’re happy with your customizations.

 

Grading

This assignment is worth 10 points.

• A Bootstrap-powered website of at least three different pages (3 points)
• A single Bootstrap navigation component on all pages (1 point)
• A Bootstrap grid system for page layout (2 points)
• At least two layouts for responsive design: one for mobile devices and one for desktop computers (1 point)
• A Bootstrap carousel widget with at least three images (1 point)
• At least three custom Bootstrap components on each page (2 points)

Requirements

Here is a list of required elements to include.

• Create at least 3 pages of content with a consistent style
• Create the general page layout on each page using Bootstrap’s grid layout features
• Use a single Bootstrap navigation component on all pages to allow visitors to browse among the 3 pages
• Create at least 2 layouts using Bootstrap’s responsive design features: one for mobile devices and one for desktop computers
• Use Bootstrap’s carousel widget, including at least three images
• Customize at least 3 Bootstrap components on each page

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of