I'm trying to get a search form to pull-right within a well. it pulls to the right but moves south of the well.
the code i have is;
<div class="container">
<div class="well">
<div class="pull-right">
<form class="form-inline " role="form">
<input type="search" class="form-control" id="search" placeholder="Search Assets">
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
I've done a jsfiddle at http://jsfiddle.net/52VtD/3366/
You need to clear float after your floated div.
Here
<div class="container">
<div class="well">
<div class="pull-right">
<form class="form-inline " role="form">
<input type="search" class="form-control" id="search" placeholder="Search Assets">
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>
Related
I'm trying to have 2 input fields next to each other in a (bootstrap-css) col-md, but can't seem to get it right.
Here is what I have so far
https://jsfiddle.net/9hrx59bd/
It also doesn't help when I put both input fields in the same input group, by removing this:
...
</div>
<div class="input-group ">
How can I get them next to each other, and use the full width?
You need to make both input-groups a col-md-6, here is the result: link
<div class="row">
<form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
<div class="input-group col-md-6 col-sm-6 col-xs-6">
<input class=" form-control " placeholder="city" id="location" type="text" name="location">
</div>
<div class="input-group col-md-6 col-sm-6 col-xs-6">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit">
<span class=" glyphicon glyphicon-search" ></span>
</button>
</span>
</div>
</form>
</div>
Edit
I made it work on smaller screens by adding col-sm-6 and col-xs-6 aswell
Bootstrap Inline Form
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form id="searchform" action="" accept-charset="utf-8" method="post">
<div class="col-md-6">
<div class=" form-group">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
</div>
</div>
<div class="col-md-6">
<div class="form-group input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit">
<span class=" glyphicon glyphicon-search" ></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
I think you just want a form-control and an input-group.
<div class="row">
<div class="col-md-6">
<form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
<div class="input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</div>
</div>
Demo
EDIT: Another option is to use the grid columns, but remove the padding:
.pr-0{
padding-right:0;
}
.pl-0{
padding-left:0;
}
<form class="row" id="searchform" action="" accept-charset="utf-8" method="post">
<div class="col-xs-6 col-sm-3 pr-0">
<input class="form-control" placeholder="city" id="location" type="text" name="location">
</div>
<div class="col-xs-6 col-sm-3 pl-0">
<div class="input-group">
<input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
<span class="input-group-btn">
<button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
</form>
See the 2nd item in the demo
Assuming you want the input next to each other, refer code:
Please view the results in full page view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Password">
</div>
</form>
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>
I have a project that is based on the Gentellela template from ColorLib. The Search Bar at the top is inline and styled, however is not a form. When I add the code to submit the search to my view, the submit ("Go") button moves to the next line.
What is the best way to accomplish this while keeping the style?
Original Code from Template (sans form tags).
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
My Latest Attempt
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<form action="" method="post" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search for...">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</form>
</div>
As Always, I appreciate all help, suggestions and comments.
A good practice would be to nest the input field and the button inside form-group with a div that has a input-group class. This is how input groups are made on Bootstrap.
It applies a display:inline-table style to hold the components inline.
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<form action="" method="post" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div>
</div>
</form>
</div>
I'm trying to center a form inside a column in bootstrap. Is it possible because I'm searching for more than an hour and still found nothing. I'm a novice in bootstrap...
My code:
<div class="container-fluid">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-8">
<form class="form-inline row" role="form" action="index.php" method="post">
<input class="form-control" type="text" name="kerkim" id="input_main" value="">
<i id="slash">|</i>
<div class="input-group">
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="text" class="btn btn-warning"><i>Me gjej</i></button>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button>
</form>
</div>
<div class="col-sm-2"><h3>Second left</h3></div>
<div class="col-sm-2"><h3>Second right</h3></div>
You can use offset value in form col-md-offset-4
<form class="form-inline row col-md-offset-4" method="post" action="index.php" role="form">
For more detail go with LINK
add a class to form "center_form"
<form class="form-inline row center_form" role="form" action="index.php" method="post">
and add below css
.center_form{margin:0 auto;}
You need to remove class row from your form element, as it contains no columns. Next, you need to use css to center your form.
Try this:
HTML
<div class="container-fluid">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-8">
<form class="form-inline centered" role="form" action="index.php" method="post">
<input class="form-control" type="text" name="kerkim" id="input_main" value="">
<i id="slash">|</i>
<div class="input-group">
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="text" class="btn btn-warning"><i>Me gjej</i></button>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button>
</form>
</div>
<div class="col-sm-2"><h3>Second left</h3></div>
<div class="col-sm-2"><h3>Second right</h3></div>
</div>
</div>
CSS
.centered {
margin: auto;
}
Alternatively, you can use this html layout to accomplish a centered form:
<div class="container-fluid">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-8">
<div class="row">
<form class="form-inline centered col-sm-8 col-sm-offset-2" role="form" action="index.php" method="post">
<input class="form-control" type="text" name="kerkim" id="input_main" value="">
<i id="slash">|</i>
<div class="input-group">
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="text" class="btn btn-warning"><i>Me gjej</i></button>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button>
</form>
</div>
<div class="col-sm-2"><h3>Second left</h3></div>
<div class="col-sm-2"><h3>Second right</h3></div>
</div>
</div>
</div>
The problem is Google chrome browser shows the search box in a new line whereas the Mozilla firefox display correctly as inline.I want to solve the problem using bootstrap classes
Can anyone help me to solve this problem in the code
<div class="navbar-collapse collapse4">
<form class="form-inline navbar-form navbar-right" action="http://example.com/search/search" method="post">
<div class="input-group">
<input type="text" class="form-control" name="search" id="search" placeholder="Search by author, title, ISBN here">
<span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
</div>
</form>
</div>
The problem is you adding the search box to navbar but Don't do this:
<div class="navbar-collapse collapse4">
<form class="form-inline navbar-form navbar-right" action="http://example.com/search/search" method="post">
<div class="input-group">
<input type="text" class="form-control" name="search" id="search" placeholder="Search by author, title, ISBN here">
<span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
</div>
</form>
</div>
Do this instead:
<div class="col-sm-4">
<form class="form-inline navbar-form navbar-right" action="http://example.com/search/search" method="post">
<div class="input-group">
<input type="text" class="form-control" name="search" id="search" placeholder="Search by author, title, ISBN here">
<span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
</div>
</form>
</div>
Tip: You can always use Inspect element in chrome to debug your code.