title: How to draw a border around a Bootstrap form in ReactJS?
body: <p>I'm new to JavaScript and ReactJS. </p>
  
  <p><strong>What do I want to get</strong></p>
  
  <p>I want to create a page with the following layout:</p>
  
  <p><img src="https://i.imgur.com/MeURctK.png" alt="Mockup">.</p>
  
  <p>As you can see, both forms have a border around them. That's what I want to 
  achieve (add a border to the sign-up form).</p>
  
  <p><strong>What I did to acheive the result</strong></p>
  
  <p>I created a simple NodeJS/React application according to <a href="https://medium.com/@bryantheastronaut/react-getting-started-the-mern-stack-tutorial-feat-es6-de1a2886be50" rel="nofollow noreferrer">this tutorial</a>.</p>
  
  <p>Then I defined the entry page (page that will contain both forms) like this:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Button, Row, Col, Jumbotron } from 'react-bootstrap';
  import SignUpForm from './SignUpForm';
  
  class EntryPage extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Jumbotron&gt;
            &lt;h1&gt;CTR Predictor&lt;/h1&gt;
            &lt;p&gt;CTR Predictor allows you to automatically estimate the optimal price for keyword combinations used in search engine marketing campaigns.&lt;/p&gt;
          &lt;/Jumbotron&gt;
          &lt;Row&gt;
            &lt;Col xs={6} md={3}&gt;&lt;SignUpForm /&gt;&lt;/Col&gt;
            &lt;Col xs={6} md={6}&gt;Place for the login form&lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default EntryPage;
  </code></pre>
  
  <p><code>SignUpForm</code> is defined as follows.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
  import style from './style';
  
  class SignUpForm extends Component {
    render() {
      return (
        &lt;div class="signUpForm"&gt;
          &lt;form&gt;
            &lt;FormGroup
              controlId="formBasicText"
            &gt;
              &lt;ControlLabel&gt;Working example with validation&lt;/ControlLabel&gt;
              &lt;FormControl
                type="text"
                placeholder="Enter text"
                onChange={this.handleChange}
              /&gt;
              &lt;FormControl.Feedback /&gt;
              &lt;HelpBlock&gt;Validation is based on string length.&lt;/HelpBlock&gt;
            &lt;/FormGroup&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default SignUpForm;
  </code></pre>
  
  <p><code>style.js</code> is located in the same directory as the files above and contains this:</p>
  
  <pre><code>const style = {
    signUpForm: {
      border:'2px solid #000000',
    }
  }
  
  module.exports = style;
  </code></pre>
  
  <p>When I run the application, there is no border around the sign-up form.</p>
  
  <p><img src="https://i.imgur.com/tIk7TI7.png" alt="Screenshot of the form without the border"></p>
  
  <p><strong>What I tried to fix the error</strong></p>
  
  <p>I tried to add <code>bsClass='signUpForm'</code> (as suggested <a href="https://stackoverflow.com/questions/40738484/how-to-customise-react-bootstrap-components">here</a>) to the declaration of <code>FormGroup</code> in
  <code>SignUpForm</code>, but it didn't help.</p>
  
  <p>How can I fix this error (make sure that the border around the form is displayed)?</p>