Learn BOOTSTRAP with Real Code Examples

Bootstrap offers a grid system and responsive design out-of-the-box.

It includes ready-to-use components like buttons, modals, forms, and navbars.

It helps developers quickly create consistent and mobile-friendly UIs.

Flexbox-based grid layout

Typography and color utilities

Responsive breakpoints

Customizable via Sass variables

JavaScript components with jQuery (Bootstrap 4) or vanilla JS (Bootstrap 5+)

Containers (`.container`, `.container-fluid`)

Grid rows (`.row`) and columns (`.col-*`)

Responsive breakpoints (`sm`, `md`, `lg`, `xl`, `xxl`)

Typography and utility classes

Components: buttons, forms, navbars, cards

index.html - main page layout

assets/css/ - custom styles

assets/js/ - optional custom scripts

node_modules/bootstrap - installed framework

partials/ - reusable components (navbar, footer)

Set up project with Bootstrap CSS/JS

Define container and grid layout

Add components for UI elements

Customize using utility classes or Sass

Include JavaScript plugins if needed

Beginner: static pages

Intermediate: responsive landing pages

Advanced: admin dashboards

Expert: fully customized theme

Community: large-scale Bootstrap-based apps

Simpler than full JS frameworks

Faster for prototyping than custom CSS

Larger than Tailwind in base size

More prebuilt components than Materialize

Cross-browser consistency out-of-the-box

2011 – Bootstrap 1.0 released

2012 – Bootstrap 2.0: responsive design

2013 – Bootstrap 3.0: mobile-first, new grid

2018 – Bootstrap 4.0: Flexbox, Sass, improved components

2021 – Bootstrap 5.0: dropped jQuery, improved utilities

Container: main wrapper for layout

Row: horizontal group of columns

Column: vertical section inside row

Utility: small reusable class for styling

Component: prebuilt UI element