Included position utilities

Gruntfile.js

@@ -42,6 +42,7 @@ module.exports = function (grunt) {
                         src: [
                             'utilities/_display.scss',
                             'utilities/_spacing.scss',
+                            'utilities/_position.scss',
                             'utilities/_visibility.scss',
                             'mixins/_visibility.scss'
                         ],

README.md

@@ -16,6 +16,7 @@ Here's what you get that Bootstrap 4 currently doesn't provide out of the box:
 * [Display Utility](https://getbootstrap.com/docs/4.1/utilities/display/)
 * [Spacing Utility](https://getbootstrap.com/docs/4.1/utilities/spacing/)
 * [Visibility Utility](https://getbootstrap.com/docs/4.1/utilities/visibility/)
+* [Position Utility](https://getbootstrap.com/docs/4.1/utilities/position/)
 
 If you don't need any of the above, Bootstrap 4 already includes a grid only version with its
 [Bootstrap CSS and JS](https://getbootstrap.com/docs/4.1/getting-started/download/#compiled-css-and-js) bundle.

css/grid.css

@@ -4707,6 +4707,52 @@ html {
   height: 100vh !important;
 }
 
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: -webkit-sticky !important;
+  position: sticky !important;
+}
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .sticky-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+
 .m-0 {
   margin: 0 !important;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-4-grid",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Bootstrap 4 grid system and layout utilities",
   "main": "css/grid.min.css",
   "repository": {

scss/grid.scss

@@ -45,6 +45,7 @@ $grid-gutter-width: 30px !default;
 @import "breakpoints/mixins/breakpoints";
 @import "grid/bootstrap-grid";
 @import "sizing/utilities/sizing";
+@import "layout/utilities/position";
 @import "layout/utilities/spacing";
 @import "layout/mixins/visibility";
 @import "layout/utilities/visibility";

scss/layout/utilities/_position.scss

@@ -0,0 +1,32 @@
+// stylelint-disable declaration-no-important
+
+// Common values
+@each $position in $positions {
+  .position-#{$position} { position: $position !important; }
+}
+
+// Shorthand
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
+
+.sticky-top {
+  @supports (position: sticky) {
+    position: sticky;
+    top: 0;
+    z-index: $zindex-sticky;
+  }
+}