GUIDES, RESOURCES & INSIGHTS

Bootstrap 4 Reference: Documentation, Classes & Examples

Explore Bootstrap 4 documentation, cheat sheets, CSS classes, grid and flexbox utilities, components, examples, themes, tutorials, accessibility guidance, performance tips, and migration resources for building responsive websites and upgrading existing projects.

Updated: September 4, 2026
By: RSH Web Editorial Staff

Hosting from $2.99/mo
  See Plans    Contact Us

Menu

Bootstrap 4 Resources, Documentation, Classes, and Examples

Bootstrap 4 is an open-source front-end framework for building responsive, mobile-first websites with HTML, CSS, Sass, and JavaScript. Its grid system, utility classes, and reusable components help developers create consistent layouts, navigation, forms, buttons, cards, modals, tables, and other interface elements more efficiently.

Bootstrap’s ready-made patterns let developers spend less time rebuilding common interface elements and more time refining content, accessibility, performance, and application features. Used thoughtfully, the framework can support the qualities associated with great websites, including clear navigation, responsive layouts, and a consistent user experience.
Also see our Bootstrap Framework hosting services for deploying and managing Bootstrap-based projects.

This curated reference brings together official documentation and community resources for developers learning, maintaining, troubleshooting, or upgrading Bootstrap 4 projects. Start with the official documentation for authoritative behavior and version-specific guidance, then use cheat sheets, examples, tutorials, and videos to reinforce practical skills.

Download Bootstrap 4

The official download page provides compiled and minified CSS bundles, compiled JavaScript plugins, and source files. Match the documentation to the exact Bootstrap 4 version used by your project. Bootstrap 4’s interactive plugins depend on jQuery, and some components also require Popper.js, so review the package contents and dependency instructions before deploying.

How to use this Bootstrap 4 reference

  • Learning Bootstrap 4: Begin with the official documentation, grid system, utilities, and component examples.
  • Maintaining a legacy site: Confirm the installed version before copying code, and test every change at all supported breakpoints.
  • Improving performance: Use production-ready minified assets, load only required JavaScript, and carefully remove unused CSS.
  • Planning an upgrade: Inventory components, custom Sass, jQuery plugins, utilities, and data attributes before moving to Bootstrap 5.

Bootstrap

Bootstrap Resources Bootstrap 4 Documentation

Devdocs.io

Bootstrap 4 API documentation with search.

From w3schools.com

A beginner-friendly introduction to Bootstrap 4 containers, the responsive grid, typography, colors, tables, images, alerts, buttons, cards, navigation, forms, and other core features.

Github.com Bootstrap 4 Offline Docs

A community-maintained copy of Bootstrap 4 documentation intended for local or offline reference. Check the repository details and version before relying on examples in a production project.

BootStrapDocs.com

An archive that makes documentation for several historical Bootstrap releases available in one place. Select a Bootstrap 4 version that matches your project.

GetBootStrap.com Docs getting started

Official getting-started documentation covering the starter template, HTML5 doctype, responsive viewport settings, CSS box sizing, JavaScript dependencies, and browser support.

Django

Contents: Installation · Quick start · Example template · Template tags and filters · Settings · Demo application.

Bootstrap4 documentation Code Example

MDBootstrap Bootstrap 4 Docs

Comprehensive reference for Bootstrap 4 components, utilities, forms, and API (jQuery legacy version).

BootstrapVue Reference Docs

Detailed reference on Bootstrap 4 theming, Sass variables, colors, and component extensions.

DataTables Bootstrap 4 Styling Docs

In-depth docs on Bootstrap 4 table styling, classes, and integration references.

When using third-party code examples, compare the markup and dependencies with the official Bootstrap 4 documentation. Examples written for Bootstrap 3 or 5 may use different classes, data attributes, or JavaScript requirements.

Bootstrap Resources Bootstrap 4 Cheat Sheet and Class Reference

ThemeFisher.com

A Bootstrap 4.3 cheat sheet with an alphabetical overview of components and a downloadable PDF reference.

W3schools.com Bootstrap4

Complete List of All Bootstrap 4 Classes. Complete list of all Bootstrap 4 CSS classes with description and examples.

Complete Bootstrap Cheat Sheet

