Bootstrap's Grid System
via Web Components
Version: v0.7 beta
Use Bootstrap's powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers and dozens of predefined attributes.
With Web Components!
Web components Bootstrap's Grid System Code on GitHub
Getting started
Installation
Installing via NPM:
npm install bootstrap-grid-webcomponents --save import '/node_modules/bootstrap-grid-webcomponents/dist/bootstrap-grid-webcomponents/bootstrap-grid-webcomponents.esm.js'
import '/node_modules/bootstrap-grid-webcomponents/dist/bootstrap-grid-webcomponents/bootstrap-grid-webcomponents.css' Installing via CDN
<\script type="module" src="https://unpkg.com/bootstrap-grid-webcomponents@latest/dist/bootstrap-grid-webcomponents/bootstrap-grid-webcomponents.esm.js">
<\link rel="stylesheet" href="https://unpkg.com/bootstrap-grid-webcomponents@latest/dist/bootstrap-grid-webcomponents/bootstrap-grid-webcomponents.css"> Using the web components:
1 of 2 2 of 2
Examples
Columns
1 of 2 2 of 2 1 of 3 2 of 3 3 of 3 1 of 3 2 of 3 (wider) 3 of 3 1 of 3 2 of 3 (wider) 3 of 3 1 of 3 Variable with content 3 of 3 This column has the size of its content This too col col col col col-8 col-4 col-12 1 of 4 2 of 4 3 of 4 4 of 4 Fixed column Responsive column Taller
column Start Center End stretch Rows
1 of 2 2 of 2 Half 1 of 3 2 of 3 3 of 3 1 2 3 This column goes to a second line 1 2 3 This column keeps in the first line 1 2 3 This column keeps on the first line 1 of 3 2 of 3 3 of 3 1 of 3 2 of 3 3 of 3 1 of 3 2 of 3 3 of 3 1 of 3 2 of 3 3 of 3 1 of 3 2 of 3 3 of 3 Taller
column 2 of 2 Taller
column 2 of 2 Taller
column 2 of 2
Customizing the grid
Custom properties
You can change these CSS Custom Properties (AKA Variables) to customize Media Queries breakpoints and gutters between columns.
:root {
--bwc-breakpoint-xs: 0;
--bwc-breakpoint-sm: 576px;
--bwc-breakpoint-md: 768px;
--bwc-breakpoint-lg: 992px;
--bwc-breakpoint-xl: 1200px;
--bwc-breakpoint-xxl: 1400px;
} :root {
--bwc-gutter-xs: 0;
--bwc-gutter-sm: 0.25rem;
--bwc-gutter-md: 0.5rem;
--bwc-gutter-lg: 1rem;
--bwc-gutter-xl: 1.5rem;
--bwc-gutter-xxl: 3rem;
}
