title: Styling a Form.Check (checkbox) control in react bootstrap
body: <p>I am a beginner in react and bootstrap. I would like to know - How can I style the Form.Check (checkbox) so that the default look and feel can be overridden with a better style. (say a switch or any other look and feel). </p>
  
  <p><strong>This is what I tried</strong> (I used a css style but it is not working as expected):</p>
  
  <p><strong>MyForm.js</strong></p>
  
  <pre><code>import React from 'react';
  import { Row, Form, Col, Button, Container } from 'react-bootstrap';
  
  class MyCustomClass extends React.Component {
    constructor(props) {
      super(props);
  
      render()
      {
        return (
          &lt;div&gt;
            &lt;br /&gt;
            &lt;h3&gt;Page Title&lt;/h3&gt;
            &lt;Form&gt;
              &lt;Form.Group &gt;
                &lt;Form.Check
                  type="Checkbox"
                  label="Click me"              
                /&gt;
              &lt;/Form.Group&gt;
            &lt;/Form&gt;
          &lt;/div&gt;
        )
      }
    }
  }
  </code></pre>
  
  <p>MyForm.css</p>
  
  <pre><code>.form-inline {
      width: 100%;
    }
  
    .form-group {
      width: 90%;
    }
  
    .input-group {
      width: 90% !important;
    }
  
    .form-control {
      width: 67% !important;
    }
  
    //This makes no difference
    .form-control [type=checkbox] {
      width: 120px;
      height: 40px;
      background: #333;
      margin: 20px 60px;
  
      border-radius: 50px;
      position: relative;
    }
  </code></pre>