A visual Bootstrap 4 cheat sheet covering essential classes and components, with PDF and PNG formats for quick reference.

Boot Strap Creative.com

Bootstrap 4 Cheat Sheet and Classes List Reference.

From Creative Tim.com

Helps you find the differences between Bootstrap 3 and Bootstrap 4.

Bootstrap 4 Cheat Sheet by Creative Tim

Bootstrap 4 Cheat Sheet is an online tool that helps you easily find the differences between Bootstrap 3 and Bootstrap 4.

Create secure, stylish websites with RSH Web Services design tutorials and expert advice

Bootstrap Resources Bootstrap 4 Classes

W3Schools

Bootstrap 4 All CSS Classes. Complete List of All Bootstrap 4 Classes with description and examples.

BootStrapShuffle.com

All Bootstrap CSS classes with source code and live preview. You can copy our examples and paste them into your project. Use 230+ ready-made Bootstrap components from the multipurpose library.

W3Schools

The Bootstrap 4 grid provides five breakpoint tiers: .col- for all viewport widths, .col-sm- from 576px, .col-md- from 768px, .col-lg- from 992px, and .col-xl- from 1200px. Combine tiers to change column behavior responsively.

GetBootStrap.com

Buttons. Use Bootstrap's custom button styles for actions in forms, dialogs, with support for multiple sizes, states, and more.

Jquery-az.com

Examples of Bootstrap 4 contextual color classes for text, backgrounds, links, and buttons. Common variants include primary, secondary, success, danger, warning, info, light, and dark, used with prefixes such as text-, bg-, and btn-.

tutorialspoint.com

An example of the Bootstrap 4 .flex-row utility, which sets the horizontal direction of flex items inside a flex container. This is one of many utility patterns available in the CSS framework.

getbootstrap.com Utilities

Official reference for Bootstrap 4 utility classes including spacing, borders, display, flex, and more with examples.

getbootstrap.com Spacing Utilities

Detailed docs on responsive margin and padding classes (m-*, p-*) with breakpoint support and syntax examples.

getbootstrap.com Text Utilities

Reference for text classes covering alignment, transformation, weight, wrapping, and truncation in Bootstrap 4.

BootstrapVue Utility Classes Reference

Categorized index of Bootstrap 4 utility classes for color, spacing, flex, text, position, and display.

Bootstrap Resources Bootstrap 4 Utilities

GetBootStrap.com - Utilities

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

From W3Schools.com

An overview of Bootstrap 4 typography, including headings, display classes, small text, text alignment, lists, and other text treatments.

BootStrapCreative - Bootstrap text sizes

Bootstrap 4 text sizes and how to change them.

From getbootstrap.com

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Quackit.com Bootstrap Typography

Examples showing how Bootstrap 4 renders headings, paragraphs, blockquotes, lists, inline text elements, and other typography.

Bootstrap 4 Typography - Tutorial Republic

Learn how to style text contents of your web pages using Bootstrap inbuilt text formatting classes.

Tutorialspoint

Bootstrap provides text utilities to control text alignment, transform, weight and more.

GeeksforGeeks Bootstrap 4 Utilities

Detailed overview of Bootstrap 4 utilities for colors, borders, text, spacing, flex, display, and layout with examples.

BootstrapVue Utility Classes Reference

Indexed reference to Bootstrap 4 utility classes including borders, colors, display, flex, sizing, spacing, and more.

getbootstrap.com Spacing Utilities

Documentation for responsive margin and padding utility classes with syntax, breakpoints, and practical examples.

Bootstrap Resources Bootstrap 4 Components

GetBootStrap.com

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more. If you're looking for Pinterest-like presentation of thumbnails.

MDbootstrap.com

Bootstrap Components. Buttons. A visual guide to components for the latest Bootstrap 4 and Material Design.

GetBootStrap.com

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

From GetBootStrap.com

List of Bootstrap 4 components with search.

Tutorialspoint

A component overview covering alerts, badges, breadcrumbs, buttons, cards, carousels, collapse controls, dropdowns, forms, input groups, modals, navigation, pagination, popovers, progress bars, scrollspy, tooltips, and more.

Medium.com

Bootstrap 4: Components. Navbar, Cards, Buttons, Forms.

