Bootstrap Assignment

From Knowledge Kitchen
Jump to navigation Jump to search

In this assignment, you will create a three-page professional or business-related website using the front-end framework, Bootstrap.


Minimal requirements:

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

Up to 20% extra credit points may be awarded for extraordinary quality of the final design, as judged subjectively by the grader and professor.

Getting started with Bootstrap

To get started, you will install Bootstrap and make a copy of the Bootstrap starter template.

Install Bootstrap

  1. Make a project folder called bootstrap, where you will put all your files for this assignment.
  2. Follow instructions for [Bootstrap_Responsive_Front-End_Framework#Install_Bootstrap_via_download 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 custom CSS source code used by Bootstrap starter template, and save it into a new CSS file named custom.css within your css folder. You will add all your custom CSS for this assignment to this file.

Make sure Bootstrap is working

  1. open the HTML page you made in your web browser, and make sure it looks just like the starter template example before proceeding.

If you cannot get this to work, get help.

Leveraging Bootstrap's features

Familiarize yourself with the various aspects of working with Bootstrap, including:

Customizing the default theme

You can quickly and easily change the default style of user interface components and interactive components by following the following workflow:

  • For each element you want to customize, find its code in the compiled Bootstrap CSS. You can do this by using your browser's Developer Tools to view the bootstrap CSS for the component you wish to customize.
  • Copy the component's selector and styles from the Bootstrap CSS code 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. No need for prepending additional classes, or appending !important here. Keep it simple.
  • Rinse and repeat until you're happy with your customizations.

Publishing your site

  1. Publish your site by uploading your entire bootstrap project folder into your public folder on the i6 server and add a link to it from your home page.
  2. Send us the URL to submit your assignment. This URL should be

What links here