Scribd
Upload
54 views

Lab 04

The document provides instructions for 5 exercises on using Bootstrap for responsive web design. Exercise 1 involves using the Bootstrap grid system to design a responsive page. Exercise 2 and 3 involve designing HTML forms using only Bootstrap classes. Exercise 3 also requires adding JavaScript form validation. Exercise 4 and 5 require using Bootstrap to design responsive websites as shown in example screenshots, with additional details provided in example videos.

Uploaded by

AVT Bom21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
54 views

Lab 04

The document provides instructions for 5 exercises on using Bootstrap for responsive web design. Exercise 1 involves using the Bootstrap grid system to design a responsive page. Exercise 2 and 3 involve designing HTML forms using only Bootstrap classes. Exercise 3 also requires adding JavaScript form validation. Exercise 4 and 5 require using Bootstrap to design responsive websites as shown in example screenshots, with additional details provided in example videos.

Uploaded by

AVT Bom21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Ton Duc Thang University

Faculty of Information Technology

WEB PROGRAMMING AND APPLICATIONS


(503073)
WEEK 4
Prepared by Mai Van Manh

Exercise 1: Use Bootstrap Grid System to design the following responsive web page:

See example video (exercise1-demo.mp4) for better explaination.

Web Programming and Applications - Week 04 – Page 1


Ton Duc Thang University
Faculty of Information Technology

Exercise 2: Use Bootstrap 4 to design an HTML form like the one bellow. You are allowed
to use only Bootstrap 4 provided classes, please do not write any CSS code (inline, internal,
external css).

Web Programming and Applications - Week 04 – Page 2


Ton Duc Thang University
Faculty of Information Technology

Exercise 3: Use Bootstrap 4 to design an HTML form like the one bellow. You are allowed
to use only Bootstrap 4 provided classes, please do not write any CSS code (inline, internal,
external css).

Desktop version Mobile version

When the login button is pressed, you need to use Javascript code to check the form
validation result and display corresponding error messages (remember to use only
Bootstrap) if the form validation result is failed.

Web Programming and Applications - Week 04 – Page 3


Ton Duc Thang University
Faculty of Information Technology

Exercise 4: Create a responsive website look like the following screenshots:

See example video (exercise4-demo.mp4) for better explaination.

Web Programming and Applications - Week 04 – Page 4


Ton Duc Thang University
Faculty of Information Technology

Exercise 5: Create a responsive website look like the following screenshots:

See example video (exercise5-demo.mp4) for better explaination.

Web Programming and Applications - Week 04 – Page 5

You might also like