I have the code that I have written in below,But I want a add a button with text field without gap of this button and text field. How should I change this code?
<div class="panel panel-default">
<div class="panel-footer">
<form>
<div >
<input id="address" type="email" placeholder="Add your email address" class="form-control" >
<button class="btn btn-default" type="button" id="addressSearch" style="background-color:#8c6666 "><font color="#ffffff" >Subscribe</font></button>
</div>
</form>
</div>
This is what I did:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-footer">
<div class="input-group">
<input id="address" type="email" placeholder="Add your email address" class="form-control" /> <span class="input-group-btn">
<button class="btn btn-warning" type="button" id="addressSearch">Subscribe</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Here is JSfiddle demo
try this
<div class="panel panel-default">
<div class="panel-footer">
<form>
<div class="input-group">
<input id="address" type="email" placeholder="Add your email address" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addressSearch" style="background-color:#8c6666 "><font color="#ffffff" >Subscribe</font></button>
</span>
</div>
</form>
</div>
</div>
You should read docs input-group
Related
I am trying to create a form which should show an alert:
When hitting the button control next to the input control, it should show an alert. The alert appears correctly, however, the input controls following after shuffle to a wrong location:
I would like to see the following happen:
How could I prevent the shuffling of input controls on the left to the right side? Keep in mind that in the solution I would like the order of input controls to be the same when resizing to smaller screen size.
This is what I tried so far in code:
function toggleInfo(ele) {
if (ele.style.display === "none") {
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Three</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Four</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Five</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
I tried wrapping up every two col-md-6 elements in a <div> element to see if these would keep sticking together. This was not the case:
function toggleInfo(ele) {
if (ele.style.display === "none") {
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div><!-- Not working -->
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div><!-- End of change I tried -->
<div class="col-md-6">
<div class="form-group">
<label>Three</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Four</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Five</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
What could I do to fix this problem?
You are missing row class and also you required to update your DOM check snippet.
function toggleInfo(ele) {
if (ele.style.display === "none") {
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row">
<!-- Not working -->
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of change I tried -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Three</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Four</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Five</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div>
u need to wrap 2 col-md-6 divs in a row like this:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
You should place <div class="container-fluid"><div class="row" /></div></div> as parent to your child <div class="col-md-6" />
The important part is <div class="row"> /*child col */</div>
See sample snippets below:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>One</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
-
</button>
</div>
</div>
</div>
<div class="alert alert-info" style="display: none;" id="foo_id">
<strong>Info: </strong> Message.
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Two</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default">
-
</button>
</div>
</div>
</div>
</div>
</div>
Tweak here: https://codepen.io/kenneth-bolico/pen/oNvmdRo
I have this html:
<div id="table_filter" class="dataTables_filter">
<label>
<div id="datatable-search-input-container">
<div class="col-sm-3">
<input type="search" class="datatable-search" placeholder=" Search" aria-controls="table" id="datatable-search-input">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Name">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search UserName">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Email">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Phone Number">
</div>
</div>
<div class="col-sm-12 clearfix" id="datatable-controls">
<div class="pull-right">
<span class="datatable-control-item">
<button type="button" class="btn btn-primary" id="searchButton">Search</button>
</span>
<span class="datatable-control-item">
<button type="button" class="btn btn-outline-secondary" id="resetButton">Reset</button>
</span>
</div>
</div>
</label>
</div>
It generates an a search function like this:
If you take a look at the image, for some reason, my col-sm-3 columns take up an entire row instead of going inline. I have checked the css and nothing is overwriting the widths.
You would need to wrap your col-sm classes in a row one.
Like this
<div id="table_filter" class="dataTables_filter">
<label>
<div id="datatable-search-input-container" class="row">
<div class="col-sm-3">
<input type="search" class="datatable-search" placeholder=" Search" aria-controls="table" id="datatable-search-input">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Name">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search UserName">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Email">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Phone Number">
</div>
</div>
<div class="row">
<div class="col-sm-12 clearfix" id="datatable-controls">
<div class="pull-right">
<span class="datatable-control-item">
<button type="button" class="btn btn-primary" id="searchButton">Search</button>
</span>
<span class="datatable-control-item">
<button type="button" class="btn btn-outline-secondary" id="resetButton">Reset</button>
</span>
</div>
</div>
</div>
</label>
</div>
If you use Bootstrap 4 (as it seems you are) and you want all the columns to have the same size you also don't need to specify the number, so you could just use col-sm.
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 try to make a full width search box. its working in tab and mobile but not working in desktop or laptop
Here is my code
<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-md-8 col-sm-8 col-xs-10">
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
when I see the responsive view its working on mobile and tab view
But its not working in desktop view
Remove you nav-bar class and add form-horizontal
<form action="" autocomplete="off" class="form-horizontal" method="post" accept-charset="utf-8">
<div class="input-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</form>
Give col-lg-12 class to the div
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group col-lg-12">
<input name="searchtext" style="width:100%" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-xs-10 col-sm-8 col-md-8 col-lg-6">
<div class="form-group">
<input name="searchtext" value="" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="addressSearch">
<span class="icon-search"></span>
</button>
</span>
</div>
</div>
</div>
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>