Home  
Blog
What is new in Bootstrap 4?

What is new in Bootstrap 4?

Introduction to Bootstrap 4

Background

Bootstrap 4, the latest release of the popular HTML, CSS, and JavaScript framework, is designed for developing responsive, mobile-first websites. It's suitable for projects of all sizes and caters to designers and developers of varying expertise—from beginners to experts. This blog will cover the new features in Bootstrap 4 and highlight the major changes from Bootstrap 3.

Bootstrap serves as a quick start for web developers, enabling faster application development without extensive worry about HTML and CSS. It's a free, open-source library that offers ready-made design templates for typography, forms, buttons, navigation, JavaScript extensions, and other interface components. The goal of Bootstrap 4 is to simplify the development of responsive applications, thereby reducing time to market.

Bootstrap 4 Overview

Bootstrap 4 is a lightweight and fast-loading framework. Here are the top five reasons to choose Bootstrap 4:

  1. Powerful Grid System
  2. Rapid Development
  3. Wide Browser Compatibility
  4. Customization
  5. Open Source

Bootstrap 4 is based on a flexbox model for its grid system and supports all the latest browsers, including Internet Explorer 10+ and iOS 7+. Tasks that were challenging in previous versions are now much easier with flexbox, such as creating equal-height columns and vertical centering.

Additionally, Bootstrap 4 utilizes SASS (Syntactically Awesome Style Sheets), a CSS preprocessor that allows for variables, nested rules, inline imports, mixins, and more, helping to keep stylesheets organized and facilitate faster stylesheet creation.

Browser Support

Mobile Devices:

Bootstrap 4 supports major mobile browsers, although some proxy browsers (e.g., Opera Mini, UC Browser Mini) are not supported.

BrowserSupportedMicrosoft EdgeSupportedChromeSupportedFirefoxSupportedSafariN/AAndroid Browser & Web ViewSupportedAndroidSupportediOSSupportedWindows 10 MobileSupported

Desktop Browsers:

Bootstrap 4 supports most default desktop browsers. If you need support for IE 8 or IE 9, consider using Bootstrap 3.

BrowserSupportedMicrosoft EdgeSupportedChromeSupportedFirefoxSupportedInternet ExplorerIE 10+OperaSupportedSafariNot Supported

Different Versions of Bootstrap

  • Bootstrap 3 (and its minor versions)
  • Bootstrap 4 (with minor releases; for example, Bootstrap 4.3 introduced new utilities and deprecated some unused code)

New / Improved Features in Bootstrap 4

Key improvements in Bootstrap 4 include:

  • Style Sheets: Transition from LESS to SASS, leading to faster compilation.
  • Improved Media Query: Target five device groups using media queries for better adaptability.
  • Ordering Table Columns: Control the visual order of table columns by breakpoint (e.g., order-1, order-md-2).
  • Display Headings: Enhanced visibility for display headings with different size options.
  • Font Awesome Support: Integration of Font Awesome for icons.
  • New Grid System: Supports a five-grid system for smaller mobile screens.
  • Cards: New component for displaying information as a container (headers, images, text, etc.).
  • New Classes for Spacing: Easier management of paddings and margins.
  • Popovers and Tooltips: Easy implementation with third-party libraries.
  • Extensive Component List: Includes alerts, badges, buttons, forms, and more.

Deprecated Features from Bootstrap 3

Bootstrap 4 has deprecated the following components:

  • Panels
  • Thumbnails
  • Wells

Reasons to Choose Bootstrap 4

  • Easy to get started
  • Excellent grid system
  • Comprehensive component library
  • Bundled JavaScript plugins
  • Extensive documentation with examples

Migrating from Bootstrap 3 to Bootstrap 4

The transition to Bootstrap 4 involves significant changes, including:

  • Flexbox support
  • Updates to forms and input groups
  • Dropped support for IE 8 and 9
  • Enhanced grid system
  • New components and improved typography

Comparison Chart

ParametersBootstrap 3Bootstrap 4SourceLESSSASSCSS UnitpxremSize (Minified)117 kb147 kbBrowser SupportIE 8, IE 9, modern browsersIE 10+, iOS 7+, modern browsersGrid4 grid tiers5 grid tiersFlexboxNot supportedSupportedDark/Inverse TablesNot supportedAdded dark/inverse tableTable Head StylesNot supportedAdded light/dark stylesComponentsPanels, thumbnails, wellsIntroduced cardsContextual ClassesNo table-prefix classesAdded table-prefix classesIconsGlyphiconFont Awesome, Iconic, Octicons

Conclusion

Bootstrap 4 has introduced numerous improvements, optimizations, and clean-ups throughout the framework. For more information on creating streamlined, mobile-friendly websites and applications, visit Bootstrap’s official website.

References

Explore Bootstrap 4 with these helpful resources:

‍