My project is built using webpack, typescript, and react. I decided to integrate bootstrap by running the following command:
yarn add bootstrap @types/bootstrap jquery popper
After adding bootstrap, I proceeded to create a component as shown below:
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as Bootstrap from 'bootstrap'
class Main extends React.Component {
render() {
return (
<div className="container">
<h1 className="page-header">Hello</h1>
<p className="text-right">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
)
}
}
ReactDOM.render(
<Main />,
document.getElementById("root")
)
However, it seems that the styles from bootstrap are not being applied to my component.
I tried searching for tutorials on integrating bootstrap into a typescript application with @types/bootstrap
, but couldn't find any comprehensive guide.