CODEWITHSUNDEEP
cssreactjstwitter-bootstrap
Sajjad Tabreez
Sajjad Tabreez

Reputation: 188

bootstrap columns not working in react js application

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%;
  }

enter image description here

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.

Upvotes: 0

Views: 2658

Answers (1)

sdabrutas
sdabrutas

Reputation: 1517

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>

Upvotes: 1

Related Questions