I'm pretty new to Bootstrap and CSS, so please excuse the probable immaturity of my question.
Ok, so here goes:
Context:
I'm using bootstrap and the [Grayscale theme] for a simple tool I'm building to help my students use coursera more effectively.
I have the following snippet of code:
<div>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-xl-4">
<input type="text" class="from-control" placeholder="Enter the link to your course">
<button type="button" class="btn btn-primary">Download Videos</button>
</div>
</div>
</div>
</form>
</div>
Problems:
The text entered in the textbox is not visible. I made sure text is actually entered in the box (by copy/pasting it to an editor) and I have not changed the default text color.
I can't seem to change the size of the text area. I've used col-xs-1, col-xs-2, and many more variations. It always takes the default size. The only thing that changes is the position of the textbox and button on the page. Do you know why that happens?
I would really appreciate your help! I've looked at some similar questions on the topic, but couldn't figure this out.
Many thanks!
Raf
The class for the textbox should be form-control, not from-control. Change that and try again?
EDIT: There is no such class as col-xl-4 in Bootstrap. Use col-xs-4 or col-lg-4.
#GertV is correct above in sying that you should be using form-control and that col-xl classes do not exist. The reason you cannot see the textarea though is that you have not declared its width.
Try this:
<div>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-md-4">
<input type="text" style="width: 300px;" class="form-control" placeholder="Enter the link to your course">
<button type="button" class="btn btn-primary">Download Videos</button>
</div>
</div>
</div>
</form>
</div>
Related
I am using bootstrap in my project. The project uses jade as view engine. I have the following code.
extends layout
block content
.container
.row
.col-md-4.col-md-offset-4
.panel.panel-default
.panel-heading
h1.center-text Weather Application
.panel-body
form.form-inline
.form-group
label.sr-only(for="cityname") City name
input.form-control(type="text" placeholder="Enter City Name")
button.btn.btn-primary(type="submit") Add City
I dont know for some reason I am getting the html view as follows.
There is no gutter between the text box and the button. Can anyone tell me the reason for this.
For me, the above Jade compiles to:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="center-text">Weather Application</h1>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label for="cityname" class="sr-only">City name</label>
<input type="text" placeholder="Enter City Name" class="form-control"/>
</div>
<button type="submit" class="btn btn-primary">Add City</button>
</form>
</div>
</div>
</div>
</div>
</div>
Which ends up looking like this:
Do you have any custom CSS?
The code runs fine for me using bootstrap 3.3.6. There is a gutter. What version are you using?
Please check using the dev tools in your browser to see if another css class is overriding bootstrap's css.
I have been struggling with making the text input field 'txtProduct' larger. I have had some mild success but it seems the inline nature of the fields are prohibiting me from doing this properly using bootstrap. I'd imagine it's a simple fix but I am not a front end person. Please make any suggestions. I would like it to be something like col-md-10 or something around there...
I need the first text field much larger.
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<p class="lead">xxxxx</p>
<form class="form-inline">
<div class="form-group col-xs-push-10 col-md-pull-10">
<input class="form-control input-lg" id="txtProduct" name="txtProduct" type="text" placeholder="e.g. ALFALFA SPROUTS" autocomplete="on">
</div>
<div class="form-group">
#Html.DropDownListFor(x => x.Markets, new SelectList(Model.Markets, "Value", "Text"), new { #class = "form-control input-lg" })
</div>
<button type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-search"></span></button>
</form>
<div id="status" name="status"></div>
</div>
<div class="col-md-2"></div>
</div>
This might do it. Either incorporate into your CSS file, or paste it in the body at top:
<style>
.input-lg {font-size:2rem;padding:3px 7px;}
</style>
Experiment with font-size -- that is primarily what makes the input field larger, although you can also use height:2rem; and width:3rem; to size the field without changing text size.
Also, know the difference between px, em, rem and vw/vh in font-size. Lots of good explanation google-able, especially from css-tricks.com.
You can try this for making input type text element font size enlargement.
input[type='text']{
font-size: 20px;
}
I want to make the borders of my form glow when a function is executed.
Something like a pulse that's gonna happen when the uptdate function, which is called every 5 seconds, is called. Just as a way to show that the content was saved. How can I do that? I looked in so many places and over many CSS properties but I couldn't come up with something that would create that effect. I am using AngularJS and Bootstrap.
the html
<div class=" container col-lg-8" id="right" >
<div id="delete-button" class="row">
<a ng-really-message="Are you sure you want to delete this note?" ng-really-click="deleteNote(note)" class="glyphicon glyphicon-trash " style="float:left;">Delete</a>
</div>
<form >
<div class="row">
<input id="note-title" type="text" class="form-control" ng-model="title" placeholder="Untitled">
<div>
<textarea id="note-body" class="form-control fadein" rows="2" cols="25"
ng-model="body" placeholder="Write your note here..." ></textarea>
</div>
</div>
</form>
<div data-fb-like=""></div>
</div>
Try this CSS library, hope it will works for you :
https://daneden.github.io/animate.css/
I am using the jquery tab control. I have a form in each of them and I want to submit each form independently. I have been googling and reading about forms and submit but the only way I have found so far is by using jquery. I would prefer to use the submit buttons.
I have used http://foundation.zurb.com/docs/components/section.html tab forms instead of jQuery's and yes I needed a separate submit button for each form so that it only collected the data from the form it was attached to. You want to create a different form within each div of the tab in question. I found Zurb's Foundation easy to use and they give you code so you only have to tweak it a bit. Here's an example of just one tab using Foundation.
<div class="content" data-slug="panel3" data-section-content="">
<form>
<div class="row collapse">
<div class="large-2 columns">
<label class="inline">Your Name</label>
</div>
<div class="large-10 columns">
<input type="text" id="yourName" placeholder="Jane Smith">
</div>
</div>
<div class="row collapse">
<div class="large-2 columns">
<label class="inline"> Your Email</label>
</div>
<div class="large-10 columns">
<input type="text" id="yourEmail" placeholder="jane#smithco.com">
</div>
</div>
<label>What's up?</label>
<textarea rows="4"></textarea>
<button type="submit" class="radius button">Submit</button>
</form>
</div>
Let me know if this does not answer your question properly.
Add a <form> for each of your tabs.
Add a <input type="submit" value="submit" /> inside each form.
Make sure that none of your forms are nested inside each other.
You should be able to submit each tab independently.
The following code example code should result in something like .
<form class="well form-search">
<div class="pull-right">
<div class="input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</form>
This works perfectly well in Firefox, but in both Chrome and Internet Explorer 7 browsers, it looks like the following:
Am I doing something "illegal" with bootstrap? I did not make any adaptions yet so it's completely out-of-the-box.
Any help is greatly appreciated!
This was a reported issue: https://github.com/twitter/bootstrap/issues/1362
The fix outlined by tonybolzan in the issue works best because you don't have explicitly set a width:
.input-prepend, .input-append {
white-space: nowrap;
-webkit-padding-end: 27px;
}
The problem is with the whitespace found in your markup, try to place the span tag on the same line as the input, like so:
<form class="well form-search">
<div class="pull-right">
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span><input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</div>
</form>
This is old, but it helped me determine the answer I was looking for:
The problem is probably that bootstrap is setting the width of the input to 210px, which is causing the whole icon/input/button grouping to be wider than your well.
I've updated the fiddle Andres posted above with a sample of the problem by forcing the well forms to a smaller width than their default and a fix by using an input class with a smaller width.
http://jsfiddle.net/dDtUg/2/