B𝕏 | BootstrapX

Bootstrap X - Framework agnostic bootstrap web components powered with stenciljs

https://webcored.github.io/bootstrap-x/

Write less Javascript & leverage the functionalties of webcomponents

npm: https://www.npmjs.com/package/@webcored/bootstrap-x

Pros

• Simple to use & knock of other library requirements for bootstrap
• Framework agnostic
• Invoke web components programmatically [ex: alert.close()]
• Bootstrap equvalent methods and events [ex: onClose => performSomething()]

Getting Started

Add the latest bootstrap css file to your project,

sample:

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
>

Add the bootstrap-x component library to the root of your poject (head of your index.html)

via CDN:

<script
  type="module"
  src="https://unpkg.com/bootstrap-x/dist/bootstrap-x/bootstrap-x.esm.js">
</script>

<script
  nomodule
  src="https://unpkg.com/bootstrap-x/dist/bootstrap-x/bootstrap-x.js">
</script>

via npm (Node Modules):

• Run npm install bootstrap-x --save
• Then add the library file to your <script src='node_modules/bootstrap-x/dist/bootstrap-x.js'></script>

Then you can use the element anywhere in your template, JSX, html etc

Available components

• Alert

• Badge

• Button

• Breadcrumb

• Spinner

• ... rest is in progress

To run this project

git clone

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

Naming Components

When creating new component tags, use prefix 'bx'.