title: Please help my input type text in html5 not working
body: <p><a href="https://i.stack.imgur.com/m6pMg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m6pMg.png" alt="image here"></a></p>
  
  <p>I have a problem. Since I'm new to bootstrapping I was customizing this template on startbootstrap.com. But, when I applied input type=text and refreshed my page there's no character to be seen on the actual textbox. It recognizes character but it's invisible. </p>
  
  <p>Here's the code of my login div</p>
  
  <pre><code>&lt;!-- Login Section --&gt;
  &lt;section id="login" class="content-section text-center"&gt;
      &lt;div class="login-section"&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                  &lt;h2&gt;Log-in&lt;/h2&gt;
                  &lt;form&gt;
                    &lt;label for="username"&gt;Username:&lt;/label&gt;
                    &lt;input type="text" name="username" id="username"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I think the problem here is not the HTML code. I wouldn't know, I only knew HTML CSS and PHP language in terms of web development. jQuery, bootstrap, and JavaScript are not familiar to me. Please help me.</p>
  
  <p>The CSS code of that particular class:</p>
  
  <pre><code>.login-section {
      width: 100%;
      padding: 50px 0;
      color: #fff;
      background: url(../img/downloads-bg.jpg) no-repeat center center scroll;
      background-color: #000;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
  }
  </code></pre>