I am using bootstrap and i am new to it . I made this page but why my radio buttons are not aligned properly in left in small devices like iPhone4. Please tell me the reasonfor the same and thanks in advance.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Acarrot Do! Sign Up</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/custom.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".affix" data-offset="50">
<header class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2"><img src="images/logo-small.png" style="max-width:70%;height:auto;"> </div>
<div class="col-xs-6 col-sm-8 col-md-8 text-center">
<h4>Do This. Get That.</h4>
</div>
<div class="col-xs-3 col-sm-2 col-md-2 text-right"> </div>
</td>
</tr>
</table>
</div>
</div>
</header>
<nav class="navbar">
<div class="container-fluid text-center navbar-static-top">
<p class="big" style="background-color:#524e4d;">Fill the form below to Sign Up</p>
</div>
</nav>
<!-- Tabs Ends -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
<div class="col-sm-10 col-md-8 col-lg-6"><span class="page-title">Sign Up</span></div>
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
</div>
</div>
<!-- Title Ends -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
<div class="col-sm-10 col-md-8 col-lg-6">
<div class="panel-body">
<p class="big">I am a</p>
<form>
<div class="form-group">
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted">
<input type="radio" name="optradio">
<span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4 ">Student</span></label>
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted">
<input type="radio" name="optradio">
<span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4">Teacher</span></label>
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted">
<input type="radio" name="optradio">
<span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4">Parent</span></label>
</div>
<p class="big">Hello <span class="dark-green-text">Teacher,<br>
<br>
Please Use your school Email ID</span></p>
<div class="form-group">
<input class="form-control input-lg" id="Email" type="text"
style="background-color:#5e5653;border-bottom:1px solid #999;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;"
placeholder="School Email ID">
</div>
<div class="form-group">
<input class="form-control input-lg" id="password9" type="text" placeholder="Password"
style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;">
</div>
<div class="form-group">
<input class="form-control input-lg" id="password" type="text"
placeholder="Confirm Password"
style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;">
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<p class="big">I have read the <a>Terms of Use</a> and <a>Privacy Policy</a></p>
</label>
</div>
<table style="width:100%;"
cellpadding="2" cellspacing="2">
<tr>
<td> </td>
</tr>
<tr>
<td style="text-align:center;"><a href="signup.html">
<button type="button" class="btn btn-main" style="width:125px;">Sign Up</button>
</a><br>
<br></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table style="text-align: center; width: 100%;"
cellpadding="2" cellspacing="2">
<tr>
<td width="45%"><img src="images/2px-divider.png"
style="width:100%; height:1px;"></td>
<td width="10%"><p class="big"">or</p></td>
<td width="45%"><img src="images/2px-divider.png"
style="width:100%; height:1px;"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="50px"> </td>
</tr>
<tr>
<td style="text-align: center;"><a href="#"><img src="images/circles/icon-g+.png"><br>
Sign
Up with Google+</a></td>
</tr>
</table>
</form>
</div>
</div>
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
</div>
</div>
</div>
<!-- Content Ends -->
<footer class="container-fluid text-center"> About UsHow do! works<a href="contact.html">Contact
Us</a>
</li>
</ul>
</footer>
</body>
</html>
Remove this span from the label and write the text directly inside it
<span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4 ">Student</span>
Set the grid column classes at the level of the <label> and not the nested <span> tag:
<div class="form-group">
<label class="radio-inline col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px;border-color: red;border-style: dotted;display: inline-block;display: inline-block;"><input type="radio" name="optradio">
<span class="big">Student</span></label>
<label class="radio-inline col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px;border-color: red;border-style: dotted;display: inline-block;"><input type="radio" name="optradio">
<span class="big">Teacher</span></label>
<label class="radio-inline col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px;border-color: red;border-style: dotted;display: inline-block;"><input type="radio" name="optradio">
<span class="big">Parent</span></label>
</div>
See the given below edited code. It's solution I think.
Only you have to delete SPAN inside LABEL or else delete the classes of that SPAN
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Acarrot Do! Sign Up</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/custom.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".affix" data-offset="50">
<header class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2"><img src="images/logo-small.png" style="max-width:70%;height:auto;">
</div>
<div class="col-xs-6 col-sm-8 col-md-8 text-center"><h4>Do This. Get That.</h4></div>
<div class="col-xs-3 col-sm-2 col-md-2 text-right"> </div>
</div>
</header>
<nav class="navbar">
<div class="container-fluid text-center navbar-static-top">
<p class="big" style="background-color:#524e4d;">Fill the form below to Sign Up</p>
</div>
</nav>
<!-- Tabs Ends -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
<div class="col-sm-10 col-md-8 col-lg-6"><span class="page-title">Sign Up</span></div>
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
</div>
</div>
<!-- Title Ends -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
<div class="col-sm-10 col-md-8 col-lg-6">
<div class="panel-body">
<p class="big">I am a</p>
<form>
<div class="form-group">
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"><input type="radio" name="optradio">
Student</label>
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"><input type="radio" name="optradio">
Teacher</label>
<label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"><input type="radio" name="optradio">
Parent</label>
</div>
<p class="big">Hello <span class="dark-green-text">Teacher,<br><br>Please Use your school Email ID</span></p>
<div class="form-group">
<input class="form-control input-lg" id="Email" type="text"
style="background-color:#5e5653;border-bottom:1px solid #999;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;"
placeholder="School Email ID">
</div>
<div class="form-group">
<input class="form-control input-lg" id="password9" type="text" placeholder="Password"
style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;">
</div>
<div class="form-group">
<input class="form-control input-lg" id="password" type="text"
placeholder="Confirm Password"
style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;">
</div>
<div class="checkbox">
<label><input type="checkbox">
<p class="big">I have read the <a>Terms of Use</a> and <a>Privacy Policy</a></p></label>
</div>
<table style="width:100%;"
cellpadding="2" cellspacing="2">
<tr>
<td> </td>
</tr>
<tr>
<td style="text-align:center;"><a href="signup.html">
<button type="button" class="btn btn-main" style="width:125px;">Sign Up</button>
</a><br><br></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table style="text-align: center; width: 100%;"
cellpadding="2" cellspacing="2">
<tr>
<td width="45%"><img src="images/2px-divider.png"
style="width:100%; height:1px;"></td>
<td width="10%"><p class="big"">or</p></td>
<td width="45%"><img src="images/2px-divider.png"
style="width:100%; height:1px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50px"> </td>
</tr>
<tr>
<td style="text-align: center;"><a href="#"><img src="images/circles/icon-g+.png"><br>Sign
Up with Google+</a></td>
</tr>
</table>
</form>
</div>
</div>
<div class="col-sm-1 col-md-2 col-lg-3"> </div>
</div>
</div>
</div>
<!-- Content Ends -->
<footer class="container-fluid text-center">
About UsHow do! works<a href="contact.html">Contact
Us</a></li>
</ul>
</footer>
</body>
</html>
Related
I am new for angular .I wrote below code and I expect below style format with my code but i can't achieve using my below code can some one help me to solve my issue.
home.component.html
<div class="card">
<form [formGroup]="userForm">
<div class="mt-5 box">
<div class="form-row">
<div class="col-md-12">
<div class="form-group mt-4">
<label>Type</label>
</div>
<div class="form-row" style="margin-top:-10px">
<div class="col">
<input type="text" formControlName="type" class="form-control" placeholder="Type">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group mt-4">
<label>Session</label>
</div>
<div class="form-row" style="margin-top:-10px">
<div class="col">
<input type="text" formControlName="session" class="form-control" placeholder="Session">
</div>
</div>
</div>
<div class="form-row mt-4">
<div class="col-md-6">
<button type="button" class="btn btn-primary" (click)="addItem()">Add</button> 
</div>
<div class="col-md-6">
<button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
</div>
</div>
</div>
</div>
</form>
<div class="col-md-8 mt-4 mb-4">
<table class="table table-bordered">
<thead>
<tr>
<th>Type</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of listData">
<td><span>{{item.type}}</span></td>
<td><span>{{item.session}}</span></td>
<td><button type="button" class="btn btn-primary" (click)="removeItems(item)">Remove</button></td>
</tr>
</tbody>
</table>
</div>
</div>
home.component.css
.box{
width: 50%;
border: 1px solid rgb(145, 138, 138);
border-radius: 25px;
padding: 0px 20px 20px 20px;
margin-left: 400px;
}
My Result
Expected
angular.json
I am trying to place my input field directly to the left of the 3 buttons (the btn-toolbar) on the right side. I'm not sure why this is so difficult. I have tried changing the width of the input field and using various utility classes without success. Any help would be appreciated.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Get Data</button>
</div>
</div>
<div class="col-sm-6">
<label class="control-label"> </label>
<input type="search" class="form-control"/>
<div class="pull-right">
<label class="control-label"> </label>
<div class="btn-toolbar">
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-danger">Close</button>
</div>
</div>
</div>
</div>
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
In one row your columns have to add up to 12 as it is a 12 column grid in Bootstrap. I have made the input 2 columns and the buttons 4 columns.
I have also fixed the mobile size layout by adding 3 cols of 4 followed 2 cols of 6 and adding a 'form group' class around the input field.
Updated to add 'text-right' to the button columns, and remove 'button-toolbar' from around the three buttons.
Updated again to add more breakpoints, so the large screen size looks better.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-xs-4 col-sm-2 col-lg-1 text-right">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Get Data</button>
</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-3 col-md-offset-1 col-lg-offset-2">
<div class="form-group">
<label class="control-label"> </label>
<input type="search" class="form-control"/>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-right">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-danger">Close</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
With some help from #k123, I was able to come up with a solution that seems to work okay. But if there is a better way to accomplish this, I'd be happy to choose a better answer.
I ended up putting the form-group into the last div and using the pull-left class to force it to the left of the buttons. It's definitely not the most ideal solution, but seems to look "well enough" on large displays.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Get Data</button>
</div>
</div>
<div class="col-xs-6 col-sm-2">
</div>
<div class="col-xs-6 col-sm-4 text-right">
<div class="form-group pull-left">
<label class="control-label"> </label>
<input type="search" class="form-control" />
</div>
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-danger">Close</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Problem
I am expecting to showing two columns. But all the four fields are coming in 1 column.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-header">Update Profile</div>
<div class="card-body">
<form method="POST" accept-charset="UTF-8" id="profileForm">
<div class="col-sm-6 col-md-6">
<div class="form-group">
<label for="First_Name" class="control-label">First Name</label>
<input class="form-control" name="First_Name" type="text">
</div>
<div class="form-group">
<label for="Last_Name" class="control-label">Last Name</label>
<input class="form-control" name="Last_Name" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="form-group ">
<label for="City" class="control-label">City</label>
<input class="form-control" name="City" type="text">
</div>
<div class="form-group ">
<label for="State" class="control-label">State</label>
<input class="form-control" name="State" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
This should work.
Adding a row div just before the two form fields you are expecting in the same column.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/app.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-10">
<div class="card">
<div class="card-header">Update Profile</div>
<div class="card-body">
<form method="POST" accept-charset="UTF-8" id="profileForm">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="FirstName" class="control-label">First Name</label>
<input class="form-control" name="First_Name" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label for="LastName" class="control-label">Last Name</label>
<input class="form-control" name="Last_Name" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group ">
<label for="City" class="control-label">City</label>
<input class="form-control" name="City" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="form-group ">
<label for="State" class="control-label">State</label>
<input class="form-control" name="State" type="text">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Wrap it in a div with class "row", this will take all the width avaible
<div class="row">
<div class="col-sm-6 col-md-6">...</div>
<div class="col-sm-6 col-md-6">...</div>
</div>
I have a big form and the problem with alignment. I cut some fields, but the demo will show the problem.
I have two columns in the begining of the form, some rows use half of the width, some rows use full witdh. And, the problem with the last one. As you can see textareas is not aligned with the others inputs:
How can I fix it?
DEMO
PS. I use Bootstrap 4, but, I think this question is related to Bootsrap 3 too.
.full-width {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<form novalidate>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field1" class="col-md-2 col-form-label">Text Area</label>
<div class="col-md-10">
<textarea id="field1" class="form-control"
cols="30" rows="4"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group row">
<div class="col-md-12">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 3
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field2" class="col-md-2 col-form-label">Input</label>
<div class="col-md-10">
<input id="field2" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-1 col-form-label">Options</label>
<div class="col-md-11">
<div class="row">
<div class="col-md-6">
<span>Label 1</span>
<input type="radio" name="group1" value="Value 1"> Value 1
<input type="radio" name="group1" value="Value 1"> Value 2
</div>
<div class="col-md-6">
<span>Label 2</span>
<input type="radio" name="group2" value="Value 1"> Value 1
<input type="radio" name="group2" value="Value 2"> Value 2
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</form>
The problem is the first 2 rows are nested in col-md-8, and the misaligned "options" row is nested in col-md-12.
Also, clean up the various malformed HTML in the code.
http://www.codeply.com/go/sCYzgdFXxa
I have an inline form with the following code:
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-2">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class="form-group col-xs-2">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
when I run it it looks like this:
When I resize the Browser it's looking like this:
My question is how I can have input fields with fixed width and fixed distance between columns?
Thanks
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Is this the same that you are looking for?
Hope this helps.