Q:

How to use @types/bootstrap in my Typescript and React application

I have an application written in webpack, typescript and react. I added bootstrap to it like
yarn add bootstrap @types/bootstrap jquery popper

then I wrote a component like
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")
)

but it doesn't seem to be taking any styling from bootstrap. 
I googled and there are many many bootstrap tutorials out there. but I can't find a one which shows me how to use bootstrap in a typescript application which uses @types/bootstrap

A:

After few days of trying I was able to resolve this.
This is how you use bootstrap in a react component
Add bootstrap to the typescript project
 yarn add bootstrap @types/bootstrap react-bootstrap @types/react-bootstrap -D

Now add bootstrap controls to your tsx file like
 import {Grid, Row, Col, Button} from 'react-bootstrap'

Since the css files are not included with the npm you need to link the css manually. I did this in <HEAD> section my index.html (the one which contains )
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

That's it.
If you are looking for a sample project which uses typescript, react, bootstrap and webpack, then here is an example
https://github.com/abhsrivastava/ts-react-bootstrap

