Scribd
Upload
108 views

Bootstrap Syllabus

nothing

Uploaded by

k.purushotham
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
108 views

Bootstrap Syllabus

nothing

Uploaded by

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

BOOTSTRAP

1. Grid System

 Container: Defines the layout container, which can be container, container-fluid,


or container-{breakpoint}.
 Rows and Columns: Bootstrap uses a 12-column grid system, and elements are placed
inside row and col classes like col-md-6, col-lg-4, etc.
 Responsive Breakpoints: Breakpoints include xs (extra small), sm (small), md (medium),
lg (large), xl (extra large), and xxl (extra extra large).

2. Typography

 Headings and Text: Classes like h1, h2, etc., define headings, while text-muted, text-
primary, and other utility classes modify text color and alignment.
 Display Headings: Larger headings for hero sections, e.g., display-1 to display-6.
 Text Alignment and Transformation: Use text-left, text-center, text-
uppercase, etc., for alignment and transformation.

3. Forms

 Form Controls: Classes like form-control for inputs, form-select for dropdowns,
and form-check for checkboxes.
 Form Layouts: Supports inline forms, floating labels, and input groups.
 Validation: Built-in validation classes such as is-valid and is-invalid.

4. Buttons

 Basic Buttons: Classes like btn, btn-primary, btn-secondary, and btn-outline-* for
buttons of different styles.
 Button Sizes: Use btn-lg, btn-sm for large and small buttons.

5. Components

 Navbar: Responsive navigation bars using navbar, navbar-expand-*, and navbar-


light or navbar-dark.
 Card: Flexible content containers with classes like card, card-body, and card-header.
 Carousel: For slideshows using the carousel class and controls like carousel-
control-prev and carousel-control-next.
 Modals: Dialogs or popups created with modal, modal-dialog, and modal-body.
 Alerts: Use alert classes to create dismissible alerts.

6. Utilities

 Spacing: Margin (m-*) and padding (p-*) utilities such as m-3, p-4 to control spacing.
 Flexbox Utilities: Control layout using d-flex, justify-content-*, and align-
items-* for flexible layouts.
 Display: Show or hide elements with d-none, d-inline, and d-block.
 Colors: Use bg-primary, text-success, and other classes to add background or text
colors.
 Positioning: Control positioning with position-relative, position-absolute, etc.

7. Responsive Design

 Bootstrap 5 is mobile-first and responsive by default. Elements automatically adjust


across different screen sizes.
 Use breakpoints like col-md-6, d-lg-none, or d-sm-block to customize the layout for
different devices.

8. Icons

 Bootstrap Icons: While Bootstrap 5 does not come with built-in icons, you can integrate
the official Bootstrap Icons.

9. JavaScript Components

 Collapse: Toggle content visibility using collapse and collapse.show.


 Dropdowns: Interactive dropdown menus using dropdown and dropdown-toggle.
 Tooltips and Popovers: Add additional information with tooltip and popover
components.
 Offcanvas: Sliding content panels with offcanvas for navigation and sidebars.

10. Custom Properties (CSS Variables)

 Bootstrap 5 makes extensive use of CSS variables for easier customization, allowing you
to override the default theme by changing variables like --bs-primary for colors and
spacing.

You might also like