Creative Tim

Forty-four+ Bootstrap Components.

BootstrapVue Components Overview

Extensive documentation and examples for Bootstrap 4 components including cards, buttons, modals, navbars, forms, and more (Vue-adapted but core-compatible).

GeeksforGeeks Bootstrap Components

Overview of Bootstrap 4 components with descriptions, code snippets, and examples for buttons, alerts, navbars, cards, modals, etc.

v4.bootcss.com Examples

Gallery of Bootstrap 4 real-world examples demonstrating component combinations like dashboards, forms, navbars, and layouts.

Bootstrap Icons Bootstrap Icons

Official Bootstrap Icons

Free, open-source SVG icon library (over 2,000 icons) designed for Bootstrap - use via SVG, sprite, or font. Fully compatible with Bootstrap 4 projects for modern icon needs.

Bootstrap Icons Installation Guide

Quick setup instructions: CDN, npm install, or download - includes examples for inline SVG, sprite sheets, and web fonts that work seamlessly in BS4.

Bootstrap Icons v1.11.0 Release (Latest Features)

Announces 100+ new icons and improvements - check for the freshest additions to enhance your Bootstrap 4 UIs without extra libraries.

getbootstrap.com - Icons (Extend Section)

Official Bootstrap 4.6 guidance: No built-in icons; recommends Bootstrap Icons SVG library and alternatives like Font Awesome. Fully compatible with BS4.

GeeksforGeeks Bootstrap Icons Guide

Step-by-step examples for adding and styling Bootstrap Icons via CDN, with code snippets for common usage in Bootstrap 4.

Dev.to Bootstrap Icons Tutorial

Comprehensive guide to integration via CDN or download, SVG usage, and CSS customization with practical examples.

XHTML Team Bootstrap Icons CDN

Beginner-focused CDN setup instructions, version notes, and comparisons for easy inclusion in Bootstrap 4 projects.

BootstrapDash Bootstrap Icons Overview

Detailed explanation of features, inclusion methods, and tips for using Bootstrap Icons effectively in your UIs.

MDbootstrap.com

Gallery Bootstrap Gallery. Bootstrap 4 gallery is a great UI element perfect for introducing your visitors to a number of images, videos, or other media files. Easy to construct in a form of a lightbox gallery, multi-item carousel or slides with a caption. Examples of Bootstrap gallery use.

Bootstrap 4.com

Full Features List Based on Bootstrap 4. Responsive, nice and clean design. Personal, portfolio and resume template that consists of 8 creative light and dark demos with SASS files.

Bootsnipp.com

Bootstrap 4 Gallery Examples. Portfolio Gallery Filtering using Bootstrap 4.1. Free Template. Light Bootstrap Dashboard Angular. Light Bootstrap Dashboard React.

Start Bootstrap

Bootstrap 4 gallery. Basic gallery layout with image thumbnails. Bootstrap 4.3.1. Need more UI elements? Try SB UI Kit Pro, which is packed with custom view, pages, and components to help you get started.

Free Frontend

Eleven Bootstrap Galleries. Bootstrap 4 modal lightboxes with responsive layout changes in gallery. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive.

Mobirise

Free HTML Bootstrap 4 Photo Gallery Templates.

Tutorialzine.com

Three amazing Bootstrap 4 image gallery templates with awesome hover effects. These templates are completely free to use, fully responsive and very easy to integrate, just copy and paste.

Colorlib.com

Thirty free Bootstrap gallery templates. A bundle full of features and assets that will help you appear on the web like a professional. If you are tight on budget, the deadline is just around the corner, or you are a newbie developer.

OnAirCode

Seventeen+ Bootstrap Photo Gallery Code Examples. Free gallery web composition that is perfect for picture takers, craftsmen and imaginative personalities that are hoping to make an astonishing exhibit of displays.

Explore top-tier website hosting tips, tutorials, and guides at RSH Web Services for secure, reliable online success

Bootstrap Resources Bootstrap 4 Examples

GetBootStrap.com

Examples. Quickly get a project started with any of our examples, ranging from using parts of the framework to custom components and layouts.

Tutorial Republic

Bootstrap 4 Examples. This section contains many examples demonstrating the various Bootstrap components and its features in real action. Bootstrap Grid System.

