CODEWITHSUNDEEP
javascriptreactjstwitter-bootstrap
pedron
pedron

Reputation: 237

Bootstrap won't work in React

I'm finally trying to implement some of the stuff i've been reading about with Bootstrap and React. I started this React tutorial: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial The hello world app works fine. Now i'm trying to insert some bootstrap code into this hello world app and i'm already bumping into issues. I added this code in my index.html in the head tag:

Index.html code looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="css.site.css" rel="stylesheet">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

    <title>React App - Test Title</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

also, the App.js file looks like this (with React)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <body>
      <div className="container">
      <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
      </div>
      </body>
    );
  }
}

export default App;

However, the page renders without bootstrap. it looks like this: One of three columns One of three columns One of three columns

Upvotes: 1

Views: 652

Answers (2)

Gabriel Ferreira
Gabriel Ferreira

Reputation: 330

The class attribute is a javascript word, so React has implementedclassName, which in the end is the same thing. You can take a look at React's own documentation:

https://reactjs.org/docs/dom-elements.html#classname

Sorry my english :D

Upvotes: 1

alephtwo
alephtwo

Reputation: 322

class is a reserved word in JavaScript, so you can't use that in JSX. The proper syntax is className.

Upvotes: 2

Related Questions