Container, Row, Col - in React-Bootstrap not working

Question

I'm currently attempting to learn React, and React-Bootstrap.

I'm not sure if I'm implementing it incorrectly. My gut says I'm using an impropver version somewhere because as far as I can tell the "Container, Col, Row" functionality isn't working at all.

I'm out of ideas.

  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.0.0",
    "react": "^16.8.4",
    "react-bootstrap": "^1.0.0-beta.6",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8",
    "typescript": "^3.3.4000"

Answer 1

I've resolved the issue. It was a miss-step on my part. I missed a crucial part of the set up outlined on the react-bootstrap main regarding style sheets .

In index.html copy and paste the path to the latest bootstrap style sheets:

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

Answer 2

According to react documentation you have to install bootstrap first

npm Install react-bootstrap bootstrap

then you have to import this line in your index.js or App.js

import 'bootstrap/dist/css/bootstrap.min.css';

then you can import like this in your components import { Container, Row, Col } from 'react-bootstrap'; and use like this

 <Container>
                <Row>
                    <Col>1</Col>
                    <Col>2</Col>
                    <Col>3</Col>
                </Row>
            </Container>

Answer 3

You can use grid and then specify the no of columns you want to give for table and no of columns you want to keep for other stuff out of 12.
like in below code.

import Grid, Row and cols like

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



<Grid>
                    <Row>
                        <Col md="6">
                            <table>
                                <tr>
                                    <th class="r1_header"> Header 1 </th>
                                    <th class="r1_header"> Header 2 </th>
                                    <th class="r1_header"> Header 3 </th>
                                </tr>
                                <tr>
                                    <td> <button /> </td> // some more button stuff here
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                </tr>
                                <tr>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                </tr>
                                <tr>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                </tr>
                                <tr>
                                    <th class="r2_header"> Header 1 </th>
                                    <th class="r2_header"> Header 2 </th>
                                    <th class="r2_header"> Header 3 </th>
                                </tr>
                                <tr>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                </tr>
                                <tr>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                </tr>
                                <tr>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                    <td> <button /> </td>
                                </tr>
                            </table>
                        </Col>
                        <Col md="6">
                            {"dsfdsdsf"}
                        </Col>
                    </Row>
                </Grid>

Answer 4

You can also add import 'bootstrap/dist/css/bootstrap.min.css'; in the index.js file. Make sure to npm install bootstrap .

Answer 5

I've resolved the issue. It was a miss-step on my part. I missed a crucial part of the set up outlined on the react-bootstrap main regarding style sheets.

In index.html copy and paste the path to the latest bootstrap style sheets:`

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

`

Answer 6

I was facing the same problem. i search a lot then i fixed my problem.

so the next step is to add the Bootstrap file in index.js<\/code> or app.js<\/code> . in my case I added import 'bootstrap\/dist\/css\/bootstrap.min.css';<\/code> in index.js<\/code> .

I am using components into App.js<\/code>

import { Image ,Button  ,Row ,Col } from "react-bootstrap";