title: Bootstrap: How to delete the border form?
body: <p>I am trying to change the default Bootstrap form style to get a similar form style like the picture show (just a underline)  <a href="https://i.stack.imgur.com/zgZfQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zgZfQ.png" alt="form"></a></p>
  
  <p>However, I can't delete the default grey border that the Bootstrap form has. How can I delete it. (Please find attached to this post the code)</p>
  
  <p>To sum up, I would like to keep the red bottom line and delete the grey lines of my code.</p>
  
  <p>Thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form-control {
      background-color: transparent !important;
      background-image: none !important;
   border-bottom-color:red !important;
   border-bottom-style:solid !important;
   border-bottom-width:1px !important;
   
      border-radius: 0 !important;
      box-shadow: 0 !important;
      display: block !important;
      font-size: 15px !important;
      height: 45px !important;
      line-height:  1!important;
      padding: 5px 20px 20px 14px;
      width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
    &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- form --&gt;
  &lt;div class="container"&gt; 
  &lt;div class="row"&gt;
   
      &lt;div style="margin-top:70px; padding-right:26px; padding-left:78px " class="col-md-6 mb_40"&gt;
      
  &lt;form  class="form-horizontal"&gt;
  &lt;fieldset&gt;
  
  
  &lt;!-- Name input--&gt;
  &lt;div class="form-group row"&gt;
    &lt;div class="col-md-6"&gt;
    &lt;input id="Name" name="Name" type="text" placeholder="Name" class="form-control input-md" required=""&gt;
    &lt;/div&gt;
  &lt;!-- Email input--&gt;
    &lt;div class="col-md-6"&gt;
    &lt;input id="email" name="email" type="text" placeholder="Email" class="form-control input-md" required=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Subject input--&gt;
  &lt;div class="form-group"&gt;
    &lt;div class="col-md-12"&gt;
    &lt;input id="Subject" name="Subject" type="text" placeholder="Subject" class="form-control input-md" required=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Textarea --&gt;
  &lt;div class="form-group"&gt;
    &lt;div class="col-md-12"&gt;                     
      &lt;textarea class="form-control" id="Message" name="Message"&gt;Message&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/fieldset&gt;
  &lt;div class="col-md-12"&gt;
  &lt;div class="row"&gt;
  &lt;button style="padding-right:20px; padding-left:20px" type="submit" class="btn btn-black"&gt;Send&lt;/button&gt;
  &lt;div class="g-recaptcha pull-right" data-sitekey="6Le_VicTAAAAAN1XKkiFpdQGDugyzdALXKEnBSaz"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  
   &lt;/div&gt;
      
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.form--&gt;&lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>