I am using bootstrap for my web application, and I have problem with validationmessagefor puting message state in correct position. Now I have use this example from this link, with this code:
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
Now code that I use:
<h4 class="form-signin-heading">Please sign in</h4>
<div class="control-group">
<div class="controls">
#Html.TextBoxFor(u => u.Username, new {placeholder="Username", #class="form-control username", id="inputError"})
<span class="help-inner">#Html.ValidationMessageFor(u => u.Username)</span>
</div>
<div class="controls">
#Html.PasswordFor(u => u.Password, new {placeholder="Password", #class="form-control password"})
#Html.ValidationMessageFor(u=> u.Password)
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
My code do this (also in fiddle: http://jsfiddle.net/4h5E5/1/):
But my disire is to put validate message in this position (like example in link):
Please check this JS Fiddle Link
HTML Code:
<!DOCTYPE html>
<body>
<div class="container">
<form class="form-signin form-horizontal" role="form">
<h4 class="form-signin-heading">Please sign in</h4>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<input type="username" class="form-control username" placeholder="Username" required="autofocus" />
</div>
<div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<input type="password" class="form-control password" placeholder="Password" />
</div>
<div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</div>
</div>
</form>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript==================================================- ->
<!-- Placed at the end of the document so the pages load faster -->
</body>
I hope this is what you want to achieve.
If you have any other issue or if not solved, then please add a comment below.
Regards D.
Have you tried this? (untested)
<div class="controls">
<input type="text" id="inputError" class="pull-left">
<span class="help-inline pull-left">Please correct the error</span>
</div>
ps.would be great if you make a fiddle.
Use style = "display:inline" for EditorFor and ValidationMessageFor both, as below:
<div class="form-group">
#Html.LabelFor(model => model.UserName, htmlAttributes: new { #class = "control-label col-md-2"})
<div class="col-md-9">
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control", style = "display:inline" } })
#Html.ValidationMessageFor(model => model.UserName, "*", new { #class = "text-danger", style = "display:inline" })
</div>
</div>
Related
I have the following code which shows that I am using PagedList to display my search result in a paged order. The problem with it is that at the first result of the search it shows the number of pages related to the search result but once I click on the next page it keeps invoking the method of the page list in the HttpGet rather than keeping browsing the result that came from the the HttpPost method. How can I fix this
Controller:
public ActionResult SearchResult(int? page)
{
var result = from app in db.AllJobModel select app;
return View(result.ToList().ToPagedList(page ?? 1,5));
}
[HttpPost]
public ActionResult SearchResult(string searchTitle, string searchLocation, int? page)
{
setUpApi(searchTitle, searchLocation);
//setUpApi(searchTitle);
var result = db.AllJobModel.Where(a => a.JobTitle.Contains(searchTitle) && a.locationName.Contains(searchLocation));
return View(result.ToList().ToPagedList(page ?? 1, 5));
}
View :
#using (Html.BeginForm("SearchResult", "Home", FormMethod.Post))
{
<div class="job-listing-section content-area">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12">
<div class="sidebar-right">
<!-- Advanced search start -->
<div class="widget-4 advanced-search">
<form method="GET" class="informeson">
<div class="form-group">
<label>Keywords</label>
<input type="text" name="searchTitle" class="form-control selectpicker search-fields" placeholder="Search Keywords">
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="searchLocation" class="form-control selectpicker search-fields" placeholder="Location">
</div>
<br>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content5">
<i class="fa fa-plus-circle"></i> Date Posted
</a>
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="checkbox">
<label for="checkbox15">
Last Hour
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="checkbox">
<label for="checkbox16">
Last 24 Hours
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="checkbox">
<label for="checkbox17">
Last 7 Days
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox18" type="checkbox">
<label for="checkbox18">
Last 30 Days
</label>
</div>
<br>
</div>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content">
<i class="fa fa-plus-circle"></i> Offerd Salary
</a>
<div id="options-content" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
10k - 20k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
20k - 30k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox4" type="checkbox">
<label for="checkbox4">
30k - 40k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
40k - 50k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox7" type="checkbox">
<label for="checkbox7">
50k - 60k
</label>
</div>
<br>
</div>
<input type="submit" value="Update" class="btn btn-success" />
</form>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-12">
<!-- Option bar start -->
<div class="option-bar d-none d-xl-block d-lg-block d-md-block d-sm-block">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-7">
<div class="sorting-options2">
<span class="sort">Sort by:</span>
<select class="selectpicker search-fields" name="default-order">
<option>Relevance</option>
<option>Newest</option>
<option>Oldest</option>
<option>Random</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="sorting-options">
<i class="fa fa-th-list"></i>
<i class="fa fa-th-large"></i>
</div>
</div>
</div>
</div>
#foreach (var item in Model)
{
<div class="job-box">
<div class="company-logo">
<img src="~/JobImageUploads/#Html.DisplayFor(modelItem => item.UniqueJobImageName)" alt="logo">
</div>
<div class="description">
<div class="float-left">
<h5 class="title">#item.JobTitle</h5>
<div class="candidate-listing-footer">
<ul>
<li><i class="flaticon-work"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-time"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-pin"></i>#Html.DisplayFor(modelIem => item.locationName)</li>
</ul>
<h6>Deadline: Jan 31, 2019</h6>
</div>
<div>
#item.JobDescription
</div>
</div>
<div class="div-right">
#Html.ActionLink("Details", "Details", new { id = item.Id }, new { #class = "apply-button" })
Details
<i class="flaticon-heart favourite"></i>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="pagining">
#Html.PagedListPager(Model, page => Url.Action("SearchResult", new
{ page }))
</div>
}
One solution to preserve browsing results would be to pass searchTitle and searchLocation to your SearchResult GET method as well and keep them in the ViewBag to persist search results on paging.
This is because the PagedList helper uses a Url.Action which invokes the the SearchResults GET request.
EDIT: upon further testing, I would do away with the post method all together and change your form to use the GET method for everything. I have updated the code to reflect this approach.
public ActionResult SearchResult(int? page, string searchTitle = null, string searchLocation = null)
{
ViewBag.searchTitle = searchTitle;
ViewBag.searchLocation = searchLocation;
ViewBag.page = page;
var result = new List<Job>(); //replace with AllJobModel class
if(!string.IsNullOrEmpty(ViewBag.searchTitle) || !string.IsNullOrEmpty(ViewBag.searchTitle))
{
setUpApi(searchTitle, searchLocation);
//setUpApi(searchTitle);
result = db.AllJobModel.Where(a => a.JobTitle.Contains(searchTitle) && a.locationName.Contains(searchLocation));
}
else
{
result = from app in db.AllJobModel select app;
}
return View(result.ToList().ToPagedList(page ?? 1, 5));
}
and then in your view, set the values (if any) in the searchTitle and searchLocation text boxes. Also add them to the pagedList helper so the values persist on paging.
Edit: Also gonna need to add a hidden field to persist the page value on searches.
#using (Html.BeginForm("SearchResult", "Home", FormMethod.Get))
{
<input type="hidden" name="page" value="#ViewBag.page">
<div class="job-listing-section content-area">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12">
<div class="sidebar-right">
<!-- Advanced search start -->
<div class="widget-4 advanced-search">
<form method="GET" class="informeson">
<div class="form-group">
<label>Keywords</label>
<input type="text" name="searchTitle" class="form-control selectpicker search-fields" placeholder="Search Keywords" value="#ViewBag.searchTitle">
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="searchLocation" class="form-control selectpicker search-fields" placeholder="Location" value="#ViewBag.searchLocation">
</div>
<br>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content5">
<i class="fa fa-plus-circle"></i> Date Posted
</a>
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="checkbox">
<label for="checkbox15">
Last Hour
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="checkbox">
<label for="checkbox16">
Last 24 Hours
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="checkbox">
<label for="checkbox17">
Last 7 Days
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox18" type="checkbox">
<label for="checkbox18">
Last 30 Days
</label>
</div>
<br>
</div>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content">
<i class="fa fa-plus-circle"></i> Offerd Salary
</a>
<div id="options-content" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
10k - 20k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
20k - 30k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox4" type="checkbox">
<label for="checkbox4">
30k - 40k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
40k - 50k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox7" type="checkbox">
<label for="checkbox7">
50k - 60k
</label>
</div>
<br>
</div>
<input type="submit" value="Update" class="btn btn-success" />
</form>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-12">
<!-- Option bar start -->
<div class="option-bar d-none d-xl-block d-lg-block d-md-block d-sm-block">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-7">
<div class="sorting-options2">
<span class="sort">Sort by:</span>
<select class="selectpicker search-fields" name="default-order">
<option>Relevance</option>
<option>Newest</option>
<option>Oldest</option>
<option>Random</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="sorting-options">
<i class="fa fa-th-list"></i>
<i class="fa fa-th-large"></i>
</div>
</div>
</div>
</div>
#foreach (var item in Model)
{
<div class="job-box">
<div class="company-logo">
<img src="~/JobImageUploads/#Html.DisplayFor(modelItem => item.UniqueJobImageName)" alt="logo">
</div>
<div class="description">
<div class="float-left">
<h5 class="title">#item.JobTitle</h5>
<div class="candidate-listing-footer">
<ul>
<li><i class="flaticon-work"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-time"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-pin"></i>#Html.DisplayFor(modelIem => item.locationName)</li>
</ul>
<h6>Deadline: Jan 31, 2019</h6>
</div>
<div>
#item.JobDescription
</div>
</div>
<div class="div-right">
#Html.ActionLink("Details", "Details", new { id = item.Id }, new { #class = "apply-button" })
Details
<i class="flaticon-heart favourite"></i>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="pagining">
#Html.PagedListPager(Model, page => Url.Action("SearchResult", new
{ page, searchTitle = ViewBag.searchTitle, searchLocation = ViewBag.SearchLocation }))
</div>
}
I know this is a slight change to your original design, so please let me know if you'd like to discuss it further.
Hope this helps you!
I'm trying to put the glyphicon-question-sign on the same line of the textbox. The only working solution I found is using a table but it shrinks the textbox length. I could stretch it back with CSS but I'm concerned about page responsiveness. What I am after is to have all the textbox of the same width and for some of them a clarification icon on the right.
How would you solve this?
Thanks.
<div class="form-group" id="vatNumberDiv">
#Html.LabelFor(m => m.vatNumber, new {#class = "col-md-2 control-label"})
<div class="col-md-10">
#Html.TextBoxFor(m => m.vatNumber, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.vatNumber, "", new {#class = "text-danger"})
</div>
</div>
<div class="form-group" id="destCodeDiv">
#Html.LabelFor(m => m.destCode, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<table>
<tr>
<td>
#Html.TextBoxFor(m => m.destCode, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.destCode, "", new { #class = "text-danger" })
</td>
<td> </td>
<td>
<span class="glyphicon glyphicon-question-sign" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Description text..." style="font-size: 1.2em"></span>
</td>
</tr>
</table>
</div>
There are couple of methods. Glyphicons are nothing but text/font and so you can make use of form-control-static using two methods.
In keeping with the grid layout you can shorten your fields by 1 and make room for a col-**-1
Or... There is also nothing preventing you from setting an overriding width of your inputs, it's just that a form-control defaults to 100% of the col. You can override the form-control with some CSS and set both the form-control and form-control-static to inline-block to keep things on the same line as below:
Keep in mind things get wonky with Bootstrap as you shift to smaller screen-sizes but at least the display is consistent
View the snippet below in full screen as necessary to see the effect.
#CustomForm .width-override {
width: 50% !important;
}
#CustomForm .form-control,
#CustomForm .width-override+p.form-control-static {
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label">Email</label>
<div class="col-xs-6">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
<div class="col-xs-1">
<p class="form-control-static">
<span class="glyphicon glyphicon-question-sign "></span>
</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-xs-2 control-label">Password</label>
<div class="col-xs-6">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
<div class="col-xs-1">
<p class="form-control-static">
<span class="glyphicon glyphicon-question-sign "></span>
</p>
</div>
</div>
</div>
<br />
<br />
<br />
<div id="CustomForm" class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control width-override" id="inputEmail3" placeholder="Email">
<p class="form-control-static">
<span class="glyphicon glyphicon-question-sign "></span>
</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control width-override" id="inputPassword3" placeholder="Password">
<p class="form-control-static">
<span class="glyphicon glyphicon-question-sign "></span>
</p>
</div>
</div>
</div>
</div>
</div>
So, I'm trying to create a controller for an existing table in my database.
This is my Create method:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(ArticleCategoryViewModel model)
{
ArticleCategory cat = new ArticleCategory { Code = model.Code, Name = model.Name, Description = model.Description, VATId = model.VATId };
if (ModelState.IsValid)
{
_context.ArticleCategories.Add(cat);
await _context.SaveChangesAsync();
return RedirectToAction("Index");
}
ViewData["VATId"] = new SelectList(_context.VATs, "Id", "Percentage");
return View(model);
}
This is the form from cshtml file for create:
<form asp-action="Create" class="form-horizontal bordered-group" role="form">
<div class="form-horizontal">
<h4>ArticleCategoryViewModel</h4>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Code" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Code" class="form-control" />
<span asp-validation-for="Code" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Description" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Description" class="form-control" />
<span asp-validation-for="Description" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="VATId" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="VATId" class ="form-control" asp-items="#((IEnumerable<SelectListItem>)ViewData["VATId"])"></select>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default submit" />
</div>
</div>
</div>
</form>
Getting the information from database works, like get for index and details and edit, but when i try to post something like on create or after editing and i click submit button, its just pending. I tried every solution that i could find on the web but nothing works and i have no more ideas.
No logs are written, no error is thrown, nothing happens and i dont know why.
If i put a breakpoint inside the create method, it will not hit, so no debug.
Any ideas ?
I've been using Bootstrap for my MVC project. The problem is that the glyphicon (which is suppose to be at the end of the text box) is outside the box.
I believe it is because I am trying to arrange the two password field side by side but I didn't tell the glyphicon to re-align itself.
<div class="row">
<div class="col-xs-6 form-group has-feedback">
#Html.LabelFor(l => l.Password, new { #class = "control-label", #for = "pwd" })
#Html.PasswordFor(l => l.Password, new { id = "pwd", #class = "form-control" })
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-feedback col-xs-6">
<label class="control-label" for="pwd2">#Res.Resource.PasswordConfirm</label>
#Html.PasswordFor(l => l.Password, new { id = "pwd2", #class = "form-control" })
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
Thanks in advance
It's because you're adding the .form-control and the .has-feedback classes on the column <div>. It should be a child <div> of the column.
See the difference between the left column (classes on the same element) and the right column (nested <div>'s).
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 form-group has-feedback">
<label for="pwd" class="control-label">label</label>
<input type="password" id="pwd" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="col-xs-6">
<div class="form-group has-feedback">
<label for="pwd" class="control-label">label</label>
<input type="password" id="pwd" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</div>
</div>
The reason it fails is that the icon is positioned relative to the element with the has-feedback class. In the left example the col-xs-6 class has 15px of padding (used for the gutter / whitespace between columns). This makes the icon move 15px to the right.
I have a bootstrap 3 modal form that uses mixed form-horizontal and form-inline classes. I've fiddled around with the column widths but can't seem to get the form just right. There are two problems that I can't seem to get resolved:
The labels don't right align.
The State field is not the correct width.
My Html:
<div class="row">
<div class="col-md-7">
<h2>Agents</h2>
</div>
<div class="col-md-2">
<a id="addAgentButton" href="#" class="btn btn-primary">Add Agent</a>
</div>
</div>
<div id="agentModal" data-bind="with:detailAgent" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body col-md-12">
<form role="form" data-bind="submit: save">
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="txtAgentName">Name: </label>
<div class="col-md-6"><input class="form-control input-sm" id="txtAgentName" type="text" data-bind="value:Name" /></div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="txtAgentAddressLine1">Address 1: </label>
<div class="col-md-6">
<input class="form-control input-sm" id="txtAgentAddressLine1" type="text" data-bind="value:Address1" />
</div>
</div>
<div class="form-group col-md-12 form-inline">
<label class="col-md-2 control-label" for="txtAgentCity">City: </label>
<div class="col-md-2">
<input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
</div>
<label class="col-md-2 control-label" for="txtAgentState">State: </label>
<div class="col-md-2">
<select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
</div>
<label class="col-md-1 control-label" for="txtAgentZip">Zip: </label>
<div class="col-md-2">
<input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
My Javascript to show the modal:
$("#addAgentButton").on("click", function() {
$("#agentModal").modal("show");
});
My CSS:
.modal-dialog {
width: 800px;/* your width */
}
#addAgentButton {
margin-top: 15px;
}
And here's the jsfiddle.
Ok, I hope I understood you correct. Take a look at this fiddle
I had to change your inline-form html part a bit:
<div class="form-group col-md-12">
<label class="control-label col-md-2" for="txtAgentCity">City: </label>
<div class="col-md-2">
<input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
</div>
<label class="col-md-2 control-label text-right" for="txtAgentState">State: </label>
<div class="col-md-2">
<select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
</div>
<label class="col-md-2 control-lntZip text-right">Zip: </label>
<div class="col-md-2">
<input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
</div>
</div>
Just add the class .text-right to the label you want to be aligned right.