React-Bootstrap Library

In This Blog, you are going to learn very popular library of react i-e React-Bootstrap Library. As we all know that bootstrap is a CSS framework for building attractive and responsive websites and it can be used with different languages because its easy to implement with other languages.

React-Bootstrap Library

We are not talking about this in this blog

Built-in Components Of React-Bootstrap Library

React-Bootstrap Library

• React-Bootstrap is a complete re-implementation of the Bootstrap components using React.
• It has no dependency on either bootstrap.js or jQuery.
• If you have React setup and React-Bootstrap installed, you have everything you need.
• React-Bootstrap have lots of built-in components

Command To Install React-Bootstrap Library

npm install react-bootstrap bootstrap

Source Code

ReactBS.js File Code – Buttons And Alerts

import React from 'react'
import { Alert, Button } from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import { useState } from 'react'

function ReactBS() {
    const [show, setShow] = useState(true)
  if(show)
  {
    return (
        <div>
           <Alert variant='danger' onClose={() => setShow(false)} dismissible>
     <Alert.Heading>
       This Is Alert Heading
     </Alert.Heading>
         <p>Hello World Hello World Hello World Hello World
         Hello World Hello World Hello World Hello WorldHello World
         Hello World Hello World Hello World</p>
         <Alert.Link href="#">
             Click To Open This Link
         </Alert.Link>
     </Alert>
        </div>
      )
  }
}

export default ReactBS



// import React from 'react'
// import { Alert, Button } from 'react-bootstrap'
// import 'bootstrap/dist/css/bootstrap.min.css'

// function ReactBS() {
//   return (
//     <div>
//     <Alert variant='danger'>
//     <Alert.Heading>
//         This Is Alert Heading
//     </Alert.Heading>
//         <p>Hello World Hello World Hello World Hello World
//         Hello World Hello World Hello World Hello WorldHello World
//         Hello World Hello World Hello World</p>
//         <Alert.Link href="#">
//             Click To Open This Link
//         </Alert.Link>
//     </Alert>
// {/* <Button href="https://www.google.com" variant='danger'>Submit</Button> */}
// {/* <Button variant='danger'>Submit</Button>
// <Button variant='danger' active>Submit</Button>
// <Button variant='danger' disabled>Submit</Button> */}
//     {/* <Button variant='danger' size='lg'>Submit</Button>
//     <Button variant='danger'>Submit</Button>
//     <Button variant='danger' size='sm'>Submit</Button> */}
//       {/* <Button>Submit</Button>
//       <Button variant='danger'>Submit</Button>
//       <Button variant='dark'>Submit</Button>
//       <Button variant='success'>Submit</Button>
//       <Button variant='warning'>Submit</Button>
//       <Button variant='secondary'>Submit</Button> */}
//     </div>
//   )
// }

// export default ReactBS

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/c3aldlpep19z6qq/75+-+React-Bootstrap+Library.pptx/file

Download Source Code Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/l00a453r1rcopni/new-app3.rar/file