Assignment-4 for Bootstrap
Subject: CSW1 (CSE 2141)
Session: Sep 2024 to Jan 2025
Branch: CSE
Section: All
Course Outcomes: CO4
Learning Levels: Remembering (L1), Understanding (L2), Application (L3), Analysis (L4)
Evaluation (L5), and Creation (L6)
Q no. Questions Learning
Levels
Q1. Design a responsive webpage using Bootstrap grids: Create a layout with four rows, L1, L2
each styled with a solid border and a light green background.
i. First row: Divide into two equal columns for extra small screen sizes (<576px).
ii. Second row: Divide into three equal columns for extra small screen sizes (<576px).
iii. Third row: Divide into four equal columns for small screen sizes (≥576px).
iv. Fourth row: Divide into six equal columns for medium screen sizes (≥768px).
Q2. Apply different Bootstrap background colors (e.g., bg-primary, bg-success, etc.) and L1, L2
text colors (e.g., text-white, text-dark, etc.) to each column created in Q1.
Q3. Create a grid with three equal-sized columns, each containing an image styled as a L2, L3
thumbnail and set to a size of 200x200 pixels. Add a button that, when clicked, changes
the thumbnail image style to a circular image.
Q4. Create six different types of alert boxes, each with an appropriate link, a closing button, L2, L4
and a suitable emphasized message. Add animated effects to each alert box with a 5-
second transition effect.
Q5. Create a nested dropdown menu with multiple levels. L3, L4
The button group should have four primary categories, such as 'Category 1', 'Category
2', etc., with each category containing four subcategories, such as 'Subcategory 1',
'Subcategory 2', etc. Implement the structure using <div> elements with the class btn-
group for the categories. Include dropdowns for each subcategory using the class
dropdown-toggle and dropdown-menu. The dropdown items should be links (<a>) with
the class dropdown-item for each option.
Q6. Create a webpage with four animated progress bars using Bootstrap, applying the L4, L6
progress-bar-striped and progress-bar-animated classes, each with a different
background color. The progress bars should initially be hidden and only appear when
the user clicks the 'Upload File' button. Implement a function that gradually increases
the width of each progress bar from 0% to 100%, with a 1% increment every 100
milliseconds. Use jQuery to control the display and animation of the progress bars,
ensuring they fill sequentially.
Q7. Create four HTML pages, each containing a Bootstrap header with a color class of your L2, L3
choice and centered alignment. Add pagination to each page, linking them to the
corresponding HTML pages. Use the proper attribute to open the page in a new blank
tab. Ensure that the active class changes to reflect the current page.
Q8. Design a tutorial webpage for HTML using the following Bootstrap components: L2, L3
jumbotron, navbar, nav tabs, nav pills, and pagination.
Q9. Design a New Year card gallery using Bootstrap cards. Each card should include a L2, L3
description, an image, and a link at the bottom, as shown below. You may add
additional properties to enhance the appearance and create a visually appealing design.
Q10. Design a slideshow featuring five historical monuments of India, including captions L2, L3
and descriptions for each, using a Bootstrap carousel.
Q11. Design a stacked form with appropriate input fields to capture data, including fields for L2, L3
registration number, email, password, gender, and a submit button.
-END-
