question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Give the text input in your form the class form-control.

See original GitHub issue

Challenge Waypoint: Style Text Inputs as Form Controls has an issue. User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0. Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>
    </div>
  </div>
  <img src="http://bit.ly/fcc-running-cats" class="img-responsive">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form  action="/submit-cat-photo">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Lazy</label>
      </div>
      <div class="col-xs-4">
        <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
    </div>
    <input type="text" placeholder="cat photo URL" required>
  <form class="form-control">
    <div>
        <button class="btn btn-primary" type="submit">Submit<i class="fa fa-paper-plane"></i> </button>
    </div>
    </form>
    </form>
</div>

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

14reactions
ghostcommented, Oct 16, 2015

input type=“text” class=“form-control” placeholder=“cat photo URL” required>

8reactions
natac13commented, Sep 20, 2015

There seems to be an error in your code… the directions are to give the input element of type text the class of form-control There is no need to create a separate form to go around the button as both the input and button are in a form. Hope this helps @vvkgdm!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Give the text input in your form the class form-control. #3374
There seems to be an error in your code.. the directions are to give the input element of type text the class of...
Read more >
Style Text Inputs as Form Controls - Guide
Style Text Inputs as Form Controls Solutions Solution 1 (Click to Show/Hide) ... "Give your form's text input field a class of form-control....
Read more >
Forms - Bootstrap
If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default...
Read more >
<input>: The Input (Form Input) element - HTML
How an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own ......
Read more >
Bootstrap Input fields - examples & tutorial
Set heights using classes like .form-control-lg and .form-control-sm . ... The input type="text" defines a single-line text field. Text input. Show code.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found