I am using two rows. In each row there are two columns of complete size col-md-12.in 1st column having 2 fields and the other column has 1 field. Now i put these same 2 in other row. All columns are not aligned:
here is the snippet:
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="description">Description</label>
<select class="selectpicker" data-live-search="true">
<option>Android</option>
<option>iOS</option>
<option>Windows</option>
<option>Symbian</option>
<option>Atari TOS</option>
<option>Amiga OS</option>
<option>Unix</option>
<option>Linux</option>
<option>OSX</option>
</select>
<div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Issue Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Expiry Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
so my question is why bootstrap does not aligned specified rows of columns in my given snippet of code?
Are you trying to do something like this? I can't recall if bootstrap does this for you. I am sorry if I misinterpreted the question.
label {
display:table;
width:90px;
float:left;
text-align:center;
}
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="description">Description</label>
<select class="selectpicker" data-live-search="true">
<option>Android</option>
<option>iOS</option>
<option>Windows</option>
<option>Symbian</option>
<option>Atari TOS</option>
<option>Amiga OS</option>
<option>Unix</option>
<option>Linux</option>
<option>OSX</option>
</select>
<div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Issue Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Expiry Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="description">Description</label>
<select class="selectpicker" data-live-search="true">
<option>Android</option>
<option>iOS</option>
<option>Windows</option>
<option>Symbian</option>
<option>Atari TOS</option>
<option>Amiga OS</option>
<option>Unix</option>
<option>Linux</option>
<option>OSX</option>
</select>
<div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Issue Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Expiry Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
</div>
</body>
This code is just a copy of your code snippet, i just placed a CDN Link to bootstrap CSS which aligned everthing for me
I hope this could help.
N.B. I think you have got two </div> tag that should not be there (Please check comments in my example) also keep in mind that you should have unique id (not relevant according with your question but it might be helpful, I hope)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="description">Description</label>
<select class="selectpicker" data-live-search="true">
<option>Android</option>
<option>iOS</option>
<option>Windows</option>
<option>Symbian</option>
<option>Atari TOS</option>
<option>Amiga OS</option>
<option>Unix</option>
<option>Linux</option>
<option>OSX</option>
</select>
<div class="input-error form-control-input" style="color: Red; display: none;">Description is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Issue Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="group">Expiry Date</label>
<input type="text" class="form-control" name="daterange-singe-date-picker" value="10/24/1984">
<div class="input-error form-control-input" style="color: Red; display: none;">date is required</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
<!--</div> you should delete this closing div -->
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
</div>
</div>
<!--</div> you should delete this closing div -->
Related
I have created an contact form, i tried forms but bootstrap but unable to move it to center of the screen. Can you please help me to move this and arrange a box around the forms.Which i could not do. I am trying this in angular 8
<div class="container">
<h2 >Contact Form</h2>
<div class="container">
<form [formGroup]="profileForm"(ngSubmit)="onSubmit()">
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Your Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="yourname" >
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Email: </label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Items:</label>
<div class="col-sm-5">
<select id="Item" class="form-control" formControlName="item">
<option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Name: </label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
Remarks:</label>
<div class="col-sm-5">
<textarea class="form-control" type="text" formControlName="remarks" rows="3">
</textarea>
</div>
</div>
<div class="dialog">
<button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
</div>
</form>
</div>
</div>
CSS below:
.container {
display: block;
border: 2px black;
border-radius: 4px;
box-sizing: border-box 1px black;
}
you can do something like this, the code you shared has limited contents. I tried to fix that only.
use justify-content: center;
align-items: center;
this should fix your issue.
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
<div class="container">
<h2>Contact Form</h2>
<div class="container">
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Your Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="yourname">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Email: </label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Items:</label>
<div class="col-sm-5">
<select id="Item" class="form-control" formControlName="item">
<option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Name: </label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
Remarks:</label>
<div class="col-sm-5">
<textarea class="form-control" type="text" formControlName="remarks" rows="3">
</textarea>
</div>
</div>
<div class="dialog">
<button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
</div>
</form>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h2>Contact Form</h2>
</div>
<div class="card-body d-flex justify-content-center">
<form class="w-75" [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<div class="form-group row">
<label class="col-2 col-form-label"> Your Name:</label>
<div class="col">
<input type="text" class="form-control" formControlName="yourname">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Email: </label>
<div class="col">
<input type="text" class="form-control" formControlName="email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Items:</label>
<div class="col">
<select id="Item" class="form-control" formControlName="item">
<option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Name: </label>
<div class="col">
<input type="text" class="form-control" formControlName="name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
Remarks:</label>
<div class="col">
<textarea class="form-control" type="text" formControlName="remarks"
rows="3"></textarea>
</div>
</div>
<div class="dialog">
<button type="submit" color=#C93C6A class="btn-block"
[disabled]="!profileForm.valid">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Your code is correct and only needs a slight change. You said that you were using bootstrap so I have tried to use the classes from bootstrap to showcase how it will look by using it in the css here. But this will work if you only copy the html contents. Let me know if you need any further help.
.container {
width: 300px;
border: 2px solid black;
border-radius: 4px;
padding: 10px;
}
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.text-center {
text-align: center;
}
.justify-content-center {
justify-content: center;
}
.align-self-center {
align-self: center;
}
<div class="d-flex flex-column">
<div class="container align-self-center">
<h2 class="text-center">Contact Form</h2>
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Your Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="yourname">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Email: </label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Items:</label>
<div class="col-sm-5">
<select id="Item" class="form-control" formControlName="item">
<option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Name: </label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
Remarks:</label>
<div class="col-sm-5">
<textarea class="form-control" type="text" formControlName="remarks" rows="3">
</textarea>
</div>
</div>
<div class="dialog text-center">
<button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
</div>
</form>
</div>
</div>
One more way to achieve this design using display:table
Please review my code carefully, And let me know if you have any query.
Hope it will help you. :)
.container {
display: table;
border: 2px black;
border-radius: 4px;
box-sizing: border-box 1px black;
height: 100%;
vertical-align: middle;
margin: 0 auto;
}
.container form {
display: table-cell;
vertical-align: middle;
}
<div class="container">
<div class="container">
<form [formGroup]="profileForm"(ngSubmit)="onSubmit()">
<h2 >Contact Form</h2>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Your Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="yourname" >
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Email: </label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Items:</label>
<div class="col-sm-5">
<select id="Item" class="form-control" formControlName="item">
<option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Name: </label>
<div class="col-sm-5">
<input type="text" class="form-control" formControlName="name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
Remarks:</label>
<div class="col-sm-5">
<textarea class="form-control" type="text" formControlName="remarks" rows="3">
</textarea>
</div>
</div>
<div class="dialog">
<button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
</div>
</form>
</div>
</div>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="">Option 1</label>
<div class="input-error form-control-input" style="color: Red; display: none;">Demo is required</div>
</div>
</div>
</div>
</div>
Now i want to aligned checkbox with input field horizontally. I can't figure out after searching.
Here's an example of how you could do it. I put both input fields in a row, where they occupy half of the row with <div class="col-md-6">.
Here is the code
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="reference">Reference</label>
<div class="row align-middle">
<div class="col-md-6">
<input class="form-control" id="reference" name="reference" placeholder="Reference" type="text">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
<div class="col-md-6">
<label class="checkbox-inline">
<input value="" type="checkbox">Option 1</label>
<div class="input-error form-control-input" style="color: Red; display: none;">Demo is required</div>
</div>
</div>
</div>
</div>
</div>
Here is a working example.
https://codepen.io/anon/pen/KBzLOR
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="">Option 1</label>
<div class="input-error form-control-input" style="color: Red; display: none;">Demo is required
</div>
</div>
</div>
</div> <!-- ROW CLOSING TAG -->
</div>
</div>
</div>
I have a background div that I use to create a "box" effect. I need this div to fit its contents but what I searched and tried to do, did not worked as expected. I'm using bootstrap.
I already tried in my div css:
display:inline-block;
display:inline-block !important;
This is my page without above css:
This is my page with above css
And this is what I need. My background "box" limit in the red line:
Page html:
<div class="input-content-boxed">
<div class="row">
<div class="col-md-4">
<div class="form-group form-group-default required">
<label>Nome</label>
<input asp-for="Name" class="form-control" />
</div>
</div>
<div class="col-md-2">
<div class="form-group form-group-default required">
<label>CNPJ</label>
<input id="txtCNPJ" asp-for="CNPJ" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-default">
<label>País</label>
<select asp-for="Country" asp-items="new SelectList(ViewBag.Countries)" id="listCountry" data-init-plugin="select2" style="width: 100%">
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group form-group-default" id="divStateBrazil">
<label>Estado</label>
<select id="listStateBrazil" asp-items="new SelectList(ViewBag.BrazilStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
<div class="form-group form-group-default" id="divStateEUA" hidden>
<label>Estado</label>
<select id="listStateEUA" asp-items="new SelectList(ViewBag.EUAStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
<div class="form-group form-group-default" id="divStatePeru" hidden>
<label>Estado</label>
<select id="listStatePeru" asp-items="new SelectList(ViewBag.PeruStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label>Cidade</label>
<input asp-for="City" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label>Logradouro</label>
<input asp-for="Street" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-default">
<label>Bairro</label>
<input asp-for="District" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="form-group form-group-default required">
<label>CEP</label>
<input id="txtCEP" asp-for="CEP" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-default">
<label>Número</label>
<input asp-for="Number" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="form-group form-group-default">
<label>Observação</label>
<input asp-for="Observation" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default required">
<label>Email</label>
<input asp-for="Email" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-default required">
<label>Telefone</label>
<input id="txtPhone" asp-for="Phone" class="form-control" />
</div>
</div>
<div class="col-md-3">
<div class="form-group form-group-default">
<label>Celular</label>
<input id="txtCellphone" asp-for="Cellphone" class="form-control" />
</div>
</div>
</div>
</div>
Css:
.input-content-boxed {
background-color: #ffffff;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-top:15px;
border-radius: 3px;
box-shadow: 2px 2px 3px #888888;
display:inline-block;
}
The main issue I see is you're using the Bootstrap col- classes so your contents are being forced to fit in the grid. Specifically, it appears most the rows of your layout are only using 6 out of the 12 columns of the grid, which results in the form taking up only half the available width.
You'll want to make sure the col- classes add up to 12 for each row.
For the purposes of this demo I've used the col-xs- classes so the layout fits within the narrow demo frame below. You'll probably want to use the responsive classes to the form works well across more viewport sizes.
.input-content-boxed {
background-color: #ffffff;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-top:15px;
border-radius: 3px;
box-shadow: 2px 2px 3px #888888;
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-content-boxed">
<div class="row">
<div class="col-xs-8">
<div class="form-group form-group-default required">
<label>Nome</label>
<input asp-for="Name" class="form-control" />
</div>
</div>
<div class="col-xs-4">
<div class="form-group form-group-default required">
<label>CNPJ</label>
<input id="txtCNPJ" asp-for="CNPJ" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>País</label>
<select asp-for="Country" asp-items="new SelectList(ViewBag.Countries)" id="listCountry" data-init-plugin="select2" style="width: 100%">
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group form-group-default" id="divStateBrazil">
<label>Estado</label>
<select id="listStateBrazil" asp-items="new SelectList(ViewBag.BrazilStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
<div class="form-group form-group-default" id="divStateEUA" hidden>
<label>Estado</label>
<select id="listStateEUA" asp-items="new SelectList(ViewBag.EUAStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
<div class="form-group form-group-default" id="divStatePeru" hidden>
<label>Estado</label>
<select id="listStatePeru" asp-items="new SelectList(ViewBag.PeruStates)" data-init-plugin="select2" style="width: 100%">
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group form-group-default">
<label>Cidade</label>
<input asp-for="City" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group form-group-default">
<label>Logradouro</label>
<input asp-for="Street" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>Bairro</label>
<input asp-for="District" class="form-control" />
</div>
</div>
<div class="col-xs-6">
<div class="form-group form-group-default required">
<label>CEP</label>
<input id="txtCEP" asp-for="CEP" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>Número</label>
<input asp-for="Number" class="form-control" />
</div>
</div>
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>Observação</label>
<input asp-for="Observation" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group form-group-default required">
<label>Email</label>
<input asp-for="Email" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group form-group-default required">
<label>Telefone</label>
<input id="txtPhone" asp-for="Phone" class="form-control" />
</div>
</div>
<div class="col-xs-6">
<div class="form-group form-group-default">
<label>Celular</label>
<input id="txtCellphone" asp-for="Cellphone" class="form-control" />
</div>
</div>
</div>
</div>
I need to style a bootstrap 3 form such as there is a border around each form field and label. Something like this -
I am not able to make out how to go about doing this. Here is my attempt to achieve this (Please expand the output so that you see 2 columns in each row) -
https://jsfiddle.net/yy7ddtby/15/
.custom-label {
line-height: 3.3em !important;
}
.label-size {
/*font-size: 10px;*/
line-height: 2.1em;
/*padding-right:0px;
width: 10%;*/
}
.border {
color: #555;
border: 1px solid #ccc;
border-radius: 1px;
padding: 5px;
}
<div class="container-fluid">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name" class="col-md-4 label-size custom-label border">Name</label>
<div class="col-md-8 border">
<input type="text" id="name" class="form-control input-field">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="gender" class="col-md-4 label-size custom-label border">Gender</label>
<div class="col-md-8 border">
<select id="gender" class="form-control input-field">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 label-size custom-label">Functions</label>
<div class="checkbox col-md-8 label-size">
<label>
<input type="checkbox" id="Func1"> Func1</label>
<label>
<input type="checkbox" id="Func2">Func2</label>
<label>
<input type="checkbox" id="Func3">Func3</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country" class="col-md-4 label-size custom-label">Country</label>
<div class="col-md-8">
<select id="country" class="form-control input-field">
<option>Select</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="options" class="col-md-4 label-size custom-label">Options</label>
<div class="col-md-8">
<select id="options" class="form-control input-field">
<option>Select</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="addr" class="col-md-4 label-size custom-label">ADDR</label>
<div class="col-md-8">
<input type="text" id="addr" class="form-control input-field">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="author" class="col-md-4 label-size custom-label">Author</label>
<div class="col-md-8">
<input type="text" id="author" class="form-control input-field">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="range1" class="col-md-4 label-size custom-label">Range1</label>
<div class="col-md-3">
<input type="text" id="range1" class="form-control input-field">
</div>
<div class="col-md-2">
to
</div>
<div class="col-md-3">
<input type="text" id="range2" class="form-control input-field">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ip" class="col-md-4 label-size custom-label">IP</label>
<div class="col-md-8">
<input type="text" id="ip" class="form-control input-field">
</div>
</div>
</div>
</div>
</form>
</div>
I have tried to style the first row using a custom CSS called border. However, it doesn't look the way I want it to. The border it generates is quite untidy and not the way in the image.
How can I go about achieving the expected UI with borders?
I would actually give the entire row the border, then use left/right borders on the form elements to divide them up.
Here's the basic idea:
.row {
border: 2px solid black;
}
.form-group > label {
border-right: 2px solid black;
}
input {
border-right: 2px solid black;
}
revised demo
I am trying to create a form using bootstrap 3 that looks like
this.
I can get it to look pretty similar, but the only problem I have is that my last horizontal rule in the ETO section goes the entire way across. Is there any way I can make this only go across half of the page? I tried putting it in different col sizes inside that but I couldn't get it to work. Here's my html. Thanks ahead of time!
<div class="panel panel-default">
<div class="panel-heading">
<label style="color: white; font-weight: bold;">JOHNSON Summary</label>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" style="overflow-x:auto;">
<fieldset>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Status </label>
<div class="col-xs-7">
<select class="form-control" id="empStatus">
<option value="" disabled>Choose Type....</option>
<option value="Current">Current</option>
<option value="Terminated">Terminated</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Anniversary </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empAnniversary"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Start Date </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empStartDate"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Adjusted Start </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empAdjustedStart"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> STD/LTD </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empSTDLTD"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Uncharged </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empUncharged"/>
</div>
</div>
</div>
</fieldset>
<fieldset>
<h4>PTO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Base </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="ptoBase" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> + </label>
<label class="col-xs-4"> Carryover </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoCarryover" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Borrowed </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBorrowed" />
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoRequests" />
</div>
<div class="col-xs-1"></div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoAvailable" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
</fieldset>
<fieldset>
<h4>ETO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Earned </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoEarned" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> ― </label>
<label class="col-xs-2"> Requests </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoRequested" />
</div>
<div class="col-xs-6">
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> = </label>
<label class="col-xs-2"> Available </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoAvailable" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
UPDATED.
I think you need to use Bootstrap's horizontal form as described in official docs. It seems you are using horizontal form structure, but you've forgotten to add .form-horizontal class to your form element or to .form-group.