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
• 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.

• Microsoft Edge: Supported
• Chrome: Supported
• Firefox: Supported
• Safari: N/A
• Android Browser & Web View: Supported
• Android: Supported
• iOS: Supported
• Windows 10 Mobile: Supported

Desktop Browsers:

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

• Microsoft Edge: Supported
• Chrome: Supported
• Firefox: Supported
• Internet Explorer: IE 10+
• Opera: Supported
• Safari: Not 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

• Source:
  • Bootstrap 3: LESS
  • Bootstrap 4: SASS
• CSS Unit:
  • Bootstrap 3: px
  • Bootstrap 4: rem
• Size (Minified):
  • Bootstrap 3: 117 kb
  • Bootstrap 4: 147 kb
• Browser Support:
  • Bootstrap 3: IE 8, IE 9, modern browsers
  • Bootstrap 4: IE 10+, iOS 7+, modern browsers
• Grid:
  • Bootstrap 3: 4 grid tiers
  • Bootstrap 4: 5 grid tiers
• Flexbox:
  • Bootstrap 3: Not supported
  • Bootstrap 4: Supported

Conclusion

Bootstrap 4 has introduced numerous improvements, clean-ups, and optimizations 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:

• List of all Bootstrap classes
• Bootstrap Cheat Sheet
• Creative Tim Bootstrap Cheat Sheet
• Bootstrap Creative Resources

‍