bootstrap columns not working in react js application - css

Question

My bootstrap column classes are not working.
It's coming in a single line.
My code:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
class PLPMenu extends Component {
state = {
shoeCategory: []
}
componentDidMount() {
const url = 'GirlShoeCategory'
axios.get(`http://localhost:3030/${url}`)
.then(res => {
console.log(res.data.express.catalogEntryView);
this.setState({
shoeCategory: res.data.express.catalogEntryView
})
})
}
render() {
const { shoeCategory } = this.state;
return (
<div>
{
shoeCategory.map(shoeList => (
<div className="container">
<div className="row">
<div className="col-md-4">
<h2 key={shoeList.uniqueID}></h2>
<Link to="/PDP"><p className="pdp">{shoeList.name}</p></Link>
</div>
</div>
</div>
))
}
</div>
)
}
}
export default PLPMenu;
index.css
.header{
display:inline-flex;
vertical-align: top;
list-style-type: none;
}
.header .dropbtn {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.header:hover .dropbtn {
background-color: #00b5cc;
}
.dropdown-content {
list-style-type: none;
margin: 0px;
padding: 0px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #ddd;
}
.header:hover .dropdown-content {
display: block;
}
.drop-button {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.sub-menu{
list-style-type: none;
display:none;
}
.dropdown-content:hover .submenu{
background-color: red;
}
.dropdown-content li:hover .sub-menu {
display: block;
}
.pdp{
height:200px;
background-color: #ddd;
width: 350px;
}
img{
width:100%;
}
I have imported bootstrap classes in the App.js file
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
but still the bootstrap columns classes are not working. Can anybody please help me on this. I'm not able to figure it out.

Answer 1

I think your error here is that when you map your data, you include the .row div. You might want to try this:
<div>
<div className="container">
<div className="row">
{
shoeCategory.map(shoeList => (
<div className="col-md-4">
<h2 key={shoeList.uniqueID}></h2>
<Link to="/PDP"><p className="pdp">{shoeList.name}</p></Link>
</div>
))
}
</div>
</div>
</div>