bootstrap-grid-webcomponents

Bootstrap Grid Web Component

Bootstrap's grid system via web components

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.

Website

Getting started

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'

Via CDN

<script type="module" src="https://unpkg.com/bootstrap-grid-webcomponents@latest/dist/bootstrap-grid-webcomponents/bootstrap-grid-webcomponents.esm.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-grid-webcomponents@latest/dist/bootstrap-grid-webcomponents/bootstrap-grid-webcomponents.css">

Using the web components:

<bwc-row>
  <bwc-col>1 of 2</bwc-col>
  <bwc-col>2 of 2</bwc-col>
</bwc-row>