Last active
April 18, 2022 13:28
-
-
Save ronaldgrn/ecc3ac46fabbd0b8dc967cf7a82712b7 to your computer and use it in GitHub Desktop.
Boostrap 4 xxl grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Adapted from bootstrap 4.6.0 */ | |
| .container-xxl { | |
| width: 100%; | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| @media (min-width: 1600px) { | |
| .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { | |
| max-width: 1520px; | |
| } | |
| } | |
| .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl, | |
| .col-xxl-auto { | |
| position: relative; | |
| width: 100%; | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| } | |
| @media (min-width: 1600px) { | |
| .col-xxl { | |
| -ms-flex-preferred-size: 0; | |
| flex-basis: 0; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| max-width: 100%; | |
| } | |
| .row-cols-xxl-1 > * { | |
| -ms-flex: 0 0 100%; | |
| flex: 0 0 100%; | |
| max-width: 100%; | |
| } | |
| .row-cols-xxl-2 > * { | |
| -ms-flex: 0 0 50%; | |
| flex: 0 0 50%; | |
| max-width: 50%; | |
| } | |
| .row-cols-xxl-3 > * { | |
| -ms-flex: 0 0 33.333333%; | |
| flex: 0 0 33.333333%; | |
| max-width: 33.333333%; | |
| } | |
| .row-cols-xxl-4 > * { | |
| -ms-flex: 0 0 25%; | |
| flex: 0 0 25%; | |
| max-width: 25%; | |
| } | |
| .row-cols-xxl-5 > * { | |
| -ms-flex: 0 0 20%; | |
| flex: 0 0 20%; | |
| max-width: 20%; | |
| } | |
| .row-cols-xxl-6 > * { | |
| -ms-flex: 0 0 16.666667%; | |
| flex: 0 0 16.666667%; | |
| max-width: 16.666667%; | |
| } | |
| .col-xxl-auto { | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| width: auto; | |
| max-width: 100%; | |
| } | |
| .col-xxl-1 { | |
| -ms-flex: 0 0 8.333333%; | |
| flex: 0 0 8.333333%; | |
| max-width: 8.333333%; | |
| } | |
| .col-xxl-2 { | |
| -ms-flex: 0 0 16.666667%; | |
| flex: 0 0 16.666667%; | |
| max-width: 16.666667%; | |
| } | |
| .col-xxl-3 { | |
| -ms-flex: 0 0 25%; | |
| flex: 0 0 25%; | |
| max-width: 25%; | |
| } | |
| .col-xxl-4 { | |
| -ms-flex: 0 0 33.333333%; | |
| flex: 0 0 33.333333%; | |
| max-width: 33.333333%; | |
| } | |
| .col-xxl-5 { | |
| -ms-flex: 0 0 41.666667%; | |
| flex: 0 0 41.666667%; | |
| max-width: 41.666667%; | |
| } | |
| .col-xxl-6 { | |
| -ms-flex: 0 0 50%; | |
| flex: 0 0 50%; | |
| max-width: 50%; | |
| } | |
| .col-xxl-7 { | |
| -ms-flex: 0 0 58.333333%; | |
| flex: 0 0 58.333333%; | |
| max-width: 58.333333%; | |
| } | |
| .col-xxl-8 { | |
| -ms-flex: 0 0 66.666667%; | |
| flex: 0 0 66.666667%; | |
| max-width: 66.666667%; | |
| } | |
| .col-xxl-9 { | |
| -ms-flex: 0 0 75%; | |
| flex: 0 0 75%; | |
| max-width: 75%; | |
| } | |
| .col-xxl-10 { | |
| -ms-flex: 0 0 83.333333%; | |
| flex: 0 0 83.333333%; | |
| max-width: 83.333333%; | |
| } | |
| .col-xxl-11 { | |
| -ms-flex: 0 0 91.666667%; | |
| flex: 0 0 91.666667%; | |
| max-width: 91.666667%; | |
| } | |
| .col-xxl-12 { | |
| -ms-flex: 0 0 100%; | |
| flex: 0 0 100%; | |
| max-width: 100%; | |
| } | |
| .order-xxl-first { | |
| -ms-flex-order: -1; | |
| order: -1; | |
| } | |
| .order-xxl-last { | |
| -ms-flex-order: 13; | |
| order: 13; | |
| } | |
| .order-xxl-0 { | |
| -ms-flex-order: 0; | |
| order: 0; | |
| } | |
| .order-xxl-1 { | |
| -ms-flex-order: 1; | |
| order: 1; | |
| } | |
| .order-xxl-2 { | |
| -ms-flex-order: 2; | |
| order: 2; | |
| } | |
| .order-xxl-3 { | |
| -ms-flex-order: 3; | |
| order: 3; | |
| } | |
| .order-xxl-4 { | |
| -ms-flex-order: 4; | |
| order: 4; | |
| } | |
| .order-xxl-5 { | |
| -ms-flex-order: 5; | |
| order: 5; | |
| } | |
| .order-xxl-6 { | |
| -ms-flex-order: 6; | |
| order: 6; | |
| } | |
| .order-xxl-7 { | |
| -ms-flex-order: 7; | |
| order: 7; | |
| } | |
| .order-xxl-8 { | |
| -ms-flex-order: 8; | |
| order: 8; | |
| } | |
| .order-xxl-9 { | |
| -ms-flex-order: 9; | |
| order: 9; | |
| } | |
| .order-xxl-10 { | |
| -ms-flex-order: 10; | |
| order: 10; | |
| } | |
| .order-xxl-11 { | |
| -ms-flex-order: 11; | |
| order: 11; | |
| } | |
| .order-xxl-12 { | |
| -ms-flex-order: 12; | |
| order: 12; | |
| } | |
| .offset-xxl-0 { | |
| margin-left: 0; | |
| } | |
| .offset-xxl-1 { | |
| margin-left: 8.333333%; | |
| } | |
| .offset-xxl-2 { | |
| margin-left: 16.666667%; | |
| } | |
| .offset-xxl-3 { | |
| margin-left: 25%; | |
| } | |
| .offset-xxl-4 { | |
| margin-left: 33.333333%; | |
| } | |
| .offset-xxl-5 { | |
| margin-left: 41.666667%; | |
| } | |
| .offset-xxl-6 { | |
| margin-left: 50%; | |
| } | |
| .offset-xxl-7 { | |
| margin-left: 58.333333%; | |
| } | |
| .offset-xxl-8 { | |
| margin-left: 66.666667%; | |
| } | |
| .offset-xxl-9 { | |
| margin-left: 75%; | |
| } | |
| .offset-xxl-10 { | |
| margin-left: 83.333333%; | |
| } | |
| .offset-xxl-11 { | |
| margin-left: 91.666667%; | |
| } | |
| } | |
| /*group 3*/ | |
| @media (min-width: 1600px) { | |
| .d-xxl-none { | |
| display: none !important; | |
| } | |
| .d-xxl-inline { | |
| display: inline !important; | |
| } | |
| .d-xxl-inline-block { | |
| display: inline-block !important; | |
| } | |
| .d-xxl-block { | |
| display: block !important; | |
| } | |
| .d-xxl-table { | |
| display: table !important; | |
| } | |
| .d-xxl-table-row { | |
| display: table-row !important; | |
| } | |
| .d-xxl-table-cell { | |
| display: table-cell !important; | |
| } | |
| .d-xxl-flex { | |
| display: -ms-flexbox !important; | |
| display: flex !important; | |
| } | |
| .d-xxl-inline-flex { | |
| display: -ms-inline-flexbox !important; | |
| display: inline-flex !important; | |
| } | |
| } | |
| /* group 4*/ | |
| @media (min-width: 1600px) { | |
| .flex-xxl-row { | |
| -ms-flex-direction: row !important; | |
| flex-direction: row !important; | |
| } | |
| .flex-xxl-column { | |
| -ms-flex-direction: column !important; | |
| flex-direction: column !important; | |
| } | |
| .flex-xxl-row-reverse { | |
| -ms-flex-direction: row-reverse !important; | |
| flex-direction: row-reverse !important; | |
| } | |
| .flex-xxl-column-reverse { | |
| -ms-flex-direction: column-reverse !important; | |
| flex-direction: column-reverse !important; | |
| } | |
| .flex-xxl-wrap { | |
| -ms-flex-wrap: wrap !important; | |
| flex-wrap: wrap !important; | |
| } | |
| .flex-xxl-nowrap { | |
| -ms-flex-wrap: nowrap !important; | |
| flex-wrap: nowrap !important; | |
| } | |
| .flex-xxl-wrap-reverse { | |
| -ms-flex-wrap: wrap-reverse !important; | |
| flex-wrap: wrap-reverse !important; | |
| } | |
| .flex-xxl-fill { | |
| -ms-flex: 1 1 auto !important; | |
| flex: 1 1 auto !important; | |
| } | |
| .flex-xxl-grow-0 { | |
| -ms-flex-positive: 0 !important; | |
| flex-grow: 0 !important; | |
| } | |
| .flex-xxl-grow-1 { | |
| -ms-flex-positive: 1 !important; | |
| flex-grow: 1 !important; | |
| } | |
| .flex-xxl-shrink-0 { | |
| -ms-flex-negative: 0 !important; | |
| flex-shrink: 0 !important; | |
| } | |
| .flex-xxl-shrink-1 { | |
| -ms-flex-negative: 1 !important; | |
| flex-shrink: 1 !important; | |
| } | |
| .justify-content-xxl-start { | |
| -ms-flex-pack: start !important; | |
| justify-content: flex-start !important; | |
| } | |
| .justify-content-xxl-end { | |
| -ms-flex-pack: end !important; | |
| justify-content: flex-end !important; | |
| } | |
| .justify-content-xxl-center { | |
| -ms-flex-pack: center !important; | |
| justify-content: center !important; | |
| } | |
| .justify-content-xxl-between { | |
| -ms-flex-pack: justify !important; | |
| justify-content: space-between !important; | |
| } | |
| .justify-content-xxl-around { | |
| -ms-flex-pack: distribute !important; | |
| justify-content: space-around !important; | |
| } | |
| .align-items-xxl-start { | |
| -ms-flex-align: start !important; | |
| align-items: flex-start !important; | |
| } | |
| .align-items-xxl-end { | |
| -ms-flex-align: end !important; | |
| align-items: flex-end !important; | |
| } | |
| .align-items-xxl-center { | |
| -ms-flex-align: center !important; | |
| align-items: center !important; | |
| } | |
| .align-items-xxl-baseline { | |
| -ms-flex-align: baseline !important; | |
| align-items: baseline !important; | |
| } | |
| .align-items-xxl-stretch { | |
| -ms-flex-align: stretch !important; | |
| align-items: stretch !important; | |
| } | |
| .align-content-xxl-start { | |
| -ms-flex-line-pack: start !important; | |
| align-content: flex-start !important; | |
| } | |
| .align-content-xxl-end { | |
| -ms-flex-line-pack: end !important; | |
| align-content: flex-end !important; | |
| } | |
| .align-content-xxl-center { | |
| -ms-flex-line-pack: center !important; | |
| align-content: center !important; | |
| } | |
| .align-content-xxl-between { | |
| -ms-flex-line-pack: justify !important; | |
| align-content: space-between !important; | |
| } | |
| .align-content-xxl-around { | |
| -ms-flex-line-pack: distribute !important; | |
| align-content: space-around !important; | |
| } | |
| .align-content-xxl-stretch { | |
| -ms-flex-line-pack: stretch !important; | |
| align-content: stretch !important; | |
| } | |
| .align-self-xxl-auto { | |
| -ms-flex-item-align: auto !important; | |
| align-self: auto !important; | |
| } | |
| .align-self-xxl-start { | |
| -ms-flex-item-align: start !important; | |
| align-self: flex-start !important; | |
| } | |
| .align-self-xxl-end { | |
| -ms-flex-item-align: end !important; | |
| align-self: flex-end !important; | |
| } | |
| .align-self-xxl-center { | |
| -ms-flex-item-align: center !important; | |
| align-self: center !important; | |
| } | |
| .align-self-xxl-baseline { | |
| -ms-flex-item-align: baseline !important; | |
| align-self: baseline !important; | |
| } | |
| .align-self-xxl-stretch { | |
| -ms-flex-item-align: stretch !important; | |
| align-self: stretch !important; | |
| } | |
| } | |
| /* group 5*/ | |
| @media (min-width: 1600px) { | |
| .m-xxl-0 { | |
| margin: 0 !important; | |
| } | |
| .mt-xxl-0, | |
| .my-xxl-0 { | |
| margin-top: 0 !important; | |
| } | |
| .mr-xxl-0, | |
| .mx-xxl-0 { | |
| margin-right: 0 !important; | |
| } | |
| .mb-xxl-0, | |
| .my-xxl-0 { | |
| margin-bottom: 0 !important; | |
| } | |
| .ml-xxl-0, | |
| .mx-xxl-0 { | |
| margin-left: 0 !important; | |
| } | |
| .m-xxl-1 { | |
| margin: 0.25rem !important; | |
| } | |
| .mt-xxl-1, | |
| .my-xxl-1 { | |
| margin-top: 0.25rem !important; | |
| } | |
| .mr-xxl-1, | |
| .mx-xxl-1 { | |
| margin-right: 0.25rem !important; | |
| } | |
| .mb-xxl-1, | |
| .my-xxl-1 { | |
| margin-bottom: 0.25rem !important; | |
| } | |
| .ml-xxl-1, | |
| .mx-xxl-1 { | |
| margin-left: 0.25rem !important; | |
| } | |
| .m-xxl-2 { | |
| margin: 0.5rem !important; | |
| } | |
| .mt-xxl-2, | |
| .my-xxl-2 { | |
| margin-top: 0.5rem !important; | |
| } | |
| .mr-xxl-2, | |
| .mx-xxl-2 { | |
| margin-right: 0.5rem !important; | |
| } | |
| .mb-xxl-2, | |
| .my-xxl-2 { | |
| margin-bottom: 0.5rem !important; | |
| } | |
| .ml-xxl-2, | |
| .mx-xxl-2 { | |
| margin-left: 0.5rem !important; | |
| } | |
| .m-xxl-3 { | |
| margin: 1rem !important; | |
| } | |
| .mt-xxl-3, | |
| .my-xxl-3 { | |
| margin-top: 1rem !important; | |
| } | |
| .mr-xxl-3, | |
| .mx-xxl-3 { | |
| margin-right: 1rem !important; | |
| } | |
| .mb-xxl-3, | |
| .my-xxl-3 { | |
| margin-bottom: 1rem !important; | |
| } | |
| .ml-xxl-3, | |
| .mx-xxl-3 { | |
| margin-left: 1rem !important; | |
| } | |
| .m-xxl-4 { | |
| margin: 1.5rem !important; | |
| } | |
| .mt-xxl-4, | |
| .my-xxl-4 { | |
| margin-top: 1.5rem !important; | |
| } | |
| .mr-xxl-4, | |
| .mx-xxl-4 { | |
| margin-right: 1.5rem !important; | |
| } | |
| .mb-xxl-4, | |
| .my-xxl-4 { | |
| margin-bottom: 1.5rem !important; | |
| } | |
| .ml-xxl-4, | |
| .mx-xxl-4 { | |
| margin-left: 1.5rem !important; | |
| } | |
| .m-xxl-5 { | |
| margin: 3rem !important; | |
| } | |
| .mt-xxl-5, | |
| .my-xxl-5 { | |
| margin-top: 3rem !important; | |
| } | |
| .mr-xxl-5, | |
| .mx-xxl-5 { | |
| margin-right: 3rem !important; | |
| } | |
| .mb-xxl-5, | |
| .my-xxl-5 { | |
| margin-bottom: 3rem !important; | |
| } | |
| .ml-xxl-5, | |
| .mx-xxl-5 { | |
| margin-left: 3rem !important; | |
| } | |
| .p-xxl-0 { | |
| padding: 0 !important; | |
| } | |
| .pt-xxl-0, | |
| .py-xxl-0 { | |
| padding-top: 0 !important; | |
| } | |
| .pr-xxl-0, | |
| .px-xxl-0 { | |
| padding-right: 0 !important; | |
| } | |
| .pb-xxl-0, | |
| .py-xxl-0 { | |
| padding-bottom: 0 !important; | |
| } | |
| .pl-xxl-0, | |
| .px-xxl-0 { | |
| padding-left: 0 !important; | |
| } | |
| .p-xxl-1 { | |
| padding: 0.25rem !important; | |
| } | |
| .pt-xxl-1, | |
| .py-xxl-1 { | |
| padding-top: 0.25rem !important; | |
| } | |
| .pr-xxl-1, | |
| .px-xxl-1 { | |
| padding-right: 0.25rem !important; | |
| } | |
| .pb-xxl-1, | |
| .py-xxl-1 { | |
| padding-bottom: 0.25rem !important; | |
| } | |
| .pl-xxl-1, | |
| .px-xxl-1 { | |
| padding-left: 0.25rem !important; | |
| } | |
| .p-xxl-2 { | |
| padding: 0.5rem !important; | |
| } | |
| .pt-xxl-2, | |
| .py-xxl-2 { | |
| padding-top: 0.5rem !important; | |
| } | |
| .pr-xxl-2, | |
| .px-xxl-2 { | |
| padding-right: 0.5rem !important; | |
| } | |
| .pb-xxl-2, | |
| .py-xxl-2 { | |
| padding-bottom: 0.5rem !important; | |
| } | |
| .pl-xxl-2, | |
| .px-xxl-2 { | |
| padding-left: 0.5rem !important; | |
| } | |
| .p-xxl-3 { | |
| padding: 1rem !important; | |
| } | |
| .pt-xxl-3, | |
| .py-xxl-3 { | |
| padding-top: 1rem !important; | |
| } | |
| .pr-xxl-3, | |
| .px-xxl-3 { | |
| padding-right: 1rem !important; | |
| } | |
| .pb-xxl-3, | |
| .py-xxl-3 { | |
| padding-bottom: 1rem !important; | |
| } | |
| .pl-xxl-3, | |
| .px-xxl-3 { | |
| padding-left: 1rem !important; | |
| } | |
| .p-xxl-4 { | |
| padding: 1.5rem !important; | |
| } | |
| .pt-xxl-4, | |
| .py-xxl-4 { | |
| padding-top: 1.5rem !important; | |
| } | |
| .pr-xxl-4, | |
| .px-xxl-4 { | |
| padding-right: 1.5rem !important; | |
| } | |
| .pb-xxl-4, | |
| .py-xxl-4 { | |
| padding-bottom: 1.5rem !important; | |
| } | |
| .pl-xxl-4, | |
| .px-xxl-4 { | |
| padding-left: 1.5rem !important; | |
| } | |
| .p-xxl-5 { | |
| padding: 3rem !important; | |
| } | |
| .pt-xxl-5, | |
| .py-xxl-5 { | |
| padding-top: 3rem !important; | |
| } | |
| .pr-xxl-5, | |
| .px-xxl-5 { | |
| padding-right: 3rem !important; | |
| } | |
| .pb-xxl-5, | |
| .py-xxl-5 { | |
| padding-bottom: 3rem !important; | |
| } | |
| .pl-xxl-5, | |
| .px-xxl-5 { | |
| padding-left: 3rem !important; | |
| } | |
| .m-xxl-n1 { | |
| margin: -0.25rem !important; | |
| } | |
| .mt-xxl-n1, | |
| .my-xxl-n1 { | |
| margin-top: -0.25rem !important; | |
| } | |
| .mr-xxl-n1, | |
| .mx-xxl-n1 { | |
| margin-right: -0.25rem !important; | |
| } | |
| .mb-xxl-n1, | |
| .my-xxl-n1 { | |
| margin-bottom: -0.25rem !important; | |
| } | |
| .ml-xxl-n1, | |
| .mx-xxl-n1 { | |
| margin-left: -0.25rem !important; | |
| } | |
| .m-xxl-n2 { | |
| margin: -0.5rem !important; | |
| } | |
| .mt-xxl-n2, | |
| .my-xxl-n2 { | |
| margin-top: -0.5rem !important; | |
| } | |
| .mr-xxl-n2, | |
| .mx-xxl-n2 { | |
| margin-right: -0.5rem !important; | |
| } | |
| .mb-xxl-n2, | |
| .my-xxl-n2 { | |
| margin-bottom: -0.5rem !important; | |
| } | |
| .ml-xxl-n2, | |
| .mx-xxl-n2 { | |
| margin-left: -0.5rem !important; | |
| } | |
| .m-xxl-n3 { | |
| margin: -1rem !important; | |
| } | |
| .mt-xxl-n3, | |
| .my-xxl-n3 { | |
| margin-top: -1rem !important; | |
| } | |
| .mr-xxl-n3, | |
| .mx-xxl-n3 { | |
| margin-right: -1rem !important; | |
| } | |
| .mb-xxl-n3, | |
| .my-xxl-n3 { | |
| margin-bottom: -1rem !important; | |
| } | |
| .ml-xxl-n3, | |
| .mx-xxl-n3 { | |
| margin-left: -1rem !important; | |
| } | |
| .m-xxl-n4 { | |
| margin: -1.5rem !important; | |
| } | |
| .mt-xxl-n4, | |
| .my-xxl-n4 { | |
| margin-top: -1.5rem !important; | |
| } | |
| .mr-xxl-n4, | |
| .mx-xxl-n4 { | |
| margin-right: -1.5rem !important; | |
| } | |
| .mb-xxl-n4, | |
| .my-xxl-n4 { | |
| margin-bottom: -1.5rem !important; | |
| } | |
| .ml-xxl-n4, | |
| .mx-xxl-n4 { | |
| margin-left: -1.5rem !important; | |
| } | |
| .m-xxl-n5 { | |
| margin: -3rem !important; | |
| } | |
| .mt-xxl-n5, | |
| .my-xxl-n5 { | |
| margin-top: -3rem !important; | |
| } | |
| .mr-xxl-n5, | |
| .mx-xxl-n5 { | |
| margin-right: -3rem !important; | |
| } | |
| .mb-xxl-n5, | |
| .my-xxl-n5 { | |
| margin-bottom: -3rem !important; | |
| } | |
| .ml-xxl-n5, | |
| .mx-xxl-n5 { | |
| margin-left: -3rem !important; | |
| } | |
| .m-xxl-auto { | |
| margin: auto !important; | |
| } | |
| .mt-xxl-auto, | |
| .my-xxl-auto { | |
| margin-top: auto !important; | |
| } | |
| .mr-xxl-auto, | |
| .mx-xxl-auto { | |
| margin-right: auto !important; | |
| } | |
| .mb-xxl-auto, | |
| .my-xxl-auto { | |
| margin-bottom: auto !important; | |
| } | |
| .ml-xxl-auto, | |
| .mx-xxl-auto { | |
| margin-left: auto !important; | |
| } | |
| } |
Update: use css comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you don't want your containers defaulting to the wider 1600 size then you should comment out the first two blocks