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.
Bootstrap 4 Status and Quick Reference
Bootstrap 4 is end of life
Bootstrap 4 reached end of life on January 1, 2023. Bootstrap 4.6.2 is the final release in the Bootstrap 4 line, and the project no longer receives new features, routine updates, or security fixes through the standard open-source release channel. Existing Bootstrap 4 sites can continue to run, but new projects should generally start with Bootstrap 5, and maintainers of Bootstrap 4 applications should plan an upgrade when practical.
This page remains useful for maintaining legacy Bootstrap 4 websites, identifying version-specific classes and dependencies, and preparing an upgrade. For current projects, see our Bootstrap 5 resources and reference.
Bootstrap 4 vs Bootstrap 5
| Feature | Bootstrap 4 | Bootstrap 5 |
|---|---|---|
| Project status | End of life | Current major version |
| Final/current line | 4.6.2 is the final Bootstrap 4 release | 5.x |
| JavaScript dependency | Interactive plugins depend on jQuery; some also use Popper | Bootstrap JavaScript does not require jQuery |
| Grid | Mobile-first Flexbox grid with five default tiers | Expanded grid and utility capabilities |
| Directional utilities | Uses left/right naming such as .ml-* and .mr-* | Uses start/end naming such as .ms-* and .me-* |
| New projects | Primarily for legacy or compatibility requirements | Preferred Bootstrap starting point |
Bootstrap 4 quick class reference
| Task | Common Bootstrap 4 Classes |
|---|---|
| Containers | .container, .container-fluid |
| Grid row | .row |
| Columns | .col, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* |
| Display | .d-none, .d-block, .d-flex |
| Flex alignment | .justify-content-*, .align-items-* |
| Margin | .m-*, .mt-*, .mr-*, .mb-*, .ml-* |
| Padding | .p-*, .pt-*, .pr-*, .pb-*, .pl-* |
| Text alignment | .text-left, .text-center, .text-right |
| Buttons | .btn, .btn-primary, .btn-secondary |
| Responsive images | .img-fluid |
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 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 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.
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 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 4 Components
GetBootStrap.com
Official Bootstrap 4.6 component documentation with examples and usage guidance. Use the component-specific pages to verify markup, JavaScript requirements, accessibility notes, and supported options for the Bootstrap 4 version you maintain.
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
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
Release announcement for Bootstrap Icons v1.11.0, documenting additions and improvements to the separate Bootstrap Icons project.
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.
Bootstrap 4 Galleries
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.
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 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 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 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 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 & 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 Best Practices
Bootstrap 4 is now a legacy framework, so maintenance should focus on stability, dependency awareness, accessibility, performance, and a practical migration path rather than adding new Bootstrap 4-specific dependencies.
- Know the exact version: Identify the Bootstrap release used by the project before copying classes, Sass variables, JavaScript examples, or dependency instructions.
- Use the final 4.x release when feasible: If a project must remain on Bootstrap 4, evaluate updating to 4.6.2 after testing project compatibility.
- Keep JavaScript dependencies explicit: Bootstrap 4 interactive plugins depend on jQuery, and positioning-dependent components use Popper. Avoid loading duplicate or incompatible copies.
- Do not mix Bootstrap 4 and 5 conventions: Bootstrap 5 changed utilities, data attributes, forms, JavaScript dependencies, and other behavior. Verify examples against the correct documentation.
- Prefer semantic HTML: Bootstrap classes help with presentation and behavior but do not replace meaningful headings, labels, landmarks, buttons, links, and form structure.
- Test accessibility: Check keyboard navigation, visible focus, color contrast, labels, error messages, modals, dropdowns, carousels, tooltips, and other interactive components.
- Optimize production assets: Use minified files, avoid duplicate libraries, optimize images, and consider selective Sass builds or carefully configured unused-CSS removal.
- Test every supported breakpoint: Bootstrap 4's mobile-first grid changes at 576px, 768px, 992px, and 1200px. Custom CSS can introduce behavior that framework examples do not reveal.
- Maintain an upgrade plan: Inventory custom Sass, jQuery integrations, third-party Bootstrap plugins, forms, utilities, data attributes, and browser requirements before migrating to Bootstrap 5.
Before migrating Bootstrap 4 to Bootstrap 5
Start with an inventory of the Bootstrap components, utility classes, custom Sass, JavaScript plugins, jQuery code, data attributes, forms, and third-party themes used by the site. Review the Bootstrap 5 migration documentation, make the upgrade in a development or staging environment, and test layouts, navigation, forms, modals, dropdowns, tooltips, responsive behavior, accessibility, and custom scripts before production deployment. Use the Bootstrap 5 reference for current classes, components, utilities, accessibility resources, and migration links.
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.
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. Browse the RSH Web blog index for related CSS, JavaScript, web design, and development resources.
Is Bootstrap 4 still supported?
No. Bootstrap 4 reached end of life on January 1, 2023. It remains available through existing distribution channels, but the standard open-source Bootstrap 4 line 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.
Should I use Bootstrap 4 or Bootstrap 5 for a new website?
Bootstrap's official guidance recommends starting with the latest Bootstrap 5 release rather than Bootstrap 4. Bootstrap 4 is primarily relevant when maintaining an existing project or satisfying a compatibility requirement. See the Bootstrap 5 resources and reference for current documentation, classes, components, utilities, and examples.
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 also use Popper. Bootstrap 5 removed jQuery as a Bootstrap dependency, which is an important consideration when planning an 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.
Does Bootstrap 4 use Flexbox?
Yes. Bootstrap 4's grid system is built with Flexbox, and the framework includes responsive flex utilities such as .d-flex, .flex-row, .justify-content-*, and .align-items-* for controlling layout and alignment.
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 SVGs, 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 do I make an image responsive in Bootstrap 4?
Add the .img-fluid class to an image. Bootstrap 4 applies max-width: 100% and height: auto so the rendered image scales with its parent container. This does not reduce the image file size, so images should still be properly sized and optimized for the web.
How can I improve Bootstrap 4 performance?
Use minified production assets, avoid loading duplicate libraries, include only the JavaScript your interface needs, optimize images, and consider compiling a custom Sass build. Removing unused CSS can reduce file size, but purge tools must be configured carefully so dynamically generated classes are not removed. For broader website performance and design guidance, visit RSH Web Support.
Can Bootstrap 4 and Bootstrap 5 be used on the same page?
Loading both complete frameworks on the same page is generally a poor migration strategy because many class names overlap while their CSS, utilities, components, and JavaScript behavior can differ. A controlled migration should isolate or replace Bootstrap 4 markup and dependencies rather than assuming both versions can safely style the same elements.
What should I check before migrating from Bootstrap 4 to Bootstrap 5?
Audit custom Sass, utility classes, forms, JavaScript plugins, jQuery integrations, browser requirements, data attributes, and third-party Bootstrap themes or plugins. Bootstrap 5 changes several directional classes, removes jQuery as a Bootstrap dependency, updates forms and data attributes, and changes other framework behavior. Migrate in a test environment and review every template, interaction, and responsive breakpoint before release. The Bootstrap 5 reference provides current resources for planning the upgrade.
Author Bio: William Howard
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
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you agree with these rules:
- Although the administrator will attempt to moderate comments, not all comments can be moderated at all times.
- You acknowledge that all comments express the opinions of the original author and not those of the administrator.
- You will not post material which is knowingly false, obscene, hateful, threatening, harassing or invasive of privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
Tweet Share Pin Email
Crafted by our talented master copywriters
Proven Website SEO Ranking Factors
Robots.txt File: Creation, Key Uses, and Best Practices Explained
Creating Quality Content For SEO That Just Works
Social Media Marketing for Your Small BusinessOffering cPanel, Free SSL (HTTPS) Certificate, Free Domain Name and Domain Private Registration
Comments