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

Question

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

I'm attempting to make good use of the React-Bootstrap grid layout. 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.

What could be the issue? I'm out of ideas.

Versions from package.json:

  "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"

The package.json from "bootstrap" dir:

  "_from": "bootstrap@latest",
  "_id": "[email protected]",

The package.json from "react-bootstrap" dir:

  "_from": "react-bootstrap@^1.0.0-beta.6",
  "_id": "[email protected]",

Please note that I've also tried installing and using bootstrap@3 with no luck:

npm install bootstrap@3 --save npm i --save bootstrap@3

Major snippet from index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

class Module extends React.Component
{
  constructor(props)
  {
    super(props);
  }

  clickHandler = (command) =>
  {
    // ... some handler code here
  }

  render()
  {
    return (
      <Container>
        <Row>
          <Col>
            <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>
            // another table here... should be aligned next to the
            // prev "col" horizontally but is going underneath (vertically)
          </Col>
        </Row>
      </Container>
    );
  }
}

* UPDATE *

Here is an MCVE...

codesandbox

The displayed text should be HelloWorld but instead its:

Hello
World

It's not clear what you are trying to achieve here or what the expected behaviour should be. Why do you have a table within a Col? — Pineda
– Pineda, Commented Mar 21, 2019 at 20:38
I’m attempting to put a block of text next to the table horizontally. — Frank
– Frank, Commented Mar 21, 2019 at 20:40
So the table would be in the first column of the row and some data in the next. — Frank
– Frank, Commented Mar 21, 2019 at 20:40
Could you create an MCVE (Minimum, Complete and Verifiable Example) in codesandbox or similar? — Pineda
– Pineda, Commented Mar 21, 2019 at 20:48

Frank · Accepted Answer · 2019-03-22 04:26:13Z

50

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"
/>

edited Mar 22, 2019 at 4:26

answered Mar 21, 2019 at 23:47

Frank

9751 gold badge8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jarrett GXZ Over a year ago

Wow! What a simple but dumb mistake on my part!

Gabriel Pellegrino Over a year ago

Don't forget to get the latest version of this link here: react-bootstrap.github.io/getting-started/introduction

cantaş Over a year ago

another life saver

B1zzle · Accepted Answer · 2020-03-13 16:10:06Z

27

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>

answered Mar 13, 2020 at 16:10

B1zzle

4811 gold badge5 silver badges12 bronze badges

Comments

Atul · Accepted Answer · 2019-03-21 21:24:23Z

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>

Thanks for input. Unfortunately it doesn't seem like Grid is supported in the version I'm using. I tried to specify the column length for containers and that didn't help either.
Grid has been renamed to Container. check react-bootstrap.netlify.com/migrating

johndhpark · Accepted Answer · 2019-10-05 00:40:19Z

1

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

answered Oct 5, 2019 at 0:40

johndhpark

112 bronze badges

Comments

Eric Aya · Accepted Answer · 2022-02-04 09:47:23Z

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

I am assuming that you have install react-bootstrap bootstrap library.

by npm instll react-bootstrap bootstrap. so the next step is to add the Bootstrap file in index.js or app.js. in my case I added import 'bootstrap/dist/css/bootstrap.min.css'; in index.js.

Now time to import the Component that i am using. I am using components into App.js

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

i am using Image ,Button , Row , Col .

my real code is

import logo from './logo.svg';
import './App.css';
import { Image ,Button  ,Row ,Col } from "react-bootstrap";


function App() {
  let authorName ="Pankaj Kumar";


  return (
    <div className="App">
      <span className="badge bg-danger">React JS component</span> <br />
      <Image
          src="https://dummyimage.com/170x180/000/fff.png&text=TEST123"
          thumbnail
        />

      <Row className="mx-0">
        <Button as={Col} variant="primary">Button #1</Button>
        <Button as={Col} variant="secondary" className="mx-2">Button #2</Button>
        <Button as={Col} variant="success">Button #3</Button>
      </Row>

    </div>
 );
}

export default App;

Output :

For more details: https://www.pluralsight.com/guides/how-to-import-components-from-react-bootstrap

3_SE_IT_B_ Aakash Natani · Accepted Answer · 2021-12-16 08:16:42Z

-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://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

`

answered Dec 16, 2021 at 8:16

3_SE_IT_B_ Aakash Natani

1

1 Comment

Light Yagami Over a year ago

Don't just copy paste others answers.

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related