Bootstrap v4.0 - What's new?!

Highlights

Exposes Sass variables, mixins, and classes
Provides a responsive grid system, prebuilt components, and plugins
v4 depends on HTML5, CSS3, Sass, ES6 JavaScript, jQuery, Popper.js
Supports only IE10+ and iOS 7+
Global font-size increased from 14px to 16px
v4 has fully embraced Flexbox. Flexbox grid system is enabled by default
v4 depends on SASS to source CSS files
Switched from px and em to rem as primary CSS unit
v4 has five grid tiers namely xs, sm (576px grid breakpoint), md, lg, and xl
1. Extra-small (<544 px)
2. Small (≥544 px)
3. Medium (≥768 px)
4. Large (≥992 px)
5. Extra-large (≥1200 px)
Every tier has been bumped up one level (so .col-md-6 in v3 is now .col-lg-6 in v4)
xs grid classes have been modified to not require infix (e.g. .col-6)
xs start applying styles at min-width: 0 and not a set pixel value
a new grid breakpoint with the col-xl-* classes has been introduced
Renamed the responsive grid modifier classes from .col-{breakpoint}-{modifier}-{size} to .{modifier}-{breakpoint}-{size} for simpler grid classes.
Non-responsive usage of Bootstrap is no longer supported
Columns are evenly divisible by 12 at their max width
Grid breakpoints and container widths are now handled via Sass maps
v4 dropped .panel, .thumbnail, and .well classes. These have been replaced by .card
v4 dropped pager component
v4 dropped Glyphicons icon font. v4 doesn’t include an icon library by default. Icon library suggestions - https://getbootstrap.com/docs/4.0/extend/icons/ (e.g. Iconic, Octicons, Entypo, Fontawesome)
v4 introduces "Reboot" - built upon Normalize, is a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.

Some new additions to Form classes - .table-responsive; .table-inverse; .form-check-; .col-form-label; .form-row; .btn-outline-;

Now	Previously
.table-sm	.table-condensed
.col-form-label	.control-label
.form-control-lg and .form-control-sm	.input-lg and .input-sm
.form-control-*	.form-group-*
.form-text	.help-block
.form-control-plaintext	.form-control-static
.btn-secondary	.btn-default
.dropdown-divider	.divider
.badge	.label

Some v4 dropped classes - .radio-inline, .checkbox-inline, .form-horizontal, .btn-xs, .btn-group-xs, .btn-group-justified, .hidden, .show

.row is required for horizontal grid layouts e.g. <div class="form-group row">
All @screen- variables have been removed in v4

Starter template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap v4.0 - What's new?!

Highlights

Starter template

Links