I am failing to see how can I align a form with the beginning of an image using Bootstrap 2.3.2.
Here is my code:
<body>
<div class="container">
<img src="http://s10.postimg.org/6xjbbn6yh/0_Bl8if_L2_Et_AUQg_Y_n0_dsw.png">
<div class="form">
<form accept-charset="UTF-8" action="/orders/97" class="form-horizontal" data-remote="true" id="edit_ad_586" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="patch"></div>
<div class="control-group">
<label class="control-label" for="score">Score</label>
<div class="controls">
<select class="input-small" id="ad_score" name="ad[score]"><option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="10">10</option></select>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn btn-primary" name="commit" type="submit" value="Score!">
</div>
</div>
</form> </div>
</div>
</body>
And here is live: Bootstrap left margin in form
I would like the form to avoid having that left margin and be aligned with the beginning of the picture. How can I do that?
If you want to simply overwrite the CSS, use the following:
jsFiddle example
.form-horizontal .controls {
margin-left: 0px;
}
.form-horizontal .control-label {
width: 54px;
text-align:left;
}
This removes the margin-left on .form-horizontal .controls, and then reduces the width of .control-label and aligns it to the left rather than the right.
I don't use bootstrap, therefore I don't know the most efficient way to achieve this. Nonetheless, this seems to be what you want.
Related
I am trying to make a search bar using html/bootstrap/Jquery which looks similar to the search bar found here:
https://us.letgo.com/en
So far I have that design but with only one text box:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-3 col-md-6">
<form class="" action="next_page.php" method="GET">
<div class="form-group" id="search_wrapper">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
css
#search_field {
background-transparent;
height:40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #CCCCCC;
outline: none;
}
#search_button {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
position:absolute;
top:0;
right:0;
font-size: 17px;
width:120px;
height:40px;
}
#search_wrapper{
height:40px;
position:relative;
}
When I add another input between the button and input between the input and button, the input just displays below both the button and the text box.
<input type="text" id="search_field" class="form-control" name="search_place" placeholder="Search By Place">
EDIT 1
I made a jsfiddle
https://jsfiddle.net/7v6hc9sz/1/
If that doesnt just link you to it, please let me know in a comment that it doesn't work. I have never used jsfiddle before.
I would recommend leveraging the Bootstrap native styles to the maximum extent possible, as they give you a robust set of tools to build your site.
For this particular issue, you're looking for Bootstrap's Inline Form styles.
Here's an example from their docs:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
You also are looking for Bootstrap Input Groups which will allow you to "pair" the button to the right of the last input.
Note the following things about that code:
1. The form has a class of form-inline. This is important, as it tells Bootstrap to line things up inline.
2. Each pair of label / inputs gets wrapped in a div with the class form-group. This tells Bootstrap to display this "group" (label and input) inline.
3. Each input gets a class of form-control. This tells bootstrap to style it up as an input.
Now, applying those classes to your markup, to achieve what you want, would look something like this:
<!-- Add the class "form-inline" -->
<h3>
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
</h3>
<form class="form-inline" action="next_page.php" method="GET">
<div class="form-group">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<!-- close the "form-group" div and start a new div -->
</div>
<!-- here we use "input-group" to get the submit tight "against" the input -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
</span>
</div>
</form>
Here's a Working Fiddle
You just need to make an inline form - the bootstrap website has examples.
It looks like this:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputOne">Input One</label>
<input type="text" class="form-control" id="inputOne" placeholder="Input Two">
</div>
<div class="form-group">
<label class="sr-only" for="inputTwo">Input Two</label>
<input type="text" class="form-control" id="inputTwo" placeholder="Input Two">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
Working bootply
Here's a bootply with connected fields by Rachel S
I had to create a custom CSS class to override the default margins for this form:
margin-right: -10px;
As well as remove the rounded corners of the following input element:
border-top-left-radius: 0;
border-bottom-left-radius: 0
See working demo below (need to see in in full-page).
You'd need to add this to your nav bar, of course.
.my-search {
padding: 1px;
margin-right: -10px;
display: inline-block;
}
.my-search2 input#search2 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>my attempt</h2>
<hr/>
<form class="form-inline">
<div class="form-group">
<div class="input-group my-search">
<input type="text" class="form-control" id="search1" placeholder="s1">
</div>
<div class="input-group my-search2">
<input type="text" class="form-control" id="search2" placeholder="s2">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</div>
</form>
I want to center align my form w.r.t. page, but if i use the following, only text input field is getting aligned but label remains at left. How to resolve it?
<div id="passCode"></div>
<form class="form-horizontal">
<fieldset>
<legend style="color:#145FAC">Please Fill in the Online Form</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control formWidth" id="inputName" placeholder="Nam" />
</div>...</div>
</fieldset>
</form>
text-align: left is applied to control-label therefore it overrides "center" applied to the parent element. Try using this css below
.control-label, .form-control {
text-align: center;
}
Use this CSS for the form:
.form-horizontal {
margin: 0 auto;
width: 70%; //Change it according to the design.
}
Demo:http://jsfiddle.net/lotusgodkk/GCu2D/722/
You can use the center tag, since you want the label to be centered.
<center>
<div id="passCode"></div>
<div class="container "> <!--center_div or center-block-->
<form class="form-horizontal">
<fieldset>
<legend style="color:#145FAC">Please Fill in the Online Form</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control formWidth" id="inputName" placeholder="Name" required>
</div>
</div>
</fieldset>
</form>
</div>
</center>
Bootstrap comes with a helper class .center-block. Try adding it to the label.
you could apply this CSS to form-control:
text-align: center !important;
text-align: -webkit-center !important
I have added Bootply sample to you please check this it may works for you http://www.bootply.com/wokazmuDbv
I'm styling this page and yet I can't seem to access either .4thForm or .3rdForm to style. These elements move responsively when screensize drops below 1024px so it's cruitial that I access these elements.
I've tested the #media call and I can change the colour .frontbannertitle with it so I know it's not the media call. Using inspector I can code the element to achieve what I would like, but it will not let me generate a css element to style it.
I need to edit this div to provide it with a negative margin-top value, as that cannot be achieved by targeting the select within the div.
Jsfiddle: http://jsfiddle.net/P49ja/
<form class="frontbannercontainer form-horizontal">
<fieldset class="frontbanner">
<h1 class="frontbannertitle">Enquire Now!</h1>
<div class="control-group">
<div class="controls">
<input id="textinput1" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls">
<input id="textinput2" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls 3rdForm">
<input id="textinput3" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls 4thForm">
<select id="selectbasic" class="frontbannerselect input-xlarge" name="selectbasic">
<option selected="selected" disabled="disabled" value="0">Select Membership</option>
<option value="1">Individual Membership</option>
<option value="2">Corporate Membership</option>
</select>
</div>
</div>
<div id="SliderFormPhone">
<span id="ques">Enquire By Phone:</span>
<span id="ph">(02) 000 000</span>
</div>
<div class="control-group">
<div class="controls">
<button id="singlebutton" class="frontbannerbutton btn btn-primary" name="singlebutton">Apply!</button>
</div>
</div>
</fieldset>
</form>
Thanks!
DEMO
You can not start a class with a number in your case it's .4thForm
Change it to something like .Form4th
I think you cannot use "3rdForm" as a valid class selector.
The first character cannot be numeric.
Refer to this SO answer.
I added "thirdForm" as a class to your fiddle and was able to style it properly. So I'm assuming that is the issue.
you need to add special character "\3" to access this class like below..
.\34thform{
display:none;
margin-top:-7em;
}
sample jsfiddle below...
http://jsfiddle.net/P49ja/4/
I'm making a form with Twitter Bootstrap, and am having a really difficult time centering the button. It's contained inside a div with a span of 7. Below is the HTML, and the button is at the very bottom. Any recommendations on how to center this thing?
<div class="form span7">
<div id="get-started">
<div id="form-intro">
<strong><h1>1. Get Started: Some basics</h1></strong>
</div>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputSaving">What are you saving for?</label>
<div class="controls">
<input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
</div>
</div>
<div class="control-group">
<label class="control-label" for="description">Add a short description</label>
<div class="controls">
<textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="categoryselect">Choose a Category</label>
<div class="controls">
<select class="span4" id="categoryselect">
<!-- Add some CSS and JS to make a placeholder value-->
<option value="Kittens">Kittens</option>
<option value="Keyboard Cat">Keyboard Cat</option>
<option value="Twitter Bird">Twitter Bird</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="imageselect">Choose an image</label>
<div class="controls span4">
<img src="piggyimage.png" id="imageselect" alt="image-select" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="goal">Your Saving Goal</label>
<div class="controls">
<input type="text" class="span4" id="goal" placeholder="$1337">
</div>
</div>
<button class="btn btn-large btn-primary" type="button">Submit</button>
</form>
</div>
</div>
Bootstrap has it's own centering class named text-center.
<div class="span7 text-center"></div>
If you don't mind a bit more markup, this would work:
<div class="centered">
<button class="btn btn-large btn-primary" type="button">Submit</button>
</div>
With the corresponding CSS rule:
.centered
{
text-align:center;
}
I have to look at the CSS rules for the btn class, but I don't think it specifies a width, so auto left & right margins wouldn't work. If you added one of the span or input- rules to the button, auto margins would work, though.
Edit:
Confirmed my initial thought; the btn classes do not have a width defined, so you can't use auto side margins. Also, as #AndrewM notes, you could simply use the text-center class instead of creating a new ruleset.
Wrap in a div styled with "text-center" class.
Question is a bit old, but easy way is to apply .center-block to button.
Since you want to center the button, and not the text, what I've done in the past is add a class, then use that class to center the button:
<button class="btn btn-large btn-primary newclass" type="button">Submit</button>
and the CSS would be:
.btn.newclass {width:25%; display:block; margin: 0 auto;}
The "width" value is up to you, and you can play with that to get the right look.
Steve
.span7.btn { display: block; margin-left: auto; margin-right: auto; }
I am not completely familiar with bootstrap, but something like the above should do the trick. It may not be necessary to include all of the classes. This should center the button within its parent, the span7.
If you have more than one button, then you can do the following.
<div class="center-block" style="max-width:400px">
Accept
Reject
</div>
Bootstrap have a specific class for this:
center-block
<button type="button" class="your_class center-block"> Book </button>
We have the following form:
<div class="form-horizontal">
<fieldset>
<legend>Reports</legend>
<div class="control-group">
<label class="control-label">Year</label>
<div class="controls">
<select id="ddlYear" class="input-small">
<option value="2011">2011</option>
<option selected="selected" value="2012">2012</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Project</label>
<div class="controls">
<label class="" id="lbProjectDesc">House X repairs</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Costs</label>
<div class="controls">
<div class="input-append">
<input type="text" value="0,0" class="span2" id="tbCosts" disabled="disabled" >
<span class="add-on">€</span>
</div>
</div>
</div>
<hr>
<div class="control-group">
<div class="controls">
<input type="submit" value="Save" onclick="$(this).button('loading');" id="btnSave" class="btn btn-primary" data-loading-text="Saving...">
</div>
</div>
</fieldset>
</div>
http://jsfiddle.net/9JNcJ/2/
The problem is that the label lbProjectDesc (text= "House X repairs") is not displayed correctly.
What class can we set or what change needs to be made to fix it?
(Preferrably the correct way, not a css hack)
#lbProjectDesc {
margin-top: 5px;
}
(doesn't consider this as a "hack" :) forked : http://jsfiddle.net/davidkonrad/LK95Q/
Taking into account Selva and davidkonrad responses we solved it like this:
.form-horizontal .control-group .controls label {
margin-top: 5px;
}
This way it affects all the cases where labels are inside horizontal forms but doesnt displace verticaly the description labels of other input types...
Works too with padding-top: 5px;
Avoid the unwanted padding from that and set what ever you want. Here problem is padding.
#lbProjectDesc {
margin-top: 5px;
}
add and see.
Demo : http://jsfiddle.net/9JNcJ/5/