Unit 6: Introduction to Bootstrap & Utility Classes

6.1 Bootstrap Setup & Containers

Bootstrap Setup:

Include Bootstrap CDN in <head> section
Include JS file before closing </body>
Bootstrap 5 requires no jQuery

Containers:

.container - Fixed width container
.container-fluid - Full width container
Responsive breakpoints: xs, sm, md, lg, xl, xxl

Utility Classes:

Spacing: m, p, mt, mb, ml, mr, pt, pb, pl, pr (margin, padding)
Display: d-none, d-block, d-flex, d-grid
Colors: text-primary, bg-danger, border-success
Sizing: w-25, h-50, w-100
Borders: border, border-top, rounded, rounded-circle
Positioning: position-absolute, position-fixed
Typography: text-center, text-start, fs-1 to fs-6
Shadows: shadow, shadow-sm, shadow-lg
Flex: flex-direction, justify-content, align-items, gap

6.2 Grid System & Components

Grid System:

12-column grid system
Classes: row, col, col-md-6, col-lg-4
Responsive: col-sm-12 col-md-6 col-lg-4
Offset columns: offset-md-2

Bootstrap Components:

Alerts: .alert, .alert-success, .alert-danger, alert-dismissible
Buttons: .btn, .btn-primary, .btn-lg, .btn-disabled
Spinner: .spinner-border, .spinner-grow (loading indicators)
Images: .img-fluid, .rounded, .img-thumbnail
Icons: Bootstrap Icons library
Tables: .table, .table-striped, .table-hover, .table-dark

6.3 Advanced Components

Components to Learn:

Dropdown: .dropdown, .dropdown-menu, data-bs-toggle
Cards: .card, .card-body, .card-title, .card-text
Collapse: .collapse, data-bs-toggle="collapse"
Accordion: .accordion, .accordion-item, accordion-button

Practice Problems (Practical 14-16)

Practical 14: Design a Bootstrap 5 card with image, title, description, and action buttons.

Practical 15: Create 3 FAQs with questions and answers. Initially show only questions. On click, display answer. Clicking another question hides the previous answer.

Practical 16: Create pagination with Bootstrap 5. Make Link 1 active and Link 4 disabled.

Q1: Explain Bootstrap's grid system. What is the 12-column concept?

Q2: How do you make a responsive layout using Bootstrap row and col classes?

Q3: What are utility classes? Give examples of common utility classes.

Q4: How do you use Bootstrap spacing utility classes?

Q5: Differentiate between .container and .container-fluid.

Q6: How do you customize Bootstrap colors and fonts?

Q7: Create a responsive four-column grid that becomes two columns on tablet and one column on mobile.

Q8: Explain Bootstrap breakpoints and how to use them in responsive design.