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

Question

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

Unless I'm mistaken, the @types/bootstrap package only contains type definition files for any JavaScript components included with the Bootstrap framework. It shouldn't contain the actual styles or JavaScript components that ship with Bootstrap. To import those, you would additionally need to install the bootstrap package. — Michael Zalla
– Michael Zalla, Commented Apr 7, 2018 at 3:28
I did. I installed bootstrap and @types/bootstrap (see the yarn add command in my question above.). Now how do I apply the styles in my react component. — Knows Not Much
– Knows Not Much, Commented Apr 7, 2018 at 3:38

Knows Not Much · Accepted Answer · 2018-04-17 01:26:22Z

8

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

answered Apr 17, 2018 at 1:26

Knows Not Much

31.8k66 gold badges208 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hazem Abdelwahab Over a year ago

Or you can link the css like this: <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >

Joaquin Palacios Over a year ago

Hi, I am using typescript and bootstrap, I wonder if that still the best way to install bootstrap on the project? it's a Next.js Typescript project.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related