Getting started with Bootstrap + Vite

[steep eagle]

Hey! i created the vite + bootstrap project like in the documents from bootstrap, now i want to also add react, how can i do that?

[spice notch]

I would recommend starting first with the Vite+React template, then add the react-bootstrap packages (rather than bootstrap first then try to add in React)

[steep eagle]

okay what types should i use

[spice notch]

can you elaborate on "types" ?

[steep eagle]

the frame work is simple, React

but what should i use on the variant?

i guess normal JS?

[spice notch]

I recommend React Router v7. It's a normal evolution that React apps will need some kind of router, so adding React Router v7 is a good idea

[steep eagle]

okay, and after the init i install the react-bootstrap package?

[spice notch]

You should read the doc here for the most up-to-date guidance: https://react-bootstrap.github.io/

Also, here is the doc for React Router: https://reactrouter.com/home

[steep eagle]

oh thanks, ill take a look into that, i probally get in some problems later again :D

i cant start the project

nvm got it

[steep eagle]

so i got the page running, i also installes the bootstrap thing, import it and try to display a button but bootstrap is not there

[steep eagle]

do i need to use Bootstrap like this?

or can i also use it like normal html

[spice notch]

React-Bootstrap replaces the Bootstrap JavaScript (which is originally written with jQuery), and employs React Components instead of classes. So you would use components as described in the docs

Note that some stylesheet is required to use these components, so you should also import the bootstrap/dist/css/bootstrap.min.css CSS file, probably in your src/index.js or App.js file

[steep eagle]

@spice notch okay i got it to work now, i can use either the normal or react bootstrap. BUT it dosent matter whicht i use cause some stuff wont be rendert

this is my navbar class, is basiclly the example from the react docs.

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function UserNavbar() {
  return (
    <Navbar expand="lg" className="bg-body-tertiary">
          <Container>
            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="me-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#link">Link</Nav.Link>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                  <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.2">
                    Another action
                  </NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                  <NavDropdown.Divider />
                  <NavDropdown.Item href="#action/3.4">
                    Separated link
                  </NavDropdown.Item>
                </NavDropdown>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
  );
}

export default UserNavbar;

but on the website its wont be render correct.

i also imported the bootstrap.min.css in the root.tsx