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.
