Give the text input in your form the class form-control.
See original GitHub issueChallenge 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:
- Created 8 years ago
- Comments:10 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
input type=“text” class=“form-control” placeholder=“cat photo URL” required>
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 separateform
to go around the button as both theinput
andbutton
are in a form. Hope this helps @vvkgdm!