Update layout fluid prop to set max-width
Setting page container fluid prop to 'xl' to allow fluid/100%
container width until reaching the xl breakpoint. After
reaching the xl breakpoint, a max-width is set to the
container.
This will make sure that the page content doesn't stretch
into an unreasonable layout on wide viewports.
https://bootstrap-vue.org/docs/components/layout#fluid-width-container
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic50dd3b4339d532663279350afdcc30e59bb0c74
diff --git a/src/assets/styles/_bootstrap-grid.scss b/src/assets/styles/_bootstrap-grid.scss
new file mode 100644
index 0000000..7ad7c81
--- /dev/null
+++ b/src/assets/styles/_bootstrap-grid.scss
@@ -0,0 +1,8 @@
+.container-xl {
+ // Fluid layout container class sets 100%
+ // width until xl breakpoint. Once a max-width
+ // is set, setting the left margin to 0 is needed
+ // so the content doesn't center align
+ // https://bootstrap-vue.org/docs/components/layout#fluid-width-container
+ margin-left: 0;
+}
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 4e0e1c5..7e43e62 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -41,6 +41,7 @@
@import "./alerts";
@import "./badge";
+@import "./bootstrap-grid";
@import "./buttons";
@import "./dropdown";
@import "./form-components";