CSE383 Lab #6 Responsive/Bootstrap solution




5/5 - (3 votes)

Objective: The objective of this exercise is to:
1. Learn and implement Bootstrap responsive library
2. Work on good looking web pages
Submit: screenshots, your word document, html file (with .html extension), css file and a link
to your web page
You may discuss the concepts with your fellow students
Part #1: Bootstrap Tutorial
Estimated time: 30 minutes
Option 1: W3Schools Tutorial
Exercise: Use the class PowerPoint and getbootstrap.com as reference material.
Use the W3 schools bootstrap tutorial to feel comfortable with the concepts.
1. Review the bootstrap information
2. Make sure you understand enough to implement the assignment
3. 3 screen grabs showing tutorial
Option 2: You are already an expert
Exercise: If you are already an expert – then write me a paragraph explaining what you
have done which made you an expert. I enjoy these – make it good.
Part #2: Create a gridded web page
Estimated time: 30 minutes
 Create a web page using bootstrap (start with the template
Page 1 of 3
CSE383 Lab #6 Responsive/Bootstrap
<!doctype html>

Hello, world!

Page 2 of 3
CSE383 Lab #6 Responsive/Bootstrap
 Create a web page with three rows
 Row1
o Column of width 3
 Paragraph of text
o Column of width 5
 Picture (100 X 150) with caption
o Column of width 4
 Paragraph of text
 Row 2
o Column of width 8
 Paragraph of text
o Column of width 4
 Picture (200 X 200) with caption
 Row 3
o Column of width 8
 Paragraph of text
o Column of width 4
 Picture (300 X 300) with caption
 Verify that it degrades nicely
 Screen grab full size (shrink page if needed for
 Screen grab at half size
 Screen grab at phone width
 Screenshots
o Three screenshots showing web page at full size, half size and
phone (smallest possible width)
o Tutorial or expert paragraph
 File
o Attach the html file
 Paste the URL to your page into the submission as a comment
o Note: use https://ceclnx01.cec.miamioh.edu as the base address
Page 3 of 3