Custom Element wrappers for Bootstrap 4 components
documentation available at
bootstrap-elements site
npm i bootstrap-elements
Bootstrap Elements is a single js file which bundles Bootstrap js, css and Bootstrap Elements code
You might be wondering why the css is bundled? This is so that the css can be available within the shadow DOM. The CSS is converted to JS and then a style tag is adopted by the custom elements.
You can provide your own css. Please see the guide below.
<script src="jquery.min.js"></script>
<script src="bootstrap-elements.js"></script>If you want to provide your own css you can pass it via a variable on the window.
<script>
window.CustomBootstrapCSS = "body { background-color:red }";
</script>
<script src="bootstrap-elements.js"></script>Full documentation can be found on the site: https://bootstrap-elements.netlify.com/components.html
<be-button type="primary">primary</be-button>
<be-button type="secondary">secondary</be-button>
<be-button type="success">success</be-button>
<be-button type="danger">danger</be-button>
<be-button type="warning">warning</be-button>`<be-nav>
<be-navitem>item 1</be-navitem>
<be-navitem>item 2</be-navitem>
<be-navitem>item 3</be-navitem>
<be-navitem disabled="true">item 4</be-navitem>
</be-nav>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent