I have created an html form using bootstrap columns to get the desired layout. It's about where I want it for desktop but it piles together on mobile. I don't believe any of the code I've used is working with bootstrap. Here is the form itself:
<div class="center_div">
<div class="row">
<div class="form-group col-xs-5">
<h3>First Name</h3>
<input name="fName" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Last Name</h3>
<input name="lName" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Company Name</h3>
<input name="compName" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Business Type</h3>
<select class="form-control" style="width: 100%;" name="businessNeeds">
<option value="">Select...</option>
<option value="IntDesign">Interior Designer</option>
<option value="Ecom">E-Commerce Only</option>
<option value="Retail">Retail Store Only</option>
<option value="RetailEcom">Retail and E-Commerce</option>
<option value="Mult">Multiple Locations</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-10">
<div class="input-group input-group-xs">
<h3>Address</h3>
<input class="form-control input-lg" name="address" type="text" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>City</h3>
<input name="city" type="text" />
</div>
<div class="form-group col-xs-2">
<h3>State</h3>
<select name="state">
<option value="">Select...</option>
/*Took out states for space*/
</select>
</div>
<div class="form-group col-xs-3">
<h3>Zip</h3>
<input name="zip" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Phone</h3>
<input name="phone" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Email</h3>
<input id="email" name="uemail" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<h3>Create a Username</h3>
<input name="uname" type="text" />
</div>
<div class="form-group col-xs-3">
<h3>Create a Password</h3>
<input class="form-control" style="width: 100%;" name="pass" type="password" />
</div>
<div class="form-group col-xs-3">
<h3>Confirm Password</h3>
<input class="form-control" style="width: 100%;" name="ConfPass" type="password" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Sales Tax ID</h3>
<input name="taxID" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Upload Tax ID Certificate</h3>
<input name="fileUpload" type="file" />
</div>
</div>
<div class="buttonHolder">
<input type="submit" value="Submit" /></div>
</div>
</form>
The CSS:
.center_div{
padding-left:150px;
position:relative;
width:100%;
margin:0 auto;
}
#media only screen and (max-width: 600px){
.mainForm{
}
.center_div{
width:100%;
margin:0 0 15px 0;
}
.center_div label{
width:100%;
float: none;
margin:0 0 5px 0;
}
.mainForm is a blank div around the form, there is nothing else on the page. I left the CSS pretty barebones but is there a fairly simple way to make this respond better on mobile with bootstrap? Even if all the fields just sat on top of one another.
All your bootstrap rows must be inside a .container div, otherwise they will not work as expected.
In order to stack form elements on smaller screens and have (say) two columns (6 grid columns each, really) on bigger resolutions, you need to apply two classes to your cols.
<div class="form-group col-xs-12 col-sm-6">
Essentially you're telling bootstrap that from the smallest resolution (xs) on the element should span 12 grid columns, while for small resolutions (sm) on the element should span 6 grid columns.
On this codepen I added these classes so you can see the solution at work. Hope it helps.
<html>
<head>
<title>
Mobile form responsvie
</title>
<style>
<style>
.row
{
display: flex;
flex-direction: column;
}
.form-group.col-xs-5 {
margin-left: 30px;
}
.input-inline
{
width:50%;
}
.input-inline
{
width:50%;
}
.center_div {
padding-left: 50px;
padding-right: 50px;
}
#media only screen and (max-width: 720px)
{
.input-inline
{
}
h3{
color:grey;
}
.form-group.col-xs-5
{
margin-left: 0px;
}
.center_div label{
width:100%;
float: none;
margin:0 0 5px 0;
}
.buttonolder input {
margin-left: 18%;
cursor: pointer;
}
</style>
</style>
</head>
<body>
<form>
<div class="center_div">
<div class="row">
<div class="form-group col-xs-5">
<h3>First Name</h3>
<input class="input-inline" name="fName" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Last Name</h3>
<input class="input-inline" name="lName" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Company Name</h3>
<input class="input-inline" name="compName" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Business Type</h3>
<select name="businessNeeds">
<option value="">Select...</option>
<option value="IntDesign">Interior Designer</option>
<option value="Ecom">E-Commerce Only</option>
<option value="Retail">Retail Store Only</option>
<option value="RetailEcom">Retail and E-Commerce</option>
<option value="Mult">Multiple Locations</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Address</h3>
<input class="input-inline" class="form-control input-lg" name="address" type="text"/>
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>City</h3>
<input class="input-inline" name="city" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>State</h3>
<select name="state">
<option value="">Select...</option>
/*Took out states for space*/
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Zip</h3>
<input class="input-inline" name="zip" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Phone</h3>
<input class="input-inline" name="phone" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Email</h3>
<input class="input-inline" id="email" name="uemail" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Create a Username</h3>
<input class="input-inline" name="uname" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Create a Password</h3>
<input class="input-inline" class="form-control" name="pass" type="password" />
</div>
<div class="form-group col-xs-5">
<h3>Confirm Password</h3>
<input class="input-inline" class="form-control"name="ConfPass" type="password" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Sales Tax ID</h3>
<input class="input-inline" name="taxID" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Upload Tax ID Certificate</h3>
<input class="upload-file" name="fileUpload" type="file" />
</div>
</div>
<div class="row">
<div class="buttonolder">
<input class="upload-file" type="submit" value="Submit" style="margin-left: 21%;margin-top: 3%;text-align: center;padding: 8px;padding-left: 27px;padding-right: 27px;cursor: pointer;">
</div>
</div>
</div>
</form>
</body>
</html>
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>
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 Have the following bootstrap form broken into groups.
I am trying to add a checkbox but, it doesn't seem to left align correctly.
How can i make the check box left align and under the "Max Amount" ?
and i want to add radio button to the next group.
My Fiddle
<div class="panel panel-primary">
<div class="panel-heading"> Information</div>
<div class="panel-body">
<!---->
<fieldset>
<legend> Borrowing Power</legend>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password">Desired Amount</label>
<!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
<input name="desiredamount" id="" class="form-control input-normal desiredLoan">
</div>
</div>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password_confirmation" class="">Max Loan Amount</label><br>
<input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class='row'>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_title">Title</label>
<input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_email">Email</label>
<input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_locale">Language</label>
<select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
<option value="en">English</option></select>
</div>
</div>
</div>
</fieldset>
<!---->
</div>
<div class="container-fluid"><!-- Row 2 -->
<!--
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="mobile">Mobile Phone</label>
<input name="mobile" id="mobile" class="form-control input-normal">
<p class="help-block">The users mobile phone number.</p>
</div>
</div>
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="level">User Access Level</label>
<select name="level" id="level" class="form-control input-normal">
<option value="1">1</item>
<option value="2">2</item>
</select>
<p class="help-block">The users system access level.</p>
</div>
</div> --->
<!---->
</div>
</div>
The problem is in form-control class which has width:100%
Solution
Add another class after form-control class
<input class="form-control auto-width pull-left" id="" name="" class="pull-left" type="checkbox" />
.auto-width {
width: auto;
}
Just try by removing "form-control" class from Checkbox
In this way I normally achieve it...just use column nesting
check the snippet I have nested class="col-sm-2" column inside class="col-sm-6" and added a margin-top
#check {
margin-top: -5px;
}
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body >
<div class="panel panel-primary">
<div class="panel-heading"> Information</div>
<div class="panel-body">
<!---->
<fieldset>
<legend> Borrowing Power</legend>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password">Desired Amount</label>
<!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
<input name="desiredamount" id="" class="form-control input-normal desiredLoan">
</div>
</div>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password_confirmation" class="">Max Loan Amount</label><br>
<div class='col-sm-2' id="check">
<input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class='row'>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_title">Title</label>
<input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_email">Email</label>
<input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_locale">Language</label>
<select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
<option value="en">English</option></select>
</div>
</div>
</div>
</fieldset>
<!---->
</div>
<div class="container-fluid"><!-- Row 2 -->
<!--
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="mobile">Mobile Phone</label>
<input name="mobile" id="mobile" class="form-control input-normal">
<p class="help-block">The users mobile phone number.</p>
</div>
</div>
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="level">User Access Level</label>
<select name="level" id="level" class="form-control input-normal">
<option value="1">1</item>
<option value="2">2</item>
</select>
<p class="help-block">The users system access level.</p>
</div>
</div> --->
<!---->
</div>
</div>
</body>
</html>
Hope this helps!
He's all aligned, but the label is getting 'stuck' on page side.
I tried using 'margin-left' but then he distorted everything else.
I want the result to be like this:
Below is my code:
http://jsfiddle.net/vzm7et7z/1/
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
<form id="form-sms" class="form-horizontal" method="post" action="salva.php">
<fieldset>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="operadora">OPERADORA</label>
<div class="col-md-8">
<select id="operadora" name="operadora" class="form-control">
<option value="">Selecione uma operadora</option>
<option value="CLARO">Claro</option>
<option value="CTBC">CTBC</option>
<option value="OI">Oi</option>
<option value="NEXTEL">Nextel</option>
<option value="TIM">TIM</option>
<option value="VIVO">Vivo</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="ddd_destinatario">DESTINATÁRIO</label>
<div class="col-md-4">
<select id="ddd_destinatario" name="campoDDD_d" class="form-control">
<option value="">DDD</option>
<option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option><option value="61">61</option><option value="62">62</option><option value="63">63</option><option value="64">64</option><option value="65">65</option><option value="66">66</option><option value="67">67</option><option value="68">68</option><option value="69">69</option><option value="70">70</option><option value="71">71</option><option value="72">72</option><option value="73">73</option><option value="74">74</option><option value="75">75</option><option value="76">76</option><option value="77">77</option><option value="78">78</option><option value="79">79</option><option value="80">80</option><option value="81">81</option><option value="82">82</option><option value="83">83</option><option value="84">84</option><option value="85">85</option><option value="86">86</option><option value="87">87</option><option value="88">88</option><option value="89">89</option><option value="90">90</option><option value="91">91</option><option value="92">92</option><option value="93">93</option><option value="94">94</option><option value="95">95</option><option value="96">96</option><option value="97">97</option><option value="98">98</option><option value="99">99</option>
</select>
</div>
<div class="col-md-4">
<input id="telefone_destinatario" name="campoCEL_d" type="text" placeholder="" maxlength="9" class="form-control input-md numerico" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="nome">SEU NOME</label>
<div class="col-md-8">
<input id="nome" name="nome" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="ddd_remetente">SEU NÚMERO</label>
<div class="col-md-4">
<select id="ddd_remetente" name="campoDDD_r" class="form-control">
<option value="">DDD</option>
<option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option><option value="61">61</option><option value="62">62</option><option value="63">63</option><option value="64">64</option><option value="65">65</option><option value="66">66</option><option value="67">67</option><option value="68">68</option><option value="69">69</option><option value="70">70</option><option value="71">71</option><option value="72">72</option><option value="73">73</option><option value="74">74</option><option value="75">75</option><option value="76">76</option><option value="77">77</option><option value="78">78</option><option value="79">79</option><option value="80">80</option><option value="81">81</option><option value="82">82</option><option value="83">83</option><option value="84">84</option><option value="85">85</option><option value="86">86</option><option value="87">87</option><option value="88">88</option><option value="89">89</option><option value="90">90</option><option value="91">91</option><option value="92">92</option><option value="93">93</option><option value="94">94</option><option value="95">95</option><option value="96">96</option><option value="97">97</option><option value="98">98</option><option value="99">99</option>
</select>
</div>
<div class="col-md-4">
<input id="telefone_remetente" name="campoCEL_r" type="text" placeholder="" maxlength="9" class="form-control input-md numerico" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="campoSMS">MENSAGEM</label>
<div class="col-md-8 control-zero">
<textarea name="campoSMS" id="campoSMS" class="form-control textarea-sms" maxlength="100"></textarea>
<p class="help-block textarea-contagem"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-4 control-zero">
<button id="enviar" name="enviar" class="btn btn-enviar">ENVIAR!</button>
</div>
</div>
</fieldset>
</form>
</div>
CSS:
.form-horizontal .control-label{
/* text-align:right; */
height: 34px;
text-align:left;
background: #A0D468;
font-size: 16px;
}
.btn-form {
padding: 0;
}
.btn-enviar {
background: #8e44ad;
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
.btn-enviar:hover {
background: #BE90D4;
color: #ffffff;
}
The issue is the column structure of Bootstrap CSS. Right now, you have:
<label class="col-md-4 control-label"></label>
<div class="col-md-8"></div>
Which makes the perfect col-md-12 for fullsize view. When you shrink this, it doesn't know how to handle the overflow, which is why the first col-md-4 appears in the wrong spot above the input. You're gonna want to look into visibile-sm, visible-xs, hidden-md etc classes of Bootstrap and design a separate layout for smaller devices. For example:
<div class="hidden-md hidden-lg">
<div class="row">
<div class="col-sm-12 col-xs-12">
<label>Example:</label>
</div>
<div class="col-sm-12 col-xs-12">
<input type="text" name="example" class="form-control" value=""/>
</div>
</div>
</div>
<div class="hidden-sm hidden-xs">
<div class="row">
<div class="col-md-4 col-lg-4">
<label>Example:</label>
</div>
<div class="col=md-8 col-lg-8">
<input type="text" name="example" class="form-control" value=""/>
</div>
</div>
</div>
Will render different designs for the same element depending on the size of the browser. Hopefully that can give you some insight, but it's up to you to figure out how you want your website/application laid out.
Change your <label class="col-md-4 control-label"></label> to
<div class="col-md-4">
<label class="control-label"></label>
</div>
use style="margin-left:15px;" with labels, its working fine, i have tested