I want to make a good looking responsive search form with CSS Bootstrap.
Following is my html and bootstrap code:
<form class="form-inline" role="form" style="">
<div class="row">
<div class=" col-md-4 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-search form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Keyword</span>-->
<input type="text" id="searchjob" class="form-control" placeholder="Enter Keywords">
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-globe form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Location</span>-->
<select class="form-control">
<option>London</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-question-sign form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Category</span>-->
<select class="form-control" style="">
<option>Administration</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-2 form-group group-1">
<input type="submit" value="SEARCH" class="btn btn-warning form-top" style="margin-top: -1px">
</div>
</div>
</form>
This is how it looks on laptop screen:
enter image description here
This is how it looks on mobile device:
enter image description here
As you can see it looks very nice on mobile devices with full width of form inputs, but it does not look good on my laptop screen. I want to make full width on every device screen. Please help.
Just put your code to :<div class="container"> your code </div> so it will look better.
<div class="container">
<form class="form-inline" role="form" style="">
<div class="row">
<div class=" col-md-4 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-search form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Keyword</span>-->
<input type="text" id="searchjob" class="form-control" placeholder="Enter Keywords">
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-globe form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Location</span>-->
<select class="form-control">
<option>London</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-question-sign form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Category</span>-->
<select class="form-control" style="">
<option>Administration</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-2 form-group group-1">
<input type="submit" value="SEARCH" class="btn btn-warning form-top" style="margin-top: -1px">
</div>
</div>
</form>
</div>
To get better result, see the documents for container here Container Bootstrap Documentation
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 am new in html and I have a code where I would like to align the input tag and the button on the right sign on the same line. How can I do that?
<div class="form-group input-group">
<input type="text" class="form-control" />
<span class="input-group-btn input-group-addon">
<button class="btn btn-del input-group-delete" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
</span>
</div>
My jsfiddle : https://jsfiddle.net/DTcHh/17952/
You can also do it in this way...
<style>
.nopadding{
padding:0;
}
</style>
<div class="timeline-panel">
<div class="timeline-heading">
<div class="form-horizontal col-xs-12">
<div class="form-group input-group">
<input type="text" class="form-control" />
<span class="input-group-btn input-group-addon nopadding">
<button class="btn btn-del input-group-delete" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
</span>
</div>
</div>
</div>
</div>
Since you are using bootstrap you can just add pull-right in the input field and button both.
For example:
<input type="text" class="form-control pull-right" />
In button as well:
<button class="btn btn-del input-group-delete pull-right" data-tooltip="tooltip" >
While using addon in bootstrap if you define any element inside the addon span it will cluttered because in bootstrap the addon class have padding in css and that is way you button will not aligned in this case you can do it like this :
<div class="timeline-panel">
<div class="timeline-heading">
<div class="form-horizontal col-xs-12">
<div class="form-group input-group">
<input type="text" class="form-control" />
<span class="input-group-btn input-group-addon btn btn-del input-group-delete"> <i class="fa fa-trash-o"></i>
</span>
</div>
</div>
Okay try this
<div class="timeline-panel">
<div class="timeline-heading">
<div class="form-horizontal col-xs-12">
<div class="form-group input-group col-xs-9">
<input type="text" class="form-control" />
</div>
<button class="btn btn-del input-group-delete col-xs-3" data-tooltip="tooltip" ><i class="fa fa-trash-o"></i></button>
</div>
</div>
</div>
</div>
I am working on a date range control and i want to append icon at the end of the input box but it shows up in new line.
I want all controls like location, start date, end date etc.. in one row for screen larger than 768px and calendar icon appended at the end of start & end input control like it is in the shown on codepen.
Example: http://codepen.io/anon/pen/pggjax
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="form-group">
<div class="col-xs-2">
<label>Location One </label>
<select id="location1">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-xs-2">
<label>Location Two </label>
<select id="location2">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-xs-4 ">
<label>Start </label>
<input type="text " class="input-sm form-control " name="start " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
<div class="col-xs-4 ">
<label>End </label>
<input type="text " class="input-sm form-control " name="start " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
<div class="col-xs-2">
<button name="submit">SUBMIT</button>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="form-group">
<div class=" col-md-2 col-xs-12">
<label>Location One </label>
<select id="location1">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-md-2 col-xs-12">
<label>Location Two </label>
<select id="location2">
<option value="1 ">Value1</option>
</select>
</div>
<div class="col-md-3 col-xs-12 ">
<div class="input-group">
<input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
<span class="input-group-addon glyphicon glyphicon-calendar" id="basic-addon2"></span>
</div>
</div>
<div class=" col-md-3 col-xs-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="end Date" aria-describedby="basic-addon2">
<span class="input-group-addon glyphicon glyphicon-calendar" id="basic-addon2"></span>
</div>
<!-- <label>End </label>
<input type="text " class="input-sm form-control " name="start " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>-->
</div>
<div class="col-md-2 col-xs-12">
<button name="submit">SUBMIT</button>
</div>
</div>
</div>
</div>
<p></p>
<p>
Example
<div class="form-group ">
<label class="col-xs-3 control-label ">Date</label>
<div class="col-xs-5 date ">
<div class="input-group input-append date " id="dateRangePicker ">
<input type="text " class="form-control " name="date " />
<span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
</div>
</div>
</div>
</p>
First i would remove input type class input-sm then instead of span class input-group-addon add-on i would add input-group-btn then for the select values use form-group with class form-control instead
<div class="row">
<div class="input-daterange input-group" id="datepicker">
<div class="form-group">
<div class="col-xs-2">
<div class="form-group">
<label for="location1">Location One</label>
<select class="form-control" id="location1">
<option value="1">Value1</option>
</select>
</div>
</div>
<div class="col-xs-2">
<div class="form-group">
<label for="location2">Location Two</label>
<select class="form-control" id="location2">
<option value="1">Value1</option>
</select>
</div>
</div>
<div class="col-xs-3">
<label>Start </label>
<div class="input-group">
<input type="text" class="form-control" name="start ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-3">
<label>End </label>
<div class="input-group">
<input type="text" class=" form-control" name="start ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-2 btn-group-vertical">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
I want to put the last div (processo div) align with the (tiposessao), but I want it at the next line, and I cant jump to the next line, even putting the row attribute. any solutions
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="form-group">
<div class="col-md-6">
<label for="relator">Conselheiro Relator</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" id="relator" disabled="true" placeholder="Relator">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Tipo de Sessao <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Ordinaria</li>
<li>Especial</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" placeholder="Data da Sessao"/>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="processo" class="label-control"></label>
<input type="text" class="form-control"/>
</div>
</div>
</form>
I think this should be what you are looking for as far as i understood.
https://jsfiddle.net/rnmdt2t8/
<div class="row">
<div class="col-md-4 col-md-offset-5">
<div class="form-group">
<label for="processo" class="label-control"></label>
<input type="text" class="form-control"/>
</div>
</div>
</div>
Full code is on jsfiddle to check.
I am using bootstrap 3 and have this HTML:
<body>
<div class="container body-content">
<div class="row">
<div class="col-lg-6">
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
<button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>
</div>
</div>
</div>
</body>
fiddle
I want the final button to be spaced away vertically from the input-group div and not touching it.
An example I found using a form has the button spaced out: fiddle
and this is how I'd like my button. How can I get that?
Simply wrap each pair of <label> and <div class="input-group"> by a <div> having .form-group class. (Or just wrap the last pair if needed so)
The reason is that twitter bootstrap applies a margin-bottom of 15px to .form-group. You could also do this manually by giving the <button> a top margin or giving the last input a bottom margin.
EXAMPLE HERE
<div class="container body-content">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
</div>
<div class="form-group">
<label class="control-label" for="parameterValue">sdsd</label>
<div class="input-group">
<input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
<span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
</div>
</div>
<button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>
</div>
</div>
</div>