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.
Related
I have a boostrap model , I see a weird line in it when having two divs with col-lg-6. Can you please tell me why and help me to fix it ?
This is the model code
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create</h4>
</div>
<form method="post" id="insert_form">
<div class="modal-body">
<div class="col-lg-6">
<div class="form-group">
<label for="Code">Code</label>
<input type="text" class="form-control" id="Code" name="Code" />
</div>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" id="Name" name="Name" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="CanSale">Sale</label>
<input type="text" class="form-control" id="CanSale" name="CanSale" />
</div>
<div class="form-group">
<label for="Barcode">Barcode</label>
<input type="text" class="form-control" id="Barcode" name="Barcode" />
</div>
<div class="form-group">
<label for="Code">Descriptoin</label>
<input type="text" class="form-control" id="Description" name="Description" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</div>
</form>
</div>
below image red arrows shows the weird line that i am talking about. Please help me fix it.
I forget to place "col" divs inside <div class="row">.
I got it fixed by nesting "col-lg-6" divs inside <div class="row"> </div>
I want to create an inline form using bootstrap with labels above input text fields but the result looks so messed up.
This is what i tried:
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkin">check in</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkout">check out</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
this is what i got:
result
how do i get the submit button to right position and the glyphicons heights the same as the input fields what am i doing wrong?
I made some edits to your html : https://jsfiddle.net/05t4s041/
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="col-md-2">
<label for="checkin">check in</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<label for="checkout">check out</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
you could put divs with bootstrap classes around your label and control like:
<div class="col-md-2">
<div class="row">
<div class="col-md-6">
<label for="from">from:</label>
</div>
<div class ="col-md-6">
<input type="text" class="form-control form-text" />
</div>
</div>
</div>
The row div may be sufficient: it put's elements in a row put I like to put extra bootstrap classes around my controls so I can modify them. For example that the label has a smaller width than the control itself.
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>
I'm attempting to produce this form with Bootstrap 3:
I'm having trouble making First Name and Last Name inline AND making them together take up the same width as the other fields. Currently I have the following
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
which outputs a simple form with no inlining. Any ideas how to adjust this to look like in the picture? Here is a jsfiddle: http://jsfiddle.net/gJdyb/1/
Here's a jsFiddle. Use class row on the form-group you'd like to inline:
Administrator
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
Try this one
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group row">
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="Form-group">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
http://jsfiddle.net/gJdyb/4/
it use the col-xs-6.. it is us
read this for documentation of grid system of bootstrap
http://getbootstrap.com/css/#grid