Currently, I am diving into the world of React and React-Bootstrap to expand my skill set.
My focus is on utilizing the React-Bootstrap grid layout effectively. However, I suspect that I might be doing something wrong in my implementation. It seems like the "Container, Col, Row" functionality is not working as expected, and I'm running out of troubleshooting ideas.
What could be causing this issue?
Details 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"
Information from the package.json in the "bootstrap" directory:
"_from": "bootstrap@latest",
"_id": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010647e637e61">[email protected]</a>",
Details from the package.json in the "react-bootstrap" directory:
"_from": "react-bootstrap@^1.0.0-beta.6",
"_id": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a3b4b0b2a5fcb3bebea5a2a5a3b0a191e0ffe1ffe1fcb3b4a5b0ffe7">[email protected]</a>",
I have also attempted to install and use bootstrap@3 without success:
npm install bootstrap@3 --save
npm i --save bootstrap@3
Main code 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 *
For a Minimal, Complete, and Verifiable Example (MCVE), check out:
The expected output should be HelloWorld, but it is currently displayed as:
Hello
World