diff --git a/assets/css/grid/breakout.css b/assets/css/grid/breakout.css
new file mode 100644
index 0000000000000000000000000000000000000000..704ec5ce78c176a4162c7756517101b579f921ed
--- /dev/null
+++ b/assets/css/grid/breakout.css
@@ -0,0 +1,5 @@
+.breakout, .bg-breakout{
+  width: 100vw;
+  position: relative;
+  left: calc(-1 * (100vw - 100%) / 2);
+}
diff --git a/ui_suite_bootstrap.info.yml b/ui_suite_bootstrap.info.yml
index 79e0d30df860c909473f2c5f8da5e4a7ee82cdc9..a21b6f34fced4b70d1dd89a77929f8a2cfe1ca51 100644
--- a/ui_suite_bootstrap.info.yml
+++ b/ui_suite_bootstrap.info.yml
@@ -26,6 +26,7 @@ libraries:
   - ui_suite_bootstrap/accessibility
   - ui_suite_bootstrap/component_placeholder
   - ui_suite_bootstrap/form
+  - ui_suite_bootstrap/breakout
 
 libraries-override:
   core/drupal.active-link:
diff --git a/ui_suite_bootstrap.libraries.yml b/ui_suite_bootstrap.libraries.yml
index 6117e950a03e65e3a109473f2a40f0598f60c7f7..d6209921384fd710d862568fe97bec69a61a5f85 100644
--- a/ui_suite_bootstrap.libraries.yml
+++ b/ui_suite_bootstrap.libraries.yml
@@ -113,6 +113,11 @@ indented:
     component:
       assets/css/component/indented.css: {}
 
+breakout:
+  css:
+    theme:
+      assets/css/grid/breakout.css: {}
+
 jquery.validate:
   js:
     assets/js/jquery-validation/validate.js: {}