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.
Related
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've been trying to create a bootstrap form with multiple horizontal and vertical elements but couldn't get what I wanted
Requirement
Main <form> contains vertical <formfield> elements
<formfield> element contain all elements horizontally
<formfield> element has one <div> element that contain some vertical elements inside it
I have accomplished first two requirements without any issue but I'm clueless when it comes to last requirement.I've tried searching on google and stakoverflow but no luck yet.
Needed form
Form I'm getting right now
My Code
<form id="grn_items_form">
<div class="form-inline">
<fieldset id="1" class="grn_item_fieldset ">
<div class="form-group">
<button class="form-control" id="1" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="form-group">
<input class="form-control" id="1" type="text" placeholder="Variation">
</div>
<div class="form-group">
<input class="form-control" id="1" type="text" placeholder="Unit Price">
</div>
<div class="form-group">
<input class="form-control" id="1" class="quantity" type="text" disabled="">
</div>
<div class="form-group">
<button class="form-control" id="1" class="add_serial" type="button">Add Serials</button>
</div>
<div class="row ">
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
<div class="form-group">
<input class="form-control" type="text" name="mytext[]" placeholder="Serial Here">
<a class="form-control remove_field" href="#">
<i class="fa fa-close"></i>
</a>
</div>
</div>
</fieldset>
</div>
<div class="form-inline">
<fieldset id="2" class="grn_item_fieldset">
<div class="form-group">
<button class="form-control" id="2" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="form-group">
<input class="form-control" id="2" type="text" placeholder="Variation">
</div>
<div class="form-group">
<input class="form-control" id="2" type="text" placeholder="Unit Price">
</div>
<div class="form-group">
<input class="form-control quantity" id="2" type="text" placeholder="Quantity">
</div>
</fieldset>
</div>
</form>
Any suggestion on right direction is highly appreciated.
This should help. It's not actually showing right on jsfiddle but try to copy the HTML and run local.
<!-- 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>
<div class="container">
<form>
<div class="row" id="row1">
<fieldset>
<div class="row" id="main">
<div class="col-md-1">
<button class="form-control" id="1" class="remove_product" type="button">
<i class="fa fa-trash"></i>
</button>
</div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Variation">
</div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Unit Price">
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<button class="form-control" id="1" class="add_serial" type="button">
Add Serials
</button>
</div>
<div class="col-md-3">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
<div class="row" id="sub1">
<div class="col-md-3 pull-right">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
<div class="row" id="sub1">
<div class="col-md-3 pull-right">
<div class="col-md-10">
<input class="form-control " type="text" name="mytext[]" placeholder="Serial Here">
</div>
<div class="col-md-1">
<a class="form-control remove_field" href="#"> D </a>
</div>
</div>
</div>
</fieldset>
</div>
</form>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div class="center-block text-center">
<form asp-controller="Account" asp-action="Login" asp-route-returnurl="#ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form">
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
<div class="form-group">
<div class="col-md-10">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
</form>
<p>
<a asp-controller="Home" asp-action="Register">Sign up</a>
</p>
<p>
<a asp-action="ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-controller="Home" asp-action="Index">Return</a>
</p>
</div>
</div>
<div class="col-md-4">
</div>
</div>
The text is centered, but the form has a width 10/12(83%). You should change the col-md-10 to col-md-12.
<div class="form-group">
<div class="col-md-12">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
I think that it will be the best to remove the col-md-10 class:
<div class="form-group">
<div class="">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
How can I get these two divs to align in a row horizontally and keep the form-group intact?
No matter what kind of col-ms-sizing I do the two input groups will not align on the same line and I believe this is only happening because of the form-group class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-sm-5 input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-sm-5 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure you wrap your inputs with a <div class="row"> and then make separate divs for the col-sm-* classes. I replaced col-sm-* with col-xs-* to ensure the snippet would not wrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<div class="row">
<div class="col-xs-1">
<label for="inputPrice" class="control-label">Price</label>
</div>
<div class="col-xs-5">
<div class="input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-xs-1">
<label for="inputDate" class="control-label">Date</label>
</div>
<div class="col-xs-5">
<div class="input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
You just have to wrap your inputs inside of col elements basically just nested columns. Make sure you are also using the correct sized columns for the correct screen sizes.
http://jsfiddle.net/kwd9cqn9/1/
<div class="container">
<div class="container-fluid">
<form class="form-horizontal">
<div class="form-group">
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-lg-12 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice" />
<span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date" />
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today</li>
<li>Tomorrow</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
I want to use bootstrap panel to create advance search design.
Like in this image:
My HTML is this:
<div class="panel panel-primary aplxpert-distanta-sus" id="Antet">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left aplxpert-distanta-sus">Test List</h3>
<div class="btn-group pull-right">
<div class="row form-inline">
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label aplxpert-distanta-sus" for="Nume">Search:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="name......" id="cauta">
<span class="input-group-btn">
<button title="Click for search" type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-1">
<a title="Advance Search" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="panel-body panel-collapse collapse">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume aa:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume aa:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume bb:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume bb:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume cc:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume cc:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
</div>
</div>
<div class="panel-footer">
<strong>Result return for this criterias:</strong> nume: Popescu Ion, data: 04.05.2014, CNP: 1361813282206
</div>
</div>
Something like this: http://jsfiddle.net/nkS2e/4/
How i can do this more better because on resize not work good and in not the best way.