I am not frontend developer. I am using bootstrap my current code like below image:
<div class="panel-body">
<form action="">
<div class="form-group">
<div class=" row">
<label class="col-md-2 control-label" for="inputDefault">Full Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputDefault" ng-model='Profile.full_name ' name='full_name' readonly>
</div>
</div>
</div>
<div class="form-group">
<div class=" row">
<label class="col-md-2 control-label" for="inputDefault">Company Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputDefault" readonly ng-model='Profile.company_name ' name='company_name'>
</div>
</div>
</div>
<div class="form-group">
<div class=" row">
<label class="col-md-2 control-label" for="inputDefault">Mobile Number</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputDefault" readonly ng-model='Profile.mobile_number ' name='mobile_number'>
</div>
</div>
</div>
<div class=" col-xs">
<img src="\images\blank.jpg" alt="\images\blank.jpg" >
</div>
</form>
</div>
I want my image looks like this :
<div class="panel-body">
<div class="col-md-8">
<form action="">
<div class="form-group">
<div class=" row">
<label class="col-md-2 control-label" for="inputDefault">Full Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="inputDefault" ng-model='Profile.full_name ' name='full_name' readonly>
</div>
</div>
</div>
<div class="form-group ">
<div class="row">
<label class="col-md-2 control-label">Email</label>
<div class="col-md-10">
<input type="text" ng-model='Profile.email' id="email" name='email' readonly class="form-control ng-pristine ng-untouched ng-valid ng-empty" aria-invalid="false">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<img src="\images\blank.jpg" alt="\images\blank.jpg" >
</div>
Related
I'm using Bootstrap 4.
I would like set "label 3" with the same width that "label 1". The input width, the rest of the page (see code)
It's possible?
Thanks.
<div class="form-row">
<div class="col-6">
<div class="form-group row">
<label for="name" class="col-6">LABEL 1:</label>
<div class="input-group col-6">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row">
<label for="name" class="col-6">LABEL 2:</label>
<div class="col-6">
<input class="form-control" placeholder="Enter text" type="text">
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-12">
<div class="form-group row">
<label for="name" class="col-3">LABEL 3:</label>
<div class="input-group col-9">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>
Instead of putting a row beside form-group, add another div that have a form-row, something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-row">
<div class="col-6">
<div class="form-group">
<div class="form-row">
<label for="name" class="col-6">LABEL 1:</label>
<div class="input-group col-6">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="form-row">
<label for="name" class="col-6">LABEL 2:</label>
<div class="col-6">
<input class="form-control" placeholder="Enter text" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-12">
<div class="form-group">
<div class="form-row">
<label for="name" class="col-3">LABEL 3:</label>
<div class="input-group col-9">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>
</div>
</div>
I think the issue is mostly the padding of row, but not sure. I just rearranged it properly, by separating row/form-row
I'm having some trouble with a form the last element doesn't fit properly, this is my code:
<div class="tab-pane" id="2a">
<div *ngFor="let perso of person">
<div class="form-group">
<label class="col-sm-4 control-label">Fecha de Ingreso:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.fecha_ini}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Fecha de Salida:</label>
<div class="col-sm-6">
<input type="text" name="condo" id="condo" value="{{perso.fecha_fin}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Foto:</label>
<div class="col-sm-6">
<!-- <input type="text" name="condo" value="{{perso.ruta_foto}}" class="form-control"> -->
<img src="http://52.14.193.170/imagenes/pers/2.jpg" alt="Odlir" width="130" height="130">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Penales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_penal}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Policiales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_policial}}" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Antecedentes Policiales:</label>
<div class="col-sm-6">
<input type="text" name="condo" value="{{perso.ruta_policial}}" class="form-control">
</div>
</div>
</div>
</div>
i don't know what i'm doing wrong, any ideas why this is happening? any help would be appreciated, im using bootstrap 3.3.7
It's still okay with
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va +PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
https://i.stack.imgur.com/zVa4B.png
I am building a simple form using Bootstrap in which I am facing some layout issues related to spacing. This is how the form looks like
There is lots of space between the label and fields. For instance, in the above image empty space between label and name field is highlighted. I would like to increase the width of input field so that the space reduces.
I would like to get rid of the vertical space between 2 fields. For instance, there is a space between author and IP fields. I would like them to be closed together. Again, not able to make out the reason.
This is the fiddle I have created to reproduce the problem.
.border {
border: 1px solid;
}
.input-field {
height: 20px
}
.custom-label {
line-height: 3.3em !important;
}
.label-size {
font-size: 10px;
line-height: 2.1em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<form class="form-horizontal">
<div class="col-md-8">
<div class="form-group">
<label for="name" class="col-md-4 label-size">Name</label>
<div class="col-md-8">
<input type="text" id="name" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="gender" class="col-md-4 label-size">Gender</label>
<div class="col-md-8">
<select id="gender" class="form-control input-sm input-field label-size">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="col-md-4 label-size custom-label">Functions</label>
<div class="checkbox col-md-8 label-size checkbox-primary" >
<label class="col-md-3">
<input type="checkbox" id="Func1"> Func1</label>
<label class="col-md-3">
<input type="checkbox" id="Func2">Func2</label>
<label class="col-md-3">
<input type="checkbox" id="Func2">Func3</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="country" class="col-md-4 label-size">country</label>
<div class="col-md-8">
<select id="country" class="form-control input-sm input-field label-size">
<option>Select</option>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<div class="col-md-3">
<label class="label-size">Options</label>
</div>
<div class="col-md-9">
<div class="checkbox checkbox-primary label-size col-md-3">
<!-- there is a for loop here-->
<!-- For every run of loop, one div [with col-xs-4] below will be created. Since loop is not there, I am creating multiple divs manually -->
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
<div class="checkbox checkbox-primary label-size col-md-3">
<input id="check1" type="checkbox"> check1
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="addr" class="col-md-4 label-size">ADDR</label>
<div class="col-md-8">
<input type="text" id="addr" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="authro" class="col-md-4 label-size">authro</label>
<div class="col-md-8">
<input type="text" id="authro" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="range" class="col-md-4 label-size">Range</label>
<div class="col-md-3">
<input type="text" id="range" class="form-control input-sm input-field">
</div>
<div class="col-md-2">
to
</div>
<div class="col-md-3">
<input type="text" id="range2" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="ip" class="col-md-4 label-size">IP</label>
<div class="col-md-8">
<input type="text" id="ip" class="form-control input-sm input-field">
</div>
</div>
</div>
<div class="col-xs-10 ">
<div class="form-group ">
<div class="col-xs-4">
<button class="btn btn-xs" type="button">Start</button>
</div>
<label class="col-xs-2 label-size">Order</label>
<div class="radio" class="col-xs-4 label-size">
<label>
<input type="radio" name="order3">order3</label>
<label>
<input type="radio" name="order4">order4</label>
</div>
</div>
</div>
</form>
</div>
Any help is much appreciated.
I made some format changes to your code see if this fix your need.
http://jsfiddle.net/ayang10/sbcobqz9/66/
.form-horizontal .control-label {
text-align: right;
margin-bottom: 0;
padding-top: 7px;
}
should fix your format/alignments
I have a form with 3 fields, two of them are for entering dates. I was requested to add an icon to the very end of the field.
This is the result:
If you see the field that has the icon expands beyonds the other fields to the left and right so it looks pretty ugly.
This is the code:
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Any clue on how to do it right?
Here is your fixed code please copy it and paste it
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group ">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div></div>
</div><div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>
I have tested it works fine. Cheers!
Some CSS is messing with you.
Your line with input-group col-md-8 is apparently malfunctioning.
I made an example:
https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR
Check if you have some custom CSS that is overriding bootstraps'.
Use my code this is working fine.
<!-- 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">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
I have the following code:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input type="checkbox" id="input1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input type="checkbox" id="input2">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input type="checkbox" id="input3">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input type="checkbox" id="input4">
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input type="checkbox" id="input5">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input type="checkbox" id="input6">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input type="checkbox" id="input7">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input type="checkbox" id="input9">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
( I am sorry for the poor identation, but i posted a link to bootply also). I want the inputs of the first form to appear two at each row, so it must look like this for form 1
Input1 input2
input3 input4
and
Input5 Input6
Input7 Input8
for form 2 in the second collumn. I set up two collumns both of them using col-md-6 class and in each collumn i am placing the fields. But even with setting two sub collumns of 3 I can't get the result I want. What am i doing wrong? I am using bootstrap 3
I think you want something like this
I changed col-md-3 to col-md-6.
If I didn't understand correctly, just tell me.
One solution is to clear the float at each point where you want to begin a new block. For example, like this:
<div style="clear:both;"><div></div></div>
Here is the modified code:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input id="input1" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input id="input2" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input id="input3" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input id="input4" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input id="input5" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input id="input6" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input id="input7" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input id="input9" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>