bootstrap 4

assets/styles/common/_variables.scss

@@ -1,7 +1,5 @@
-// Glyphicons font path
-$icon-font-path:        "../fonts/";
-
 // Grid settings
+$enable-flex:           true;
 $main-sm-columns:       12;
 $sidebar-sm-columns:    4;
 

assets/styles/components/_comments.scss

@@ -1,5 +1,5 @@
 .comment-list {
-  @include list-unstyled;
+  @extend .list-unstyled;
 }
 .comment-list ol {
   list-style: none;

assets/styles/components/_grid.scss

@@ -1,10 +1,18 @@
 // Grid system
 .main {
-  @include make-sm-column($main-sm-columns);
+  @include make-col();
-  .sidebar-primary & {
+
-    @include make-sm-column($main-sm-columns - $sidebar-sm-columns);
+  @include media-breakpoint-up(sm) {
+    @include make-col-span($main-sm-columns);
+    .sidebar-primary & {
+      @include make-col-span($main-sm-columns - $sidebar-sm-columns);
+    }
   }
 }
 .sidebar {
-  @include make-sm-column($sidebar-sm-columns);
+  @include make-col();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col-span($sidebar-sm-columns);
+  }
 }

assets/styles/components/_wp-classes.scss

@@ -10,23 +10,23 @@
 }
 .aligncenter {
   display: block;
-  margin: ($line-height-computed / 2) auto;
+  margin: ($spacer / 2) auto;
   height: auto;
 }
 .alignleft,
 .alignright {
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: ($spacer / 2);
   height: auto;
 }
-@media (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   // Only float if not on an extra small device
   .alignleft {
     float: left;
-    margin-right: ($line-height-computed / 2);
+    margin-right: ($spacer / 2);
   }
   .alignright {
     float: right;
-    margin-left: ($line-height-computed / 2);
+    margin-left: ($spacer / 2);
   }
 }
 
@@ -35,7 +35,7 @@
   @extend .thumbnail;
 }
 .wp-caption-text {
-  padding: $thumbnail-caption-padding;
+  padding: $thumbnail-padding;
 }
 
 // Text meant only for screen readers

assets/styles/layouts/_header.scss

@@ -0,0 +1,6 @@
+.banner .nav li {
+  @extend .nav-item;
+}
+.banner .nav a {
+  @extend .nav-link;
+}

assets/styles/main.scss

@@ -2,7 +2,7 @@
 
 // Automatically injected Bower dependencies via wiredep (never manually edit this block)
 // bower:scss
-@import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
+@import "../../bower_components/bootstrap/scss/bootstrap.scss";
 // endbower
 
 @import "common/global";

bower.json

@@ -7,30 +7,7 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "bootstrap-sass": "3.3.6"
+    "bootstrap": "git://github.com/twbs/bootstrap.git#v4-dev",
-  },
+    "tether": "^1.1.1"
-  "overrides": {
-    "bootstrap-sass": {
-      "main": [
-        "./assets/stylesheets/_bootstrap.scss",
-        "./assets/javascripts/bootstrap/transition.js",
-        "./assets/javascripts/bootstrap/alert.js",
-        "./assets/javascripts/bootstrap/button.js",
-        "./assets/javascripts/bootstrap/carousel.js",
-        "./assets/javascripts/bootstrap/collapse.js",
-        "./assets/javascripts/bootstrap/dropdown.js",
-        "./assets/javascripts/bootstrap/modal.js",
-        "./assets/javascripts/bootstrap/tooltip.js",
-        "./assets/javascripts/bootstrap/popover.js",
-        "./assets/javascripts/bootstrap/scrollspy.js",
-        "./assets/javascripts/bootstrap/tab.js",
-        "./assets/javascripts/bootstrap/affix.js",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
-        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
-      ]
-    }
   }
 }