Skip to content

B๐• - Bootstrap web components library - Powered with Stenciljs

License

Notifications You must be signed in to change notification settings

webcored/bootstrap-x

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

51 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Built With Stencil Generic badge npm version npm

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


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'.