I'm trying to have a col-md-4 inside a col-md-12, but it is not working.
HTML:
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-md-12">
<input type="number" required="required" class="col-md-4" placeholder="Rule1" />
<input type="number" required="required" class="col-md-4" placeholder="Rule2" />
<input type="number" required="required" class="col-md-4" placeholder="Rule3" />
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
Does anyone know how can I put the Rules side by side in the row?
Thanks
use
<div class="col-xs-4"></div>
or "col-md-4" xs just to show in this tiny preview
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-12 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule1" />
</div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule2" /> </div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule3" /> </div>
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
</div>
Related
I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="currentmonth">Total Work days in Current Month:</label>
<input class="col-md-4" type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="annualeave">Annual Leave :</label>
<input class="col-md-4" type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
This answer is different from the above answer given by Rafa Romero.
I have added different style for these.
Here is the 2 ways you can use this .
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<br><h1 class="text-center">OR</h1><br>
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" >
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
You are using bootstrap class so do one thing use columns and give .col-sm-8 and .com-sm-4 respectively and check.
<div class="form-group">
<label for="annualeave" class="col-sm-8">Annual Leave :</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</div>
You can try with absolute position for the texfields and aligning both at the same distance from the right or left side
input{
position: absolute;
left: 275px
}
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="currentmonth">Total Work days in Current Month:</label>
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
<div class="row">
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
Your labels are too lengthy, I've just changed the structure with center align, is this what you need ?
.form-group {
width:50%;
float:left;
padding:0 15px;
}
.form-group input {
float:left;
}
.form-group label {
float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group" >
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div> </div>
</div>
</div>
I have removed all your inline styles. There is no need for every field styling. You can do it with bootstrap classes.
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center"><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-6 control-label" for="currentmonth">Total Work days in Current Month:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Annual Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Sick / Emergency Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016):</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Month your name was added in Field Glass :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label"></label>
<div class="col-sm-6 text-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
Add class form-inline to the form element
example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
reference: http://www.w3schools.com/bootstrap/bootstrap_forms.asp
Remove the form-inline class from the form tag.
I've been using Bootstrap for a while. I wouldn't say I'm an expert but I'm proficient. Nevertheless, this form-inline issue got me head over heels:
It's a very simple thing what I'm trying, yet here I am, unable to put two elements in line:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<form class="form-inline">
<div class="form-group">
<label for="modal_add_group_input"></label>
<input class="form-control" id="modal_add_group_input" placeholder="Nombre de grupo" type="text">
</div>
<button type="submit" class="btn btn-success">
<span style="color: white;" class="glyphicon glyphicon-plus-sign">
</span> Crear Grupo</button>
</form>
</div>
</div>
</div>
Not trying anything fancy here. I went back to basics and even the provided example doesn't work:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
...any suggestions? What am I doing wrong? Ç_Ç
PS: Not a duplicate of Bootstrap inline form's submit button not in the same line . Tried that. Didn't work.
The issue you see in the snippet is because of the breakpoint (form-group component goes 100% width). Do you need it to be in the same line for mobile devices?
well, here you have the 3 solutions
Inline for big screens
Inline for all screen sizes
Inline for all screen sizes NO GRID (updated answer)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> **Inline for big screens devices**
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
<hr> **Inline for all screen sizes**
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-primary">Transfer cash</button>
</div>
</div>
</form>
<hr>
<div class="container">
**Inline for all screen sizes NO GRID**
<div class="row">
<div class="col-xs-6">
<form>
<div class="pull-right">
<button type="submit" class="btn btn-primary">Transfer cash</button>
</div>
<div class="">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
</form>
</div>
</div>
</div>
I acurrently have two input controls on the same line however they do not seem to align properly with the other controls above it and it looks rather off. I am not sure how to get them to align properly. Here is what the modal currently looks like: http://gyazo.com/4060e39e20391f1e9561e654dc64f9bb It's almost there but not quite there yet. Here is the HTML that I have writtem
<div id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<div class="col-md-5">
<label class="col-md-4 control-label" for="valueMin">Value Range:</label>
<div class="col-md-8">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false">
</div>
</div>
<div class="col-md-2">
<p>-</p>
</div>
<div class="col-md-5">
<div class="col-md-8">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
and here is my css that was auto generated when created my MVC project in visual studio
input,
select,
textarea {
max-width: 280px;
}
It is good practice to use rows when making columns.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I have fixed your code in a pen.
http://codepen.io/costh/pen/XbzGxL
Looks like your columns are a bit confused...
Try this :
<div class="col-md-12" id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true" />
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<div class="col-md-4">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true" />
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<div class="col-md-4">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="valueMin">Value Range:</label>
<div class="col-md-10">
<div class="col-md-4">
<div class="col-md-5" style="padding-left:0px;">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false" />
</div>
<div class="col-md-2">
<p style="text-align:center;">-</p>
</div>
<div class="col-md-5" style="padding-right:0px;">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false" />
</div>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
</div>
Please excuse the in-line styles!
Try this:
<div class="col-md-5">
<div class="input-daterange input-group" id="valuerang">
<span class="input-group-addon">Value Range:</span>
<input class="input-sm form-control" name="start" type="text" id="abc" required> <span class="input-group-addon"> - </span>
<input class="input-sm form-control" name="end" type="text" id="abc" required>
</div>
</div>
make sure you modify the tag names to suit your application.
I'm attempting to produce this form with Bootstrap 3:
I'm having trouble making First Name and Last Name inline AND making them together take up the same width as the other fields. Currently I have the following
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
which outputs a simple form with no inlining. Any ideas how to adjust this to look like in the picture? Here is a jsfiddle: http://jsfiddle.net/gJdyb/1/
Here's a jsFiddle. Use class row on the form-group you'd like to inline:
Administrator
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
Try this one
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group row">
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="Form-group">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
http://jsfiddle.net/gJdyb/4/
it use the col-xs-6.. it is us
read this for documentation of grid system of bootstrap
http://getbootstrap.com/css/#grid