How to use Bootstrap in React

Monday, October 6, 2025

#react #bootstrap #css-framework #responsive

Integrating Bootstrap with React provides responsive design, pre-built components, and consistent styling for rapid application development. As the creator of CoreUI, a widely used open-source UI library built on Bootstrap, I’ve integrated Bootstrap with countless React applications for enterprise dashboards, admin panels, and responsive web interfaces. From my expertise, the most comprehensive approach is to use react-bootstrap for React-optimized components. This method provides proper React integration, component-based architecture, and eliminates jQuery dependencies while maintaining Bootstrap’s design system.

Install react-bootstrap for React-optimized Bootstrap components and responsive design system.

npm install react-bootstrap bootstrap

// Import Bootstrap CSS in your main file (App.js or index.js)
import 'bootstrap/dist/css/bootstrap.min.css'

// Use React Bootstrap components
import { Button, Card, Container, Row, Col } from 'react-bootstrap'

function App() {
  return (
    <Container>
      <Row>
        <Col md={6}>
          <Card>
            <Card.Header>Welcome</Card.Header>
            <Card.Body>
              <Card.Title>React Bootstrap</Card.Title>
              <Card.Text>
                Bootstrap components built for React.
              </Card.Text>
              <Button variant="primary">Get Started</Button>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </Container>
  )
}

React Bootstrap provides Bootstrap components as React components, eliminating the need for jQuery and providing proper React integration. Import the Bootstrap CSS file once in your application entry point, then import and use individual components as needed. The components follow React patterns with props instead of data attributes, proper event handling, and TypeScript support. This approach provides better performance, smaller bundle sizes, and cleaner component architecture compared to vanilla Bootstrap.

Best Practice Note:

This is the foundation approach we use for CoreUI React, which extends Bootstrap with additional enterprise-ready components. Consider using React Bootstrap for standard UI needs, or CoreUI React for comprehensive admin dashboard components with additional features like charts, forms, and advanced layouts built on Bootstrap’s foundation.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

About the Author

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.