Scribd
Upload
6 views3 pages

Module 1 Bootstrap5

The document outlines a series of exercises designed to teach users how to work with Bootstrap 5, covering setup, responsive layouts, typography, forms, buttons, navigation, cards, spacing, and more. Each section includes specific tasks that guide users through practical applications of Bootstrap's features and utilities. The exercises aim to enhance understanding of Bootstrap's structure and customization options, including the use of Sass for further personalization.

Uploaded by

hema22050.ec
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views3 pages

Module 1 Bootstrap5

The document outlines a series of exercises designed to teach users how to work with Bootstrap 5, covering setup, responsive layouts, typography, forms, buttons, navigation, cards, spacing, and more. Each section includes specific tasks that guide users through practical applications of Bootstrap's features and utilities. The exercises aim to enhance understanding of Bootstrap's structure and customization options, including the use of Sass for further personalization.

Uploaded by

hema22050.ec
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Bootstrap 5 Exercises

1. Setting Up Bootstrap 5
Exercise 1.1:
Create a basic HTML page and link Bootstrap 5 via CDN.
Exercise 1.2:
Set up a project using npm or downloaded Bootstrap files. Use the downloaded files in a sample
HTML page.

2. Bootstrap Structure and Files


Exercise 2.1:
Explore the structure of the downloaded Bootstrap directory. Identify and explain the purpose of
the CSS, JS, and icons folders.
Exercise 2.2:
Modify your HTML to include Bootstrap's JavaScript plugins via bootstrap.bundle.min.js.

3. Fundamentals of Responsive Grid Layout


Exercise 3.1:
Create a container with three columns that stack vertically on mobile, two-per-row on tablets,
and three-per-row on desktops.
Exercise 3.2:
Use .container, .row, and .col-* classes appropriately for responsive design.

4. Column Layouts and Grid Classes


Exercise 4.1:
Design a two-column layout with a sidebar (col-md-3) and content area (col-md-9).
Exercise 4.2:
Create a four-column layout (col-sm-3) with equal width.

5. Alignment and Reordering in Grid


Exercise 5.1:
Use justify-content-center and align-items-center to center content inside a row.
Exercise 5.2:
Reorder columns on different screen sizes using order-md-2, order-md-1.

6. Responsive Flexbox Utilities


Exercise 7.1:
Create a navbar using d-flex, flex-column, and flex-md-row for responsive behavior.
Exercise 7.2:
Use justify-content-between and align-items-center in a card layout.
7. Typography
Exercise 7.1:
Create a sample page with different Bootstrap typography utilities: display-1, lead, text-muted,
fw-bold, etc.
Exercise 7.2:
Use text-uppercase, text-lowercase, text-capitalize.

8. Forms
Exercise 8.1:
Create a registration form using Bootstrap form components like form-control, form-check, and
input-group.
Exercise 8.2:
Style a login form using form-floating.

9. Buttons
Exercise 9.1:
Create buttons using all contextual classes: btn-primary, btn-secondary, btn-outline-*, etc.
Exercise 9.2:
Add button groups using btn-group, and create toggle buttons with checkboxes.

10. Navbars and Navigation


Exercise 10.1:
Create a responsive navbar with logo, navigation links, and a search form.
Exercise 10.2:
Use nav, nav-tabs, nav-pills for creating tabbed navigation.

11. Cards and Media Objects


Exercise 11.1:
Create a profile card using card, card-body, card-title, and card-img-top.
Exercise 11.2:
Design a media object layout using media and align an image to the left of the content.

12. Spacing Utilities


Exercise 12.1:
Apply margin (m-3, mt-4) and padding (p-2, py-5) utilities on layout sections.
Exercise 12.2:
Build a pricing section where spacing improves the layout.

13. Colors and Backgrounds


Exercise 13.1:
Create a dashboard page using contextual background classes (bg-primary, bg-warning, etc.) and
text colors.
Exercise 13.2:
Use bg-gradient with bg-dark and white text.

14. Display and Visibility

Exercise 14.1:
Use d-none, d-md-block, d-lg-flex to hide/show sections based on screen size.
Exercise 14.2:
Create a responsive sidebar that only shows on tablets and above.

15. Borders, Shadows, and Rounded Corners


Exercise 15.1:
Add border utilities like border, border-primary, border-3, and rounded-circle to an image.
Exercise 15.2:
Use shadow, shadow-lg and rounded-pill in a card.

16. Positioning Utilities


Exercise 16.1:
Create a fixed footer using position-fixed bottom-0.
Exercise 16.2:
Use position-relative and position-absolute to overlay a badge over an image.

17. Icons with Bootstrap Icons


Exercise 17.1:
Install and use Bootstrap Icons in a webpage: add social media icons in the footer.
Exercise 17.2:
Replace text buttons with icon-only buttons using Bootstrap Icons.

18. Bootstrap 5 JavaScript Plugins


Exercise 18.1:
Add a modal popup triggered by a button.
Exercise 18.2:
Create a collapsible accordion using accordion and Bootstrap JavaScript behavior.

19. Customization with Sass


Exercise 19.1:
Set up a Bootstrap 5 project with Sass using npm.
Exercise 19.2:
Customize primary colors and border radius via _variables.scss and recompile Bootstrap.

You might also like