Now I'm working with bootstrap 3 input group, but the result is not like expectation.
i want make select [input]-[input text]-[button] in one line.
but in my case button have white space inside like this
Input Group SS.
this is my code:
<div class="card-block bg-white">
<div class="row">
<form action="<?php echo base_url(); ?>performance" method="post">
<div class="form-group">
<div class="input-group col-md-6 col-md-offset-4 col-sm-12 col-xs-12">
<span class="input-group-btn">
<select class="form-control input-sm" name="id_cabang" id="id_cabang">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</span>
<span class="input-group-btn">
<input id="bulan_kinerja" name="bulan_kinerja" type="text" class="form-control input-sm bln_picker" data-provide="datepicker" placeholder="Datepicker" value="<?php echo $bulan_kinerja; ?>"/>
</span>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-sm" id="kinerja_btn">Submit</button>
</span>
</div>
</div>
</form>
</div>
</div>
I had tried some example in google but some case, if the screen width changes smaller, it turns to new line.
I want the result is full of responsive width and pure using bootstrap 3 class. please help. thanks so much.
You must include the BootStrap CSS Style sheet using
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="card-block bg-white">
<div class="row">
<form action="<?php echo base_url(); ?>performance" method="post">
<div class="form-group">
<div class="input-group col-md-6 col-md-offset-4 col-sm-12 col-xs-12">
<span class="input-group-btn">
<select class="form-control input-sm" name="id_cabang" id="id_cabang">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</span>
<span class="input-group-btn">
<input id="bulan_kinerja" name="bulan_kinerja" type="text" class="form-control input-sm bln_picker" data-provide="datepicker" placeholder="Datepicker" value="<?php echo $bulan_kinerja; ?>"/>
</span>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-sm" id="kinerja_btn">Submit</button>
</span>
</div>
</div>
</form>
</div>
</div>
You should always use the latest version. Learn how to migrate to v4 here.
Related
I need to put the Search Button next to the Search Input, that is a list of options.
I've search and most of the answers say I need to use pull-left and pull-right classes but it is nor working in my case.
Here is the Codepen:
https://codepen.io/ogonzales/pen/rNNVOBr
Complete PageCode:
https://codepen.io/ogonzales/pen/rNNVOBr
CodePen using diplay:flex:
https://codepen.io/ogonzales/pen/ExxjVqa
Original HTML:
<div class="row margin-top3 margin-bottom5 ">
<form method="get" action="{% url 'shop:catalogo' %}">
<div style="display: inline;">
<div class="input-group pull-left">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Categorías</label>
<select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
<option value="todas" disabled selected>Seleccionar categoría</option>
<option value="todas">Todas</option>
<option value="celulares">Celulares</option>
<option value="programacion">Programación</option>
</select>
</div>
</div>
<div class="input-group-append pull-right">
<p><input class="btn btn-outline-secondary" type="submit" name="buscar" value="Buscar" /></p>
</div>
</div>
<!-- <p class="margin-top5">Ordenado por: <input class="disabled" type="text" value={{orderby}} name="orderby" /></p> -->
</form>
</div>
UPDATE:
Heigh is increased:
You don't need to use pull-left or pull-right. You have to simply put <div class="input-group-append"> inside <div class="input-group"> as it says in the official documentation.
<div class="row margin-top5 margin-bottom5 ">
<form method="get" action="{% url 'shop:catalogo' %}">
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Categorías</label>
</div>
<select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
<option value="todas" disabled selected>Seleccionar categoría</option>
<option value="todas">Todas</option>
<option value="celulares">Celulares</option>
<option value="programacion">Programación</option>
</select>
<div class="input-group-append">
<input class="btn btn-outline-secondary mb-0" type="submit" name="buscar" value="Buscar" />
</div>
</div>
</form>
</div>
It is better to use display:flex instead of float's because they are more predictable. In your case it will be something like this CodePen. I assumed that you are using Bootstrap 4.
On the other hand, you shouldn't put display:inline to wrap other elements because they are not meant to be a wrappers. You can find more here.
Consider using CSS grid, you're kind of reinventing the wheel here.
CSS
.container{
width: 200px;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
}
HTML
<div class="container">
<div class='label'>Select</div>
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<button>Search</button>
</div>
I am using bootstrap3 and trying to create a horizontal form in which one of the rows should show the controls inline.
In the code below I would like the three selects to be on the same line as the input-group.
I have tried the approaches here: Form inline inside a form horizontal in twitter bootstrap? but I cannot get it to work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="input-group col-xs-4">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
</body>
</html>
Have you tried using a table?
<table>
<tbody>
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</td>
<td>
<select>
<option>Select1</option>
</select>
</td>
<td>
<select>
<option>Select2</option>
</select>
</td>
<td>
<select>
<option>Select3</option>
</select>
</td>
</tr>
</tbody>
</table>
You can try using the row class and not the form group class, tried it with Boostrap 3.
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
https://jsfiddle.net/FJB_ZA/Lmzubdw3/
You need to make changes in your structure to make it fit in one line.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="col-xs-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select1</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
I have a filter form at the top which looks like this
and like this in the Mobile Layout
This is my code
<form class="navbar-form " role="search" id="searchform" method="get" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="form-group ">
Results per page:
<select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()">
<option value="5" selected="">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="form-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</div>
</div>
</div>
</form>
What can I do with this? I would like it if the search box and the 2 buttons come beside it on the same line without being floated to right but the mobile layout is all messed up. Any suggestions are welcome. Thanks!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form class="navbar-form " role="search" id="searchform" method="get" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group ">
Results per page:
<select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()">
<option value="5" selected="">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</div>
</div>
</div>
</form>
UPDATE
Thank you all for your answers. I have upvoted the answers that helped me get what I wanted. However, I ended up doing something of my own.
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="input-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="<?php echo ($this->input->get('search',true)); ?>">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</span>
</div>
</div>
set width:auto;display: inline-block; to input text field
check this fiddle:
https://jsfiddle.net/DTcHh/30416/
Try change to only "col-sm-6" and the class named "pull-right" and add "float-right".
Look at this: https://jsfiddle.net/ceqvpu01/1/
input[type="text"] {
display: inline-block;
width: 100%;
}
#media (min-width: 768px) {
.float-right{
float: right;
}
}
thats because you put the 'col-xs-12' on both form. so each form will takes all of the grid system (12) and the second form will be put below the first because there is no more grid for it. try changing your col-xs-12 to col-xs-6 for both form
Like this? I added col-sm-6 to both, and changed col-xs-12 to col-xs-6
<form class="navbar-form " role="search" id="searchform" method="get" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group ">
Results per page:
<select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()">
<option value="5" selected="">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</div>
</div>
</div>
</form>
I try to add a checkbox after all my <select> dropdowns but in the same row / line. I have a really hard time doing so, I tried quite some time now and I can't get it to work on my own. The CSS comes from Bootstrap 3.
Here is how my Code and Form looks like:
<form role="form" id="newchar" name="newchar" method="POST" action="inc/insertchar.php">
<div class="row">
<div class="form-group col-sm-3">
<label for="charname">Charactername</label>
<a href="#" data-toggle="tooltip" data-placement="right" title="maximal 16 Zeichen - bestehend aus Zahlen und Buchstaben">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</a>
<input type="text" class="form-control" name="charname" id="charname" placeholder="Charactername" required="required" />
</div>
</div>
<div class="row">
<div class="form-group col-sm-3">
<label for="c1">Circles:</label>
<div class="form-group">
<select name="circle_1" id="c1" class="form-control circle-select">
<option value="">Circle 1</option>
<option value="class_1">Archer</option>
<option value="class_2">Cleric</option>
<option value="class_3">Swordsman</option>
<option value="class_4">Wizard</option>
</select>
</div>
<div class="form-group">
<select name="circle_2" id="c2" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 1 first</option>
</select>
</div>
<div class="form-group">
<select name="circle_3" id="c3" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 2 first</option>
</select>
</div>
<!-- and more ... -->
Full Code and Preview: https://jsfiddle.net/hd7fzp95/
You need to use form-inline class on your form.
http://www.bootply.com/WpiddtxsOh
I want to make below search box with select box in center of the page and all the field are stick to each other. I tried using margin-left. But i think this is not proper way to do this. please help me to do this to get all are in center with responsive.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12">
<form action="#" method="get" id="search_mini_form">
<div class="col-md-1 catnames">
<select name="cat" class=" search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-1 catnames catnames-arrow ">
<select name="cat" class="search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-4 catquery">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off">
</div>
<div class="col-md-1 catsubmit">
<div class="row">
<i class="fa fa-search"></i>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
<div>
</div>
</div>
You can do by applying some Bootstrap classes
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12">
<form action="#" method="get" id="search_mini_form">
<div class="col-md-1 col-sm-2 form-group col-sm-offset-2 col-md-offset-3 col-xs-12 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-1 col-sm-2 form-group catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-4 col-sm-4 form-group col-xs-12 catquery">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" class="form-control" >
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
<div>
</div>
</div>
try to change classes of whole container:
<div class="col-md-12 ">
to:
<div class="col-md-4 col-md-offset-4">
You can also add styles for every element inside, like this:
text-align: center;
margin: 0 auto;
I made a little fiddle to demonstrate how to do this: https://jsfiddle.net/2nhzytu5/
To make the fields float in the center regardless desktop or mobile version, you can use col-offset-xx (Learn more here)
Then, to make them stick together, you should use bootstrap's input-group class. (More info here )
So this would be your base:
<form class="form-horizontal">
<div class="col-lg-offset-3 col-lg-6">
<div class="input-group">
<!-- Your fields here -->
</div>
</div>
</form>
Now simply add your fields:
<form class="form-horizontal">
<div class="col-lg-offset-3 col-lg-6">
<div class="input-group">
<select id="yourId" class="selectpicker form-control" title="Please select">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select id="yourId2" class="selectpicker form-control" title="Please select">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text" class="form-control" name="snpid" placeholder="Test">
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
</div>
</form>
Avoid using elements here as they cannot be fully styled in WebKit browsers.
Is this what you want ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12 ">
<div class="row">
<form action="#" method="get" id="search_mini_form">
<div class="col-sm-offset-2 col-sm-2 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-2 catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-4 catquery ">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
<div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
</div>
</div>
here is jsbin