I want to add a container in to my form. The container height is about 4 bootstrap rows. Once I put the container into the second column of the first row, there is a white space that appears under the first column of the first row. Is it possible to remove that white space?
This is how I have implemented my form. (divide into two col-6 columns is not a solution, it won't work when it comes to the mobile view). jsfiddle exmple
<head>
<!-- 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">
</head>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name<i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input class="form-control" placeholder="Name" name="Name" required>
</div>
<div class="col-md-2"></div>
<div class="col-sm-4">
<div style="width: 100% ; height: 250px; background-color: black;">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
</div>
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
I want to remove the marked spaces, like the below image:
Add the following style block for sizes md and above...
#media screen and (min-width:768px){
.toggleDiv{ position:absolute; right:0; }
}
working snippet below:
#media screen and (min-width:768px) {
.toggleDiv {
position: absolute;
right: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name<i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input class="form-control" placeholder="Name" name="Name" required>
</div>
<div class="col-md-2"></div>
<div class="col-sm-4 toggleDiv">
<div style="width: 100% ; height: 250px; background-color: black;">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
</div>
<label class="col-sm-2 col-form-label">Name <i class="fa fa-asterisk required-span" aria-hidden="true"></i></label>
<div class="col-sm-4">
<input type="Name" #Name class="form-control" placeholder="Name" name="Name" required>
</div>
</div>
Related
Hi i would like some help on how to space my name, email, contact, address input box to match the spacing for description as below in my picture. Please ignore my same class id i use below for my code as i am testing
here is the code for my form
<form>
<div class="form-group row">
<label for="inputName" class="col-form-label" style="padding-left: 20px; ">Name: </label>
<div class="col-sm-5">
<input type="Name" class="form-control" id="inputEmail3" placeholder="Name" >
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Email: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Contact: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Contact">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Address: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Description: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Description...">
</div>
</div>
</form>
Perhaps it would help you if you use Bootstrap form builder to achieve this.
Here is a my code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form>
<div class="form-group row">
<label for="name" class="col-2 col-form-label">Name:</label>
<div class="col-10">
<input id="name" name="name" placeholder="Name" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-2 col-form-label">Email:</label>
<div class="col-10">
<input id="email" name="email" placeholder="Email" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="contact" class="col-2 col-form-label">Contact:</label>
<div class="col-10">
<input id="contact" name="contact" placeholder="Contact" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="address" class="col-2 col-form-label">Address:</label>
<div class="col-10">
<input id="address" name="address" placeholder="Address" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-2 col-form-label">Description:</label>
<div class="col-10">
<input id="description" name="description" placeholder="Description" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="offset-2 col-10">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Or code pen
A possible solution in which you can achieve a uniformity (with align), is by adding a class to the labels that define a min-width that is equal to the width of the Description label.
This will force the shorter labels to have the same width at a minimum as the long label, and aligning them to the right will center them against the input elements.
For example:
.my-form-label {
min-width: 7rem;
text-align:right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class='container'>
<form>
<div class="form-group row">
<label for="inputName" class="col-form-label my-form-label" style="padding-left: 20px; ">Name: </label>
<div class="col-sm-5">
<input type="Name" class="form-control" id="inputEmail3" placeholder="Name" >
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Email: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Contact: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Contact">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Address: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Description: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Description...">
</div>
</div>
</form>
</div>
You should add a col value to your label. Here, I use col-2 so the input can be included in the rest of the row.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<form>
<div class="form-group row my-3">
<label for="inputName" class="col-2 col-form-label"> Name:</label>
<input class="col-sm-5" type="Name" class="form-control" id="inputEmail3"
placeholder="Name">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Email:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Email">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Contact:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Contact">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Address:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Address">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Description:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Description...">
</div>
</form>
I am trying to make horizontal form with three field but I am facing space issue between label and input type.
I want to reduce space between label and input.
HTML code:
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">Last Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-2 control-label">First Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<label for="inputValue" class="col-md-2 control-label">First Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">State</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>
</div>
You just need to remove the col-sm-2 in your label. You can also check the my code below, it could save more space.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-4">
<label for="inputKey" class=" control-label">Last Name</label>
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<div class="col-md-4">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<div class="col-md-4">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
<label for="inputKey" class=" control-label">State</label>
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<label for="inputKey" class="control-label">zip</label>
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<div class="col-md-4">
<label for="inputValue" class=" control-label">Other</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>
</div>
<hr>
<h3>Or remove the col-sm for labels.</h3>
<div class="container-fluid">
<form >
<div class="col-md-12">
<div class="form-group row">
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
</div>
Open the snippet in full page.
Just put label and input in same column that is in my case col-md-4 and give it a class like columns. and
.columns {
display: flex;
flex-direction: row;
}
label {
width: 6rem;
margin-right: 2rem;
}
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-4 columns">
<label for="inputKey" class="control-label">Last Name</label>
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<div class="col-md-4 columns">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<div class="col-md-4 columns">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>
I have two datepickers with different Id's and only one is working with
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="start_datepicker" required>
</div>
</div>
Not working
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="peak_start_date_from" required>
</div>
</div>
$(document).ready(function() {
$('#peak_start_date_from').datepicker();
});
I am creating a form and when I am adding a select box the layout is not working as expected. The select box item is getting issues. I have created JSFiddle here
I am placing my elements in form-group with each having 50% of width.
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="tipoDeuda">Tipo de Deuda</label>
<div class="col-sm-8">
<select class="form-control" id="tipoDeuda">
</select>
</div>
</div>
It seems to work fine when I added select.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<form class="form-horizontal" id="consultaCarteraForm">
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="empleador">Empleador</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" id="empleador" placeholder="">
<i id="searchEmpleador" class="fa fa-search search-form-cartera-icon" aria-hidden="true"></i>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="estudioAbogados">Estudio o Tercero</label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" id="estudioAbogados" placeholder="">
<i id="searchEstudioAbogados" class="fa fa-search search-form-cartera-icon" aria-hidden="true"></i>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="tipoDeuda">Tipo de Deuda</label>
<div class="col-sm-8">
<select class="form-control" id="tipoDeuda">
<option>select</option>
<option>select1</option>
<option>select2</option>
</select>
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label
input-sm col-sm-4" for="devenguePorCobrar">Rango Devengue Por Cobrar</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="devenguePorCobrar">
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="devenguePorCobrar1">
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="devenguePorCobrar">Rango Monto Deuda Real</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoRealMin">
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoRealMax">
</div>
</div>
<div class="form-group col-sm-6">
<label class="control-label input-sm col-sm-4" for="devenguePorCobrar">Rango Monto Deuda Presunta</label>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoPresMin">
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" id="rangoMontoPresMax">
</div>
</div>
<!-- Button -->
<div class="col-sm-12 controls">
<button id="btnBuscar" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-search"></span> BUSCAR </button>
<button id="btnLimpiar" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-search"></span> LIMPIAR </button>
</div>
<div class="col-sm-4">
</div>
</form>
</body>
</html>
I'd like to achieve a grid like down below. There's a problem because I've got form-group as well. And the problem is, col-md-6 before last and the last one doesn't align correctly.
<form action="">
<div class="col-md-1 pull-right text-right padding-right-0">
<div class="action-buttons">
<a href="#" class="pull-right button-edit-content" data-target="#s3">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="form-group col-md-6">
<label for="">label_1</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_2</label>
<input type="text">
</div>
<div class="form-group col-md-6">
<label for="">label_3</label>
<input type="text">
</div>
<div class="form-group col-md-5">
</div>
<div class="form-group col-md-6">
<label for="">label_5</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_6</label>
<input type="text">
</div>
</form>
Try wrapping them in row, like
<div class="row">
<div class="form-group col-md-6">
<label for="">label_1</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_2</label>
<input type="text">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="">label_3</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<div> </div>
</div>
</div>
I think I see what you're trying to do. I think the problem is the empty column which doesn't have a comparable height to the others.
I'd suggest removing that empty column and clearing the left of the following one by adding a class to it as in this fiddle: https://jsfiddle.net/vv807bax/
CSS:
.clearleft {
clear: left;
}
HTML:
<div class="container">
<div class="row">
<form action="">
<div class="col-md-1 pull-right text-right padding-right-0">
<div class="action-buttons">
<a href="#" class="pull-right button-edit-content" data-target="#s3">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="form-group col-md-6">
<label for="">label_1</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_2</label>
<input type="text">
</div>
<div class="form-group col-md-6">
<label for="">label_3</label>
<input type="text">
</div>
<div class="form-group col-md-6 clearleft">
<label for="">label_5</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_6</label>
<input type="text">
</div>
</form>
</div>
</div>