CODEWITHSUNDEEP
javascripthtmlcssreactjs
chompy
chompy

Reputation: 179

How come I can't use CSS this way?

I wanted to create a web app using ReactJS. I got the bootstrap working but now I want the CSS to work. Why isn't my method valid in doing what my CSS is trying to do?

Here's my index.html file:

<!DOCTYPE html>
<html>

  <head>
     <title>My website</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="index.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="firstBar"></div>
    <script type="text/babel" src="index.js"></script>
  </body>

</html>

Here's my index.css file:

#portfolio {
  text-align: center;
}

Here's my index.js file:

var TitleBar = React.createClass({
  render: function() {
    return(
      <div className="container">
        <button id="portfolio" type="button" className="btn btn-primary">Portfolio</button>
        <button type="button" className="btn btn-primary">About</button>
        <button type="button" className="btn btn-primary">Contact</button>
      </div>
    );
  }
});

ReactDOM.render(<TitleBar />, document.getElementById('firstBar'));

Upvotes: 0

Views: 82

Answers (2)

justDan
justDan

Reputation: 2333

You are using className twice. It will work if you put the portfolio class in the other className.

var TitleBar = React.createClass({
  render: function() {
    return(
      <div className="container">
        <button type="button" className="btn btn-primary portfolio">Portfolio</button>
        <button type="button" className="btn btn-primary">About</button>
        <button type="button" className="btn btn-primary">Contact</button>
      </div>
    );
  }
});

ReactDOM.render(<TitleBar />, document.getElementById('firstBar'));

http://codepen.io/justdan/pen/JEyYvQ?editors=1010

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53709

Looks like it's because your CSS references the ID #portfolio instead of the class .portfolio. The # in front of the name means the element is an ID, and the . means the element is a class.

Upvotes: 0

Related Questions