I tried many things but could not align "Advanced Search Button" next to search bar. You can see the pic below.
Here are codes I used
<div class="row">
<div class="col-md-12">
<center>
<form>
<div class="form-group">
<div class="input-group" style="width:90%;">
<input class="form-control" name="search" placeholder="ISBN, Yazar yada Kitap adı yazınız" autocomplete="off" autofocus="autofocus" type="text">
<span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span>
</div>
<button class="btn btn-default btn-sm">Advanced Search</button>
</div>
</form>
</center>
</div>#*col-md-12*#
</div>#*row*#
Thanks
Give the buttons a wrapper div with the class .input-group-btn.
Source http://getbootstrap.com/components/#input-groups-buttons-multiple
if you are using bootstrap, try to use the class "pull-right" or "pull-left" depends on what you want.
there's the solution. I hope enjoy
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<center>
<form>
<div class="col-md-12" style="width:50%; margin-left:25%;">
<div class="row">
<div class="input-group" >
<input class="form-control" name="search" placeholder="ISBN, Yazar yada Kitap adı yazınız" autocomplete="off" autofocus="autofocus" type="text">
<span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
<br />
<div class="row">
<button class="btn btn-default btn-sm pull-right">Advanced Search</button>
</div>
</div>
</form>
</center>
</div>
</div>
For some reason.. the button in the input-group keeps wrapping to the 2nd line.. the only way I can force it to stay on the 1st line is to use CSS to make the width 80% for example. But then the spacing seems off between the 4 elements..
Is there a cleaner way of doing this? I dont even know why it's wrapping to the 2nd line.. maybe because I'm using this in a Modal?
EDIT: how it looks like http://imgur.com/sfWqATl
<!--3rd row-->
<div class="row form-group">
<div class="col-md-2">
stuff...
</div>
<div class="col-md-4">
<div class="input-group">
<small>Logo 1 ID / File Path</small>
<br />
<div>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-folder-open" type="button"></button>
</span>
</div>
</div>
</div>
<div class="col-md-4">
stuff...
</div>
<div class="col-md-2">
stuff...
</div>
</div>
I think you may have gotten a little mixed up in setting up the classes and elements to chain correctly based on the documentation. I re-wrote some of the code to model it from the bootstrap website, and it appears to work fine:
<div class="col-md-4">
<small>Logo 1 ID / File Path</small>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-folder-open"></i></button>
</span>
</div>
</div>
You can see the example here: http://www.bootply.com/EHvB2rn9YW
I can't work out (conforming to "proper bootstrap") how to get a button to sit next to an input-group within a div.
They need to be center aligned.
This is what I want it to look like...
This is what is happening...
Here is my current code.
<div>
<div>
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
I have created this js fiddle...
https://jsfiddle.net/ptwbn2av/
Thanks!
You could also try the pull-left class.
The classes .pull-left and .pull-right also exist and were previously
used as part of the media component, but are deprecated for that use
as of v3.3.0. They are approximately equivalent to .media-left and
.media-right, except that .media-right should be placed after the
.media-body in the html.
The html:
<div>
<div class="pull-left">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
You can use:
style="margin-right:5px"
to add some spacing after the div, and then the new mark-up would be as follows:
<div>
<div class="pull-left" style="margin-right:5px">
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
With your current code, you can use the flexbox.
A powerful CSS layout module that gives us an efficient and simple way to lay out and align things.
<div class="flex">
<div>
<button type="button" class="btn">Delete</button>
</div>
<div>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
.flex {
display: flex;
flex-direction: row;
}
This is the screenshot of the result:
You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Cheers!
divs are block elements, which means that they align vertically. For example,
<div>
Hello World!
</div>
<div>
Goodbye World!
</div>
would result in:
Hello World!
Goodbye World!
So, in order to make the elements flow horizontally, you have to make the div inline because inline elements can flow horizontally, such as text and <span>.
You can add a rule to your css:
#delete-button {
display:inline-block;
}
And of course, you should add an id attribute to the button.
If the above doesn't work, you should consider putting all the elements in one div because <button>, <input>, and <span> are all inline elements.
Just add the grid classes. Try this
<div>
<div class="col-xs-2">
<button type="button" class="btn">Delete</button>
</div>
<div class="col-xs-10">
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
https://jsfiddle.net/xbu9qtje/
Here one solution to the problem.
<div class="container">
<div class="input-group">
<button class="btn btn-outline-primary border-left-0 border" type="button">
Delete
</button>
<input type="text" class="form-control py-2" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
You can see the output at this link: codeply.com/p/xijLBe2vff.
Try the form-inline class in the root div, it will default to "inline" putting your fields one next to the other:
<div class="form-inline my-2 my-lg-0">
<button type="button" class="btn">Delete</button>
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
you can just put
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #disabled = "true", #class = "input-group-addon", #style = "width:50px;text-align:center;" } })
<div class="col-md-12">
<div class="col-md-1">
<button type="button" class="btn">Delete</button>
</div>
<div class="col-md-11">
<div class="input-group">
<input type="text" class="form-control" value="1" />
<span class="input-group-addon">Update</span>
</div>
</div>
</div>
I have the following code...
<div class="row">
<div class="span6">
<h2>Some Text</h2>
</div>
<div class="span6">
<form class="form-inline pull-right">
<input type="text" class="input-large">
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
...but the search form doesn't align with the h2 tag. Do I need to have the form custom styled via css or am I missing out on some default Bootstrap class to fix this?
Thanks so much for taking time to read/answer this query.
[edit]
http://jsfiddle.net/nuB23/
Added jsfiddle
Try to add this style:
[class*="span"], h2 {
display: inline;
}
Updated Fiddle
Remove the pull-right class on the form.
The other issue is the h2 has extra padding and is a block level. I think what you are really after is this:
<div class="nav"> </div>
<div class="container">
<form class="form-horizontal ">
<div class="control-group ">
<label class="control-label large" for="searchInput">Label text:</label>
<div class="controls search">
<div class="input-prepend "> <span class="add-on"><i class="icon-search"></i></span>
<input type="text" id="searchInput" />
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</form>
</div>
http://jsfiddle.net/dbrin/AV654/
How do I make this search form full width like the button below it?
<form class="form-search">
<div class="input-append">
<input type="text" class="input-small search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
Done
http://jsfiddle.net/MgcDU/6033/
Using approach from here:
http://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/
<div class="container">
<div class="row">
<div style="width:100%;background-color:#d0d0d0;text-align:center;">Example of a Full row</div>
</div>
<div class="row">
<div class="span12 pull-right">
<form class="form-inline">
<button type="submit" class="btn" style="float:right;">Button</button>
<div style="overflow: hidden; padding-right: .3em;">
<input style="height:1.6em;width:100%" type="text" placeholder="full width minus button width" />
</div>
</form>
</div>
</div>
</div>
Make the .input-append have a specific width then give your .search-query a width of 100% and your .btn a width of 100%
This is the best We can do without more details - like the CSS that is controlling this or an example of what you are doing on the page.