W3Schools

Examples of Bootstrap 4 grid layouts. Three Equal Columns. Use the .col class on a specified number of elements, and Bootstrap will recognize how many elements there are (and create equal-width columns).

Free Frontend

Twenty-four Bootstrap Grid Examples. Four Column Portfolio Layout. A basic portfolio page layout snippet with four content columns and equal card heights built with Bootstrap.

GetBootStrap.com

Examples. Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.

Jquery-az.com

Nine Examples to Learn Bootstrap 4 Carousel - Slider for Slideshows. How to customize the carousel for multiple images, vertical slider and more; so keep reading. An example of simple sliding carousel.

Jquery-az.com

Sixteen Examples of Bootstrap 4 Table (striped, bordered. Bootstrap 4 also has built-in classes with added styles and enhancements for creating HTML tables in your web projects.

Bootstrapbay.com

Complex Bootstrap 4 Navbar. Our final example for positioning elements in the navbar is a bit more difficult, and I had to take it step by step to create it.

Tutlane

Bootstrap vertical navbar example. In Bootstrap by removing responsive collapse class we can create vertical navigation bar.

Bootstrap Resources Bootstrap 4 Themes and Templates

Themes from GetBootStrap.com

Official Bootstrap Themes.

From Templatemonster.com

Some of the best Bootstrap 4 themes, Some paid, some free.

From StartBootStrap.com

All Free Bootstrap Themes and Templates.

60+ Bootstrap Free Themes and Templates

Download the best Free Bootstrap Themes & Templates developed by Creative Tim.

ThemeWagon.com

Four hundred twenty+ High Quality Free and Premium Bootstrap 4 website templates.

Mobirise

Free Bootstrap 4 Template.

BootstrapMade Bootstrap 4 Templates

75+ free and premium Bootstrap 4 templates for corporate, landing pages, portfolios, and multi-purpose sites with responsive designs.

GrayGrids 50+ Best Free Bootstrap Templates

Curated selection of over 50 free Bootstrap templates for business, dashboards, Landing Page, SaaS, and more.

Bootswatch Bootstrap 4 Themes

Free open-source Bootstrap 4 theme variations (e.g., Cerulean, Darkly) – simply replace CSS for instant style changes.

Bootstrap Resources Bootstrap 4 Tutorials

W3Schools Bootstrap 4

W3Schools Online Web Tutorials.

From Quackit.com

Bootstrap 4 Tutorial at Quackit.

MD Bootstrap.com

Bootstrap 4 tutorial guide of responsive web design.

Webnots.com - Bootstrap Tutorials

Bootstrap 4 Tutorials for Beginners at WebNots.

From Tutorial Republic Bootstrap 4 Tutorial

An Ultimate Guide for Beginners.

By FreeCodeCamp.org

Learn Bootstrap 4 in 30 minutes by building a landing page.

Bootstrap Resources Bootstrap 4 Videos

MDbootstrap.com

Video Bootstrap Video. Bootstrap's video gallery is a component that compiles a number of media into one interactive collection presented in a basic or a more advanced lightbox. It can be resized as desired.

YouTube Bootstrap 4 Crash Course

Bootstrap 4. Free Crash Course.

Jqueryscript.net

A small jQuery extension to Bootstrap 4 framework that enables you to insert images as well as YouTube videos into a responsive Bootstrap 4 carousel component.

YouTube

Bootstrap 4 Tutorial + Project.

Udemy.com

Free Bootstrap tutorial. Complete Bootstrap 4 course. Bootstrap setup is covered in video training with 3 projects.

Lynda.com

Bootstrap training and tutorials. Eight courses, 275 video tutorials. Learn the essentials of Bootstrap 4.

Traversy Media Bootstrap Beginner Crash Course

Comprehensive crash course on Bootstrap 4 basics, grid, components, and practical features with code examples.

Scrimba Interactive Bootstrap 4 Tutorial

Free interactive course with 10 screencasts - code along in-browser to learn Bootstrap 4 essentials hands-on.

Academind Bootstrap 4 Tutorial Series

Detailed multi-video series on Bootstrap 4 features, grid system, components, and advanced responsive design techniques.

The Net Ninja Bootstrap 4 Tutorial Series (GitHub Repo & Code Files)

Companion repo for The Net Ninja's classic Bootstrap 4 playlist (videos from 2017). Branches match each lesson's end-state code - great for self-study on grid, utilities, components, and responsive design even if some videos are archived. Original series covered installation to full layouts.

Bootstrap 4 Performance & Optimization Bootstrap 4 Performance & Optimization

Bootstrap 4 Build Tools & Optimization

Official npm scripts for compiling/minifying Sass/JS - includes tips on purging unused classes for smaller file sizes in production BS4 sites.

Devdocs Bootstrap 4 (Offline-Friendly Reference)

Fast, searchable offline docs - great for performance-focused dev without loading full sites repeatedly.

Bootstrap Blog (Legacy Posts on Optimization)

Archive of BS4-era posts on theming, custom builds, and reducing bloat - useful for optimizing legacy projects.

HackerThemes Bootstrap Cheat Sheet (Optimization Focus)

Interactive class reference with notes on efficient usage - helps avoid redundant classes that impact load times.

PurgeCSS Official Documentation

Powerful tool to automatically remove unused CSS from Bootstrap 4 builds - integrates with Webpack/PostCSS/Gulp for massive file size reductions in production.

Medium - Remove Unused CSS from Bootstrap with PurgeCSS

Practical tutorial with examples showing PurgeCSS reducing Bootstrap CSS dramatically by scanning HTML/JS for used classes only.

Zalvice Bootstrap CSS Optimization Guide

Step-by-step guide: selective Sass imports, PurgeCSS purging, minification, critical CSS, and Lighthouse audits for faster Bootstrap 4 sites.

Big Kitty Labs Bootstrap Optimization Tips

Best practices for trimming unused code, custom minimal builds, and improving responsiveness/load times in Bootstrap 4 projects.

Bootstrap 4 Accessibility Bootstrap 4 Accessibility & Resources

Official Bootstrap 4 Accessibility Overview

Bootstrap's built-in accessibility features (ARIA roles, keyboard nav, color contrast) - plus limitations and best practices for WCAG compliance in BS4 sites.

The A11Y Project

Community resource with patterns and checklists - apply to Bootstrap 4 components (e.g., modals, carousels) for better screen reader support.

WCAG 2.0 Guidelines (Reference for Bootstrap)

Core web accessibility standards - use alongside Bootstrap 4's sr-only classes and focus states for accessible forms, nav, etc.

Bootstrap Alerts Accessibility Examples

Component-specific tips (e.g., role="alert" usage) - extend to other elements like buttons and cards for inclusive design.

SitePoint: 8 Tips for Improving Bootstrap Accessibility

Practical tips for Bootstrap 4 including contrast, fonts, keyboard nav, semantic forms, and testing for WCAG improvements.

getbootstrap.com Screenreaders Utilities

Details on .sr-only and .sr-only-focusable classes for screen reader-only content, skip links, and mixins in Bootstrap 4.

getbootstrap.com Interactive Components Accessibility

Notes on ARIA, keyboard, and screen reader support for Bootstrap 4 modals, dropdowns, tooltips, and other interactive elements.

NashTech: Enhancing Web Accessibility with Bootstrap

Overview of Bootstrap's ARIA, focus styles, and semantic features with tips for testing and extending accessibility in BS4 sites.

W3C WAI: Accessible Carousels Tutorial

WCAG-compliant carousel implementation guide - adapt to Bootstrap 4's carousel with proper ARIA, controls, and announcements.

Bootstrap 4 Migration & Upgrade Bootstrap 4 Migration & Upgrade

Official Bootstrap Migration Guide (v4 to v5)

Track changes in source files, docs, and components when migrating from Bootstrap 4 to 5 - covers breaking changes, class renames, and upgrade steps. Essential for modernizing legacy BS4 projects.

Bootstrap v5 Migration Docs (Archived v5.0 View)

Detailed review of v4 to v5 differences, including dropped jQuery dependency, new utilities, and component updates - use this alongside your current setup for a smooth transition.

DesignModo: How to Migrate from Bootstrap 4 to 5

Practical walkthrough of key class/behavior changes, with examples for common pitfalls - updated insights for projects still on BS4.

All Class Name Changes: Bootstrap 4 to 5 Migration List

Handy searchable list of renamed/removed classes (e.g., .ml-* to .ms-*) - great for find-and-replace in large codebases during upgrades.

Talentica: Bootstrap 4 to 5 Upgrade Challenges & Strategies

Overview of common mistakes, performance gains, and best practices when upgrading - includes real-world strategies for maintaining compatibility.

Bootstrap 5 Migrate Tool (GitHub)

Command-line Gulp script for automating class and data-attribute replacements (e.g., ml-* to ms-*, data-toggle to data-bs-toggle) across HTML files.

OpenLogic: Planning Your Migration to Bootstrap 5

Guide on breaking changes, phased upgrade strategies, browser support drops, and long-term BS4 maintenance options.

Pinegrow: Bootstrap 4 to 5 Class Changes List

Community list of renamed/dropped classes with search-and-replace tips (e.g., pl-* to ps-*, no-gutters to g-0) for quick migration audits.

Medium: Smooth Sailing - Migrating from Bootstrap 4 to 5

Practical walkthrough of alignment, spacing, form, and utility changes with examples for clean, breakage-free upgrades.

Bootstrap Resources RSH Web Services is built with Bootstrap 4

Bootstrap 4 Frequently Asked Questions

What is Bootstrap 4 used for?

Bootstrap 4 is used to build responsive, mobile-first websites and web interfaces. It supplies a flexible grid, Sass variables, utility classes, and reusable components for common design needs such as navigation bars, forms, buttons, cards, alerts, tables, modals, and carousels.

Is Bootstrap 4 still supported?

No. Bootstrap 4 reached end of life on January 1, 2023. It remains available through existing distribution channels, but it no longer receives new features, routine updates, or security fixes. Existing sites can continue to run, but maintainers should assess their dependencies and plan an upgrade where practical.

What is the latest Bootstrap 4 release?

Bootstrap 4.6.2 is the final release in the Bootstrap 4 line. When maintaining an older project, identify its exact installed version before using documentation or code samples because behavior, classes, and dependencies can differ across Bootstrap 4 releases.

Does Bootstrap 4 require jQuery?

Bootstrap 4’s CSS and grid can be used without jQuery, but its official interactive JavaScript plugins depend on jQuery. Components that rely on positioning, such as dropdowns and tooltips, may also require Popper.js. Bootstrap 5 removed the jQuery dependency, which is one reason teams may choose to upgrade.

What are the Bootstrap 4 responsive breakpoints?

Bootstrap 4 uses five grid tiers: extra small below 576px, small from 576px, medium from 768px, large from 992px, and extra large from 1200px. Because the grid is mobile first, unprefixed rules apply from the smallest screens upward unless a breakpoint-specific class overrides them.

Can Bootstrap Icons be used with Bootstrap 4?

Yes. Bootstrap Icons is a separate open-source SVG icon library and can be used in Bootstrap 4 projects through inline SVG, SVG sprites, icon fonts, or packaged assets. Bootstrap 4 itself does not include a built-in icon set, so the icon library must be added separately.

How can I improve Bootstrap 4 performance?

Use minified production assets, avoid loading duplicate libraries, include only the JavaScript plugins your interface needs, optimize images, and consider compiling a custom Sass build. Removing unused CSS can reduce file size, but configure purge tools carefully so dynamically generated classes are not removed.

What should I check before migrating from Bootstrap 4 to Bootstrap 5?

Audit custom Sass, utility classes, forms, JavaScript plugins, jQuery integrations, browser requirements, and data attributes. Bootstrap 5 changes several directional classes, removes jQuery, updates form controls, and drops some older patterns. Migrate in a test environment and review every template, interaction, and responsive breakpoint before release.

Author Bio:

Skilled in WordPress and a great blog writer with expertise in content creation, blog editing, article development, and keyword research. With a comprehensive...

We would love to hear from you. Share your experience or ask any questions in the comments below and we will be happy to help.

Add Comment

* Required information
Drag & drop images (max 3)

Comments

No comments yet. Be the first!

Tweet  Share  Pin  Email

From the minds of our master copywriters

Ensure your website’s uptime with the best secure and reliable hosting services