Utilizing @types/bootstrap in my Typescript and React project: A comprehensive guide

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.

Answer №1

After a few days of experimentation, I successfully resolved this issue.

Here is the method for incorporating Bootstrap into a React component:

Begin by adding Bootstrap to your TypeScript project with the following command:

yarn add bootstrap @types/bootstrap react-bootstrap @types/react-bootstrap -D

Next, include Bootstrap components in your .tsx file like so:

import {Grid, Row, Col, Button} from 'react-bootstrap'

Because the CSS files are not included in npm, you must manually link the CSS. I achieved this by adding the following code within the <HEAD> section of my index.html file:

<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 all there is to it!

If you're interested in exploring a sample project utilizing TypeScript, React, Bootstrap, and Webpack, check out this example:

https://github.com/abhsrivastava/ts-react-bootstrap

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when attempting to affix the navigation bar to the top of the webpage

After running the code below, I noticed that my navbar is not behaving as expected and seems to be stuck in the middle of the screen instead of being fixed to the top. This is confusing for me because I have created navbars before that worked fine. Any ass ...

Guide on adding an image to a Bootstrap card component

I'm facing a simple issue that I can't seem to solve. As a beginner in using bootstrap, I'm struggling to figure out how to insert an image into the card header. I've been searching online for solutions for the past 30 minutes with no l ...

Discover the versatility of TypeScript by dynamically adding methods to a class!

Are there any examples of dynamically extending a class with a method in TypeScript? I attempted the following: UsersBlocksMyOrders.prototype.myFunc = function():any{ alert('23434'); }; However, the compiler is giving me an error. ...

Converting axios response containing an array of arrays into a TypeScript interface

When working with an API, I encountered a response in the following format: [ [ 1636765200000, 254.46, 248.07, 254.78, 248.05, 2074.9316693 ], [ 1636761600000, 251.14, 254.29, 255.73, 251.14, 5965.53873045 ], [ 1636758000000, 251.25, 251.15, 252.97, ...

What is the best way to overlay an image on two divs/containers simultaneously?

I've been tasked with creating a web mockup featuring a transparent PNG image overlaying two divs in multiple rotations. I've used Bootstrap 4.1 to structure the site, utilizing containers, rows, and cols. <section class="one"> <!-- ...

Using NPM in combination with React and TypeScript to incorporate AMD modules

I am currently in the process of setting up a development environment for an application that is written in TypeScript using React. I already have existing TypeScript code that compiles to ES5 and AMD modules. My goal is to avoid any JavaScript transpilat ...

Why is it that retrieving the same class data from two separate TypeScript files yields varying results in TypeScript? What steps can be taken to resolve this issue

I have created 3 TypeScript files named dataService.ts, init.ts, and interest.ts. The dataService.ts file is a common file used to store and retrieve data from the other 2 files. Within the dataService.ts file: export default class DataService { priv ...

Typescript throwing an exception for a properly defined parameter

Using a combination of NextJs and typescript, I am encountering an issue when passing a correctly typed prop. The error that is displayed is as follows: ./pages/jobs.tsx:100:15 Type error: Type '{ job: jobType; key: number; handleTagClick: (tag: strin ...

Pass the type of the "keyof" variable as a parameter

Imagine having the interface below: interface ITest { a: number; b: string; Now, I am looking to create a function with similar functionality: public filterByPropertyValue<T>(array: T[], key: keyof T, value: typeof ????) { return array.filter(e ...

The visibility of buttons can be controlled based on the selected radio option

I have just completed setting up 4 buttons (add, edit, delete, cancel) and a table that displays data received via ajax. Each row in the table contains a radio button identified by the name "myRadio". When a radio button is clicked, I need the buttons to ...

I prefer not to have my navigation bar obscuring the top of my background image

Utilizing both bootstrap classes and Python Flask has been quite interesting for me. My current setup includes a navbar with the following classes: <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> Additionally, here is t ...

Angular's custom reactive form validator fails to function as intended

Struggling to incorporate a customized angular validator to check for date ranges. The validator is functioning correctly and throwing a validation error. However, the issue lies in the fact that nothing is being displayed on the client side - there are n ...

Typescript - The type is lacking certain properties from another type, despite having all options defined

I have defined the following TypeScript declarations: type TDisplayKey = "a" | "b" | "c"; const DISPLAY_KEYS: Record<string, TDisplayKey> = { A: "a", B: "b", C: "c" }; const DISPLAY_KEY_TITLES: Record<TDisplayKey, string> = { [DISPLA ...

Updating the data type of the Request object following the execution of the checkAuth middleware in Types

I'm relatively new to TypeScript and recently encountered an issue with extending the Request type. Although I managed to find a workaround, it doesn't sit well with me and I believe there may be a more optimal solution out there. Let's del ...

Reposition the button to the right within a div

I am having trouble moving a button from the left side to the right side in Bootstrap 4. I have attempted using both mr-auto and float-right, but neither seems to be working. Here is my code: <!-- Page Content --> <div class="container"> ...

Struggling to fill tables from database in Angular. Encountering an issue: Error message stating "Error trying to diff '[object Object]'. Only arrays and iterables are permitted"

Despite encountering similar questions, none have successfully resolved my issue. Any assistance would be greatly appreciated. I am currently attempting to populate a table with data from my database. While I can successfully log the information, I encount ...

Utilizing Angular 11's HostListener to capture click events and retrieve the value of an object

Using the HostListener directive, I am listening for the click event on elements of the DOM. @HostListener('click', ['$event.target']) onClick(e) { console.log("event", e) } Upon clicking a button tag, the "e" object contains the fol ...

What is the best approach for incorporating a customized set of valid keywords into a text input field in JHipster while maintaining a sophisticated design?

My code snippet is not displaying the input even though all the necessary elements are in place: home.component.ts <p class="lead">Input: </p> <div><jhi-calculator-input></jhi-calculator-input></div> calculator.compon ...

Triggering event within the componentDidUpdate lifecycle method

Here is the code snippet that I am working with: handleValidate = (value: string, e: React.ChangeEvent<HTMLTextAreaElement>) => { const { onValueChange } = this.props; const errorMessage = this.validateJsonSchema(value); if (errorMessage == null ...

What is the best way to populate an Angular Bootstrap Table Widget with data obtained from an API request?

I am currently in the process of making an API call and utilizing the received data in a Bootstrap Angular Table Widget. The specific widget I am utilizing can be found here: Complete example (Angular powered bootstrap widget) Ensure you are working with ...