title: Css bootstrap form Rails 3.2
body: <p>I would have the form in the left, but i obtained the form in the right:
  <a href="https://i.stack.imgur.com/mDF6e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mDF6e.png" alt="enter image description here"></a></p>
  
  <p>I really don't know what is the problem. Probably some Css is in contrast with  bootstrap. I would have the <code>text-field</code> separated (i obtained everything merged)
  this is the css of my form:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;legend&gt;Mr. Sosa:&lt;/legend&gt;
          &lt;/div&gt;
          &lt;!-- panel preview --&gt;
          &lt;div class="col-sm-5"&gt;
              &lt;h4&gt;Add payment:&lt;/h4&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-body form-horizontal payment-form"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="concept" class="col-sm-3 control-label"&gt;Concept&lt;/label&gt;
                          &lt;div class="col-sm-9"&gt;
                              &lt;input type="text" class="form-control" id="concept" name="concept"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="description" class="col-sm-3 control-label"&gt;Description&lt;/label&gt;
                          &lt;div class="col-sm-9"&gt;
                              &lt;input type="text" class="form-control" id="description" name="description"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt; 
                      &lt;div class="form-group"&gt;
                          &lt;label for="amount" class="col-sm-3 control-label"&gt;Amount&lt;/label&gt;
                          &lt;div class="col-sm-9"&gt;
                              &lt;input type="number" class="form-control" id="amount" name="amount"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="status" class="col-sm-3 control-label"&gt;Status&lt;/label&gt;
                          &lt;div class="col-sm-9"&gt;
                              &lt;select class="form-control" id="status" name="status"&gt;
                                  &lt;option&gt;Paid&lt;/option&gt;
                                  &lt;option&gt;Unpaid&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt; 
                      &lt;div class="form-group"&gt;
                          &lt;label for="date" class="col-sm-3 control-label"&gt;Date&lt;/label&gt;
                          &lt;div class="col-sm-9"&gt;
                              &lt;input type="date" class="form-control" id="date" name="date"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;   
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Do you have any idea? thank you</p>
  
  <p>application.css.scss</p>
  
  <pre><code>#banner {
  
    background: #9c9;
  
    padding: 10px;
  
    border-bottom: 2px solid;
  
    font: small-caps 40px/40px "Times New Roman", serif;
  
    color: #282;
  
    text-align: center;
  
  
  
    img {
  
      float: left;
  
    }
  
  }
  
  
  
  #notice {
  
    color: #000 !important;
  
    border: 2px solid red;
  
    padding: 1em;
  
    margin-bottom: 2em;
  
    background-color: #f0f0f0;
  
    font: bold smaller sans-serif;
  
  }
  
  
  
  #columns {
  
    background: #141;
  
  
  
    #main {
  
      margin-left: 17em;
  
      padding: 4em;
  
      background: white;
  
    }
  
  
  
    #side {
  
      float: left;
  
      padding: 1em 2em;
  
      width: 13em;
  
      background: #141;
  
  
  
      ul {
  
        padding: 0;
  
  
  
        li {
  
          list-style: none;
  
  
  
          a {
  
            color: #bfb;
  
            font-size: small;
  
          }
  
        }
  
      }
  
    }
  
  }
  </code></pre>
  
  <p>bootstrap_and_overrides.css</p>
  
  <pre><code>/*
  
    =require twitter-bootstrap-static/bootstrap
  
  
  
    Use Font Awesome icons (default)
  
    To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
  
    =require twitter-bootstrap-static/fontawesome
  
    */
  </code></pre>
  
  <p>sign_in.css</p>
  
  <pre><code>    body, html {
  
          height: 100%;
  
          background-repeat: no-repeat;
  
      }
  
  
  
      h2 {
  
          font: small-caps 40px/40px "Times New Roman",serif;
  
          text-align: center
  
      }
  
  
  
      .card-container.card {
  
          margin-left: 310px;
  
          max-width: 370px;
  
          padding: 40px 40px;
  
      }
  
  
  
  .card {
  
      background-color: #F7F7F7;
  
      /* just in case there no content*/
  
      padding: 20px 25px 30px;
  
      margin: 0 auto 25px;
  
      margin-top: 50px;
  
      /* shadows and rounded borders */
  
      -moz-border-radius: 2px;
  
      -webkit-border-radius: 2px;
  
      border-radius: 2px;
  
      -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  
      -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  
  }
  
  
  
  
  
      .btn {
  
          font-weight: 600;
  
          height: 36px;
  
          -moz-user-select: none;
  
          -webkit-user-select: none;
  
          user-select: none;
  
          cursor: default;
  
      }
  
  
  
  
  
  
  
  .profile-img-card {
  
      width: 96px;
  
      height: 96px;
  
      margin: 0 auto 10px;
  
      display: block;
  
      -moz-border-radius: 50%;
  
      -webkit-border-radius: 50%;
  
      border-radius: 50%;
  
  }
  </code></pre>