use bootstrap in reactjs

 Bootstrap is most popular CSS Framework for developing responsive site without write long code of css. There are lots of version has been released. Now latest version of bootstrap 5. This post for how to use bootstrap in react application.

In react , we know use the className instead of class. but ,  In bootstrap site code has class so in react error will occure. so we need to change lot of thing in code. so we have option for use bootstrap in react js without change code. it has already changed code for react developer.

Click below link👇

https://react-bootstrap.github.io/

Example :

Difference between original bootstrap code and react bootstrap code.

Alert code for original bootstrap version  

<div class="alert alert-primary" role="alert">

  A simple primary alert—check it out!

</div>

<div class="alert alert-secondary" role="alert">

  A simple secondary alert—check it out!

</div>

<div class="alert alert-success" role="alert">

  A simple success alert—check it out!

</div>

<div class="alert alert-danger" role="alert">

  A simple danger alert—check it out!

</div>

<div class="alert alert-warning" role="alert">

  A simple warning alert—check it out!

</div>

<div class="alert alert-info" role="alert">

  A simple info alert—check it out!

</div>

<div class="alert alert-light" role="alert">

  A simple light alert—check it out!

</div>

<div class="alert alert-dark" role="alert">

  A simple dark alert—check it out!

</div>

Alert code for react bootstrap :

[

  'primary',

  'secondary',

  'success',

  'danger',

  'warning',

  'info',

  'light',

  'dark',

].map((variant, idx) => (

  <Alert key={idx} variant={variant}>

    This is a {variant} alert—check it out!

  </Alert>

));

This would help to make easy coding for you