README
Bootstrap 4 for SpringType
"How to use Bootstrap 4 with SpringType?"
"How to use Bootstrap 4 with SpringType?"
SpringType comes with a lazy, fault-tolerant VDOM implementation that allows you to use standard HTML + CSS. Unlike other modern frontend frameworks, SpringType doesn't need any special wrapper component libraries.
This means, you can just use the standard Bootstrap 4 SCSS/CSS, it's HTML and JS plugins like we did back in the good old days - but with components and VDOM :-)
Live DemoYou can find a working integration example in the playground
folder.
Scaffolding
For your convenience, we've created a scaffolding template for SpringType / Bootstrap 4 projects.
To use it, please install the SpringType scaffolding CLI st-create
:
yarn add global st-create
Then simply run:
st-create -c project -t bootstrap-4 -n MyBootstrapProject
...and seconds later, a SpringType / Bootstrap 4 application will be created for you.
Manual integration guide
If you don't want to use st-create
, the process of integrating Bootstrap 4 in a
SpringType projects (or even any TypeScript project), is quite straigt forward.
You can choose to integrate third-party libraries via CDN or import them in JS to include them into the application JS bundle.
Importing third-party JS in application JS bundle
Install these dependencies:
npm i st-bootstrap bootstrap jquery popper.js
OR: yarn add st-bootstrap bootstrap jquery popper.js
- jQuery is a Bootstrap 4 dependency
- Bootstrap 4 comes with the SCSS (SASS) stylesheets and the jQuery plugins for interactive components
- popper.js for
Make sure to actually import these dependencies (e.g. in src/index.tsx
):
// import jQuery, Bootstrap, popper.js
import { importBootstrap } from "st-boostrap";
st.run(async() => {
// dynamically imports the dependencies jquery, bootstrap and popper.js
await importBootstrap();
// enabling SpringType support for Bootstrap 4 tooltip components
setupBootstrapComponent('tooltip');
st.render(<YourAppIndex />);
});
Importing third-party JS using a CDN
The other option is to integrate Bootstrap 4 and it's dependencies in the <head>
of your index.html
just like described in the official Bootstrap 4 docs:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Make sure not to import and call importBootstrap()
then.
Bootstrap 4 JS Components
Some components require an initialization (e.g. tooltips). To do this, just implement the lifecycle method onAfterInitialRender
just like described in the official Bootstrap 4 docs:
onAfterInitialRender() {
// tooltip integration
$(() => {
$('[data-toggle="tooltip"]', this.el).tooltip()
});
}
Custom theming using Sass
We also suggest, to create an SCSS file to integrate the Bootstrap 4 SCSS with custom themeing support.
Create a theme.scss
in your src
folder:
$theme-colors: (
"primary": #1a6da9,
"secondary": #2a863c,
);
@import "bootstrap/scss/bootstrap";
To transpile the SCSS file to CSS, just activate the SASS processing feature of st-start
by creating or modfiying the file st.config.js
. Add the key staticStyleEntryPoints
:
module.exports = {
staticStyleEntryPoints: {
'src/theme.scss': 'dist/theme.css'
},
};
Finally, import the resulting dist/theme.scss
CSS file in the <head>
section of your src/index.html
file:
<head>
<!-- added this for Font Awesome icon support -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<!-- just using the most recent style globally -->
<link href="../dist/theme.css" rel="stylesheet">
</head>
Most Bootstrap apps also use Font Awesome, so we recommend importing Font Awesome as well.
Maintainers
Aron Homberg | Michael Mannseicher |
Contributing
Please help out to make this project even better and see your name added to the list of our
CONTRIBUTORS.md :tada: