using bootstrap with reactjs in browser

Question

I am working on a Django project in python. I am trying to use bootstrap3.3 with ReactJS. I do not use any package manager because I want to use ReactJS in browser for few pages so I made it simple.

I include javascript libraries in following order

<script src="/static/jquery/3.1.0/jquery.min.js"></script>
<script src="/static/react/15.3.0/react.min.js"></script>
<script src="/static/react-dom/15.3.0/react-dom.min.js"></script>
<script src="/static/babel-standalone/6.12.0/babel.min.js"></script>
<script src="/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/bootstrap/3.3.7/css/bootstrap.min.css">

Now, in my app/template/app folder I create login.html and write some html with bootstrap as follow:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <div class="login-panel panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Enter email below</h3>
        </div>
        <div class="panel-body">
          <form role="form">
            <fieldset>
              <div class="form-group">
                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus />
              </div>
              <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

and I got pretty form on my page

Now I try to inject same html through ReactJS but whole CSS coloring vanished

I do not have idea what i am doing wrong, can anybody help me ?

Following is ReactJS code:

var ReactLoginForm = React.createClass({
  render: function() {
    return (
      <div class="row">
        <div class="col-md-4 col-md-offset-4">
          <div class="login-panel panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Enter email below</h3>
            </div>
            <div class="panel-body">
              <form role="form">
                <fieldset>
                  <div class="form-group">
                    <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus />
                  </div>
                  <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
                </fieldset>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
});

ReactDOM.render(
  <ReactLoginForm />,
  document.getElementById('loginFrm')
);

And html code:

<div class="container">
  <div id="loginFrm"></div>
</div>

Please don't include images with code. It would be a ton better if you could include that code in the actual body of your question. — Charlie Fish
– Charlie Fish, Commented Aug 6, 2016 at 17:08

KumarM · Accepted Answer · 2016-08-06 17:15:16Z

2

Try using 'className' as the attribute instead of 'class' as 'class' is a reserved word in javascript and JSX is based on javascript. Same is the case with the 'for' attribute. You would have to use 'htmlFor' instead.

answered Aug 6, 2016 at 17:15

KumarM

1,6991 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KumarM Over a year ago

@Hassan You are welcome. If you have not looked at it yet, you may want to checkout react-bootstrap. Helps you with a much cleaner way of using bootstrap in reactjs apps: react-bootstrap.github.io/introduction.html

Collectives™ on Stack Overflow

using bootstrap with reactjs in browser

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related