I need to create from with Bootstrap.
When i use the form inline for create a form, it create a padding-right to label and input and not fill all colmun, but i don't need this padding .
whats the problem ? how can i solve this problem ?
<button type="button"
class="btn btn-primary col-md-2 col-xs-2 col-sm-12 col-lg-2 AddCatBtn">افزودن دسته جدید</button>
<div class="AddCategory col-md-12 col-xs-12 col-sm-12 col-lg-12 border-top border-bottom">
<form>
<div class="form-row text">
<div class="form-inline col-md-6 ">
<div class="col-md-2">
<label for="inputEmail4">نام دسته</label>
</div>
<div class="col-md-10 p-0">
<input type="email" class="form-control" id="inputEmail4">
</div>
</div>
<div class="form-inline col-md-6">
<div class="col-md-3">
<label for="inputState">زیر دسته</label>
</div>
<div class="col-md-9 p-0">
<select id="inputState" class="form-control">
<option>one</option>
<option>tow</option>
</select>
</div>
</div>
</div>
</form>
</div>
Related
I have few search filters on my page and a data card ASP.Net Core application. I am trying to align them on the page so it looks better. Currently it looks like below
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
#Html.DisplayFor(model => model.CustomerData.Location)
<br />#Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-5 col-md-2 col-sm-12 p-0">
<label for="name" class="">Strain Name</label>
<input class="" type="text" name="name" value="#ViewData["name"]" />
</div>
<div class="col-lg-4 col-md-2 col-sm-12 p-0">
<label for="genotype" class="">Genotype</label>
<input class="" type="text" name="genotype" value="#ViewData["genotype"]" />
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="age" class="">Age</label>
<select class="" name="age">
......
</select>
</div>
<div class="col-lg-6 col-md-2 col-sm-12 p-0">
<label for="minAge">Age range between</label>
<select name="minAge">
.......
</select>
and
<select name="maxAge">
........
</select>
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="sex">Sex</label>
<select name="sex">
......
</select>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<div class="form-group form-actions col-md-10 no-color">
<label for="stockNumber">Find by Stock Number</label>
<input type="text" name="stockNumber" value="#ViewData["stockNumber"]" />
</div>
</div>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
I am trying put the data card in the left and align the search filters in the right 2 in a row and show them in 3 rows.
I tried changing the sizes of the col-lg-* in each row on the filters but still cannot align them like what I am trying any help is greatly appreciated
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
#Html.DisplayFor(model => model.CustomerData.Location)
<br />#Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row mb-3">
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="name" class="col-auto">Strain Name</label>
<input class="form-control" type="text" name="name" value="#ViewData["name"]" />
</div>
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="genotype" class="col-auto">Genotype</label>
<input class="form-control" type="text" name="genotype" value="#ViewData["genotype"]" />
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-2 col-sm-12 form-check-inline m-0">
<label for="age" class="col-auto" >Age</label>
<select class="form-control px-1" name="age">
<option>-Any-</option>
</select>
</div>
<div class="col-lg-9 col-md-2 col-sm-12 form-check-inline m-0 justify-content-between">
<label class="col-auto" for="minAge">Age range between</label>
<select class="form-control" name="minAge">
<option>-Start-</option>
</select>
<label class="col-auto" for="minAge">and</label>
<select class="form-control" name="maxAge">
<option>-End-</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="sex">Sex</label>
<select class="form-control px-1" name="sex">
<option>-Either-</option>
</select>
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="stockNumber">Find by Stock Number</label>
<input type="text" class="form-control" name="stockNumber" value="#ViewData["stockNumber"]" />
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
I am trying to style and put multiple search filters on the page in a line so the User Experience is much better but I am kind of stuck with how to style this search component
<section class="search-sec">
<div class="container">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<input class="" type="text" name="name" placeholder="Name" value="#ViewData["name"]" />
</div>
<div class="col-lg-2 col-md-2 col-sm-12 p-0">
<label for="age" class="">Age</label>
<select class="" name="age">
........
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="minAge">Age range between</label>
<select name="minAge">
......
</select>
and
<select name="maxAge">
......
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="sex">Sex</label>
<select name="sex">
.....
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="stockNumber">Find by Stock Number</label>
<input type="text" name="stockNumber" value="#ViewData["stockNumber"]"
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Clear</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
The issue even after changing the sizes and all it looks like below
I tried looking for bootstrapping example and nothing helped. Can anyone please suggest how can I make this search functionality look better. Any help is greatly appreciated
The grid system contains 12 columns. If you want to put them in one line, the * in col-lg-* should sum within 12. Then you also need to adjust the letter to avoid the letter length over the div width.
Here is a whole working demo:
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-12 p-0">
<input class="" type="text" name="name" placeholder="Name" value="#ViewData["name"]" />
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<label for="age" class="">Age</label>
<select class="" name="age">
<option>- Any -</option>
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="minAge">Age range from</label>
<select name="minAge">
<option>- Start -</option>
<option>1</option>
<option>2</option>
</select>
to
<select name="maxAge">
<option>- End -</option>
<option>14</option>
<option>15</option>
</select>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<label for="sex">Sex</label>
<select name="sex">
<option>- Either -</option>
<option>male</option>
<option>female</option>
</select>
</div>
<div class="col-lg-1 col-md-3 col-sm-12 p-0">
<label for="stockNumber">Stock No.</label>
</div>
<div class="col-lg-1 col-md-3 col-sm-12 p-0">
<input type="text" name="stockNumber" value="aaa" />
</div>
<div class="col-lg-2 col-md-3 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Clear</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
#section Scripts
{
<style>
input[type="text"] {
width: 100%; //fit the div width
}
select {
width: 65px;
}
</style>
}
Result:
I am using Bootstrap 5 and can not get the date icon to appear after the date selection input. It is appearing under it.
This is my code:
<form data-toggle="validator" class="container-fluid" role="form" id="gymUpdateForm">
<div class="col-lg-12 col-md-12 col-sm-12 col-12 beta container-fluid">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-7 col-12">
<div class="row">
<label class="control-label control-label-left col-lg-3 col-md-3 col-sm-5 col-12" for="updateDescription">Description:<span class="req"> *</span></label>
<div class="controls col-lg-6 col-md-7 col-sm-7 col-12">
<input type="text" id="updateDescription" name="updateDescription" placeholder="Description">
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-6">
<div class="input-group">
<label class="control-label control-label-left col-lg-2 col-md-2 col-sm-2 col-2" for="updateArchive">Archived:</label>
<div class="date col-lg-5 col-md-7 col-sm-7 col-12" id="datepicker1">
<input type="text" class="form-control fullWidth" id="updateArchive" name="updateArchive" placeholder="DD/MM/YYYY">
<span class="input-group-addon" style="background-color:#ddd;">
<i class="fa fa-calendar" style="padding:5px;"></i>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<button type="submit" id="updateGym" class="btn btn-large btn-warning" >Update</button>
<button type="button" id="cancelGym" class="btn btn-large btn-warning" >Return</button>
</div>
</div>
</form>
The answer is: input-group
<div class="input-group date col-lg-5 col-md-7 col-sm-7 col-12" id="datepicker1">
When I copy this code into my editor the #ddd background shows immediately next to the date input box, not below it. However, the background only is showing, no calendar icon, which is strange. This might be because the Class prefix for it should be FAS rather than FA (FA is an older version of Font Awesome).
I'm using Bootstrap 4 and I can't seem to make the submit button the same size as the input. I tried different combinations but every time the button ends up being wider than the input. I'm thinking that's maybe some Bootstrap default CSS for buttons that I don't know about? Thank you!
This is my code: `
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6 bg-warning p-2 d-flex justify-content-center" >
<form action="" method="POST" class="p-5 m-1 bg-danger col-8">
<div class="form-group row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<label for="InputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" name="userEmail" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else</small>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="userPass" required>
</div>
</div>
<div class="row justify-content-center">
<button type="submit" class="btn btn-success col-sm-12 col-md-10 col-lg-9 col-xl-8" name="submit">Submit</button>
</div>
</form> <!-- end of form -->
</div> <!-- end of column -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</html>
First solution
The reason was your input fields are inside col class and columns class are getting padding-right:15px and padding-left:15px from bootstrap plugin.
You can add class to the column padding_0 something like this
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8 padding_0">
and add style .padding_0{padding-right:0;padding-left:0;}
Second solution
You are adding the col-* to the button.
<div class="row justify-content-center">
<button type="submit" class="btn btn-success col-sm-12 col-md-10 col-lg-9 col-xl-8" name="submit">Submit</button>
</div>
Make a parent div something like below code and add col-* class to that div. Also set width:100% to the button.
<div class="row justify-content-center form-group">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<button type="submit" name="submit" class="btn btn-success" style="width: 100%;">Submit</button>
</div>
</div>
Snippet for second solution
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6 bg-warning p-2 d-flex justify-content-center">
<form action="" method="POST" class="p-5 m-1 bg-danger col-8">
<div class="form-group row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<label for="InputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" name="userEmail" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else</small>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="userPass" required>
</div>
</div>
<div class="row justify-content-center form-group">
<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
<button type="submit" name="submit" class="btn btn-success" style="width: 100%;">Submit</button>
</div>
</div>
</form>
<!-- end of form -->
</div>
<!-- end of column -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</body>
</html>
<h3 class="pulse-green-text"><span class="icon ico_pulse_download"></span>VPN Certificate</h3>
<div class="vpn-cert" ng-controller="vpnController vpnCert">
<form method="post" name="userform" class="form-horizontal" id="user" ng-submit="save(userform)" novalidate>
<div class="container-fluid">
<div class="form-group" ng-disabled="true">
<div class="row">
<label class="col-sm-6 control-label">Download</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pull-left">
<label class="control-label">Click the link to download </label>
certificate
</div>
</div>
<div class="row">
<label class="col-sm-6 control-label">Renew</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pull-left">
<div class="form-group has-feedback">
<label class="col-sm-2 control-label">Renew the certificate</label>
</div>
<button type="button" class="btn btn-primary btn-default btn-xs" ng-click="vpnCert.renew();">
RENEW
</button>
</div>
</div>
</div>
</div>
</form>
</div>
Any idea how to make it work?
ng-disabled will only work on specific elements like button, input, select etc.
You can read more about ng-disabled in the angular docs https://docs.angularjs.org/api/ng/directive/ngDisabled
Please provide more information to your question to get a better answer