Extend

Approach

About the guiding principles of Bootstrap 4 (summary).

• Responsive and mobile-first
• Built with a base class and extended via modifier classes
• States should obey a common z-index scale
• Prefer a HTML and CSS implementation over JavaScript
• Use utilities over custom styles
• Avoid enforcing strict HTML requirements (children selectors)

Icons

Bootstrap 3's Glyphicons is now dropped. Bootstrap 4 recommends using external icon libraries.

Recommended libraries (tested and used by Bootstrap team)

• Font Awesome
• Iconic ( Open Iconic is used inside Custom forms )
• Octicons

See More options for further libraries.

Migration

Changes (v4.0) from previous versions.

Changes from v4.0 Beta to stable v4.0

• Stable changes : Changes from v4.0 Beta 3 to stable v4.0
• Beta 3 changes : Changes from v4.0 Beta 2 to Beta 3
• Beta 2 changes : Changes from v4.0 Beta 1 to Beta 2

Changes from version 3 to version 4 (summary)

• Browser support
  • IE10+/iOS7+ (dropped IE8,9,iOS6)
  • Android v5,0 Lollipop and WebView
• Global changes
  • Flexbox is enabled by default
  • Changed from Less to Sass for source CSS files
  • Changed primary CSS unit from em to rem
  • Global font size increased from 14px to 16px , etc.
• Grid system
  • Moved to flexbox-based
• Components
  • Dropped panels, thumnails, wells, Glyphicons, Affix, and pager
  • Refactored nearly all components

Changes by component (summary / top items only, see source links for further details)

• Reboot
  • Changed reset CSS Normalize.css to Reboot
• Typography
  • Dropped .page-header (use utilities instead),
  • Dropped .dl-horizontal (use .row )
• Images
  • Renamed .img-responsive to .img-fluid
  • Renamed .img-rounded to .rounded
  • Renamed .img-circle to .rounded-circle
• Tables
  • Removed nearly all child combinators ( > ) to simplify customizations especially for nested tables
  • Responsive tables do not require wrapping parents
  • Renamed .table-condensed to .table-sm
• Forms
  • Renamed .control-label to .col-form-label
  • Renamed .input-(lg|sm) to .form-control-(lg|sm)
  • Dropped .form-group-* (use .form-control-* )
• Buttons
  • Renamed .btn-default to .btn-secondary
  • Dropped .btn-xs
  • Dropped the stateful button feature of button.js
• Button group
  • Rewrote with flexbox
  • Removed .btn-group-justified
  • Dropped .btn-group-xs
• Dropdowns
  • Redesigned and simplified
  • Now dropdowns can be built with div and ul elements
• Grid system
  • Added 576px breakpoint as sm (now xs, sm, mb, lg, and xl)
  • Changed .col-{breakpoint}-{modifier}-{size} to .{modifier}-{breakpoint}-{size}
  • Dropped push and pull modifier classes (use flexbox instead)
• List groups
  • Rewrote with flexbox
  • Replaced a.list-group-item with .list-group-item-action
• Modal
  • Rewrote with flexbox
  • Removed remote option
  • Removed loaded.bs.modal event
• Navs
  • Rewrote with flexbox
  • Removed nearly all child combinators ( > ) for simpler styling
• Navbar
  • Entirely redesigned with flexbox
  • Responsible behaviors are now applied to .navbar by .navbar-expand-{breakpoint}
• Pagination
  • Rewrote with flexbox
  • .page-(item|link) are now required on the descendants of .pagination elements
• Breadcrumbs
  • .breadcrumb-item is now required on breadcrumb items
• Labels and badges
  • Dropped ver 3's badge
  • Renamed ver 3's label to ver 4's badge
• Panels, thumbnails, and wells
  • Dropped all components (use new Card component instead)
• Progress
  • Replaced.progress-bar-* with .bg-*
  • Replaced .active for animated progress bars with .progress-bar-animated
• Carousel
  • Rewritten to to simplify design and styling
  • CSS has been un-nested and renamed (now needs .carousel- prefix)
• Tables ⇒ (See above)
• Utilities
  • Made display utilities responsive .d-(sm|md|lg|xl)-(none|inline|...)
  • Made text alignment responsive .text-(sm|md|lg|xl)-(left|center|right)
• Vendor prefix mixins
  • Removed (changed to Autoprefixer )

Others

• Documentation : Changes about document creation using Jekyll
• Responsive utilities : Changes about responsive implementations

About

Overview

About Bootstrap development team, history, etc.

Brand

Documentation and examples for Bootstrap’s logo and brand usage guidelines.

Licence

FAQ's about Bootstrap’s open source license.

Translations

Links to translations of Bootstrap doocumentation.