Bootstrap align horizontal - html

How can I have all align horizontal the below code renders as shown in the screen 1 and but I'm trying to have as shown in screen 2
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Number</label>
</div>
<div class="col-xs-3">
<input type="text" id="number"></input>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Tag</label>
</div>
<div class="col-xs-3">
<input type="text" id="Name"></input>
</div>
<div class="col-xs-3">
<button class="btn btn-default" type="button">Go!</button>
</div>
</div>
</div>
Screen shot 1:
Screen shot 2:

Your HTML structure is incorrect; you're nesting columns and rows and then columns inside columns for no reason. Docs
See example.
(*The columns are XS as in your example which in this case will not render very well from a mobile screen, consider using SM)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form class="myForm">
<div class="form-group">
<label for="Number" class="col-xs-2 control-label">Number</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="Number" />
</div>
</div>
<div class="form-group">
<label for="tag" class="col-xs-2 control-label">Tag</label>
<div class="col-xs-4">
<div class="input-group">
<input type="email" class="form-control" id="tag" /> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>

Related

Bootstrap form column alignment

I've created a Bootstrap 4 form with this layout
And the Razor page code to generate it is:
#page
#model HighStreetLeads3.Pages.Leads.EditModel
#{
ViewData["Title"] = "Edit";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
<h1>Edit</h1>
<h4>Lead</h4>
<hr />
<form class="form-inline col-lg-12" method="post">
<div>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Lead.Id" />
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.Name" class="control-label float-left">Name</label>
</div>
<div class="col-9">
<input asp-for="Lead.Name" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.Name" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.PhoneNumber" class="control-label float-left">Number</label>
</div>
<div class="col-9">
<input asp-for="Lead.PhoneNumber" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.PhoneNumber" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.Status" class="control-label float-left"></label>
</div>
<div class="col-9">
<input asp-for="Lead.Status" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.Status" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.NextAction" class="control-label float-left">Next Action</label>
</div>
<div class="col-9">
<input asp-for="Lead.NextAction" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.NextAction" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.WebAddress" class="control-label float-left">URL</label>
</div>
<div class="col-9">
<input asp-for="Lead.WebAddress" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.WebAddress" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.ContactName" class="control-label float-left">Contact</label>
</div>
<div class="col-9">
<input asp-for="Lead.ContactName" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.ContactName" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group text-left">
<div class="col-3">
<label asp-for="Lead.Where" class="control-label float-left">Address</label>
</div>
<div class="col-9">
<input asp-for="Lead.Where" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.Where" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-12">
<div class="form-group">
<div class="col-1 mr-0 pr-0">
<label asp-for="Lead.Notes" class="control-label col-3 float-left"></label>
</div>
<div class="col-8">
<input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
<span asp-validation-for="Lead.Notes" class="text-danger"></span>
</div>
<div class="col-2 ml-5 float-right">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</div>
#*<div class="form-group col-1 offset-11">
<input type="submit" value="Save" class="btn btn-primary" />
</div>*#
I can add the page model in if anyone needs it, but I don't think it's relevant, and the css is the standard bootstrap.
So..... as you can see, the majority of the form is in two columns, but the last field (Notes) takes up more of the screen width. Because of this, I can't get the label or the entry field for Notes to line up with the previous fields. I've tried fiddling about with margins and padding, but I can't get an exact line up. It feels like I need to be able to ask Bootstrap for a width of a fractional column.
Is there a way of getting this last field laid out so it aligns with the previous ones?
Any input gratefully received.
Nick
You use col-3 in <div class="col-6">,so you need to set col-1.5 in <div class="col-12">,but there is no col-1.5,so you can only try to set the css and make it close to col-1.5:
<div class="row col-12">
<div class="col-12">
<div class="form-group">
<div class="col-md-1" style="flex: 0 0 12.15%;max-width: 12.15%;">
<label asp-for="Lead.Notes" class="control-label float-left"></label>
</div>
<div class="col-8">
<input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
<span asp-validation-for="Lead.Notes" class="text-danger"></span>
</div>
<div class="col-2 ml-5 float-right">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</div>
result:

Slowly Rendered Html page

I am trying to make a Sign-UP form in html and CSS with notepad++ but whenever I try to run it on chrome, it loads very slowly. Is it a configuration error or something? What am I doing wrong? Is there a plugin needed? This is my entire code:
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add the bootstrap and jQuery plugins.
In HTML page link the external files properly.
In head section add the external links.
Maintain the folder structure neat so that linking extrnal files is easy.
If everything is correct go to this link to set up Chrome: https://www.webnots.com/fix-slow-page-loading-issue-in-google-chrome/
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap Control Layout Offset Issue

I have the following fiddle which is a cut down sample of a page I am working on utilising bootstrap for the styling.
NOTE: When viewing the fiddle, make sure the Result pane is wide enough to have the first 3 controls on a single row!
The issue that I have is that the 'Free Text Search' row of controls seem to be offset to the right more than I would like. I want the 'Free Text Search' label to be directly under the 'Store Number' label and the same width. Along with that I wand the corresponding input to start at the beginning of the 'Store Number' input and finish at the end of the 'Parent Category' select.
I can't quite see where I have gone wrong with the bootstrap classes.
Here is my html:
<form class="form-horizontal">
<h3 style="padding-left: 20px; padding-bottom: 20px">A pointless title</h3>
<div class="row form-group">
<div class="col-md-4">
<label for="storeNumber" class="col-sm-4 control-label">Store Number</label>
<div class="col-sm-6">
<input id="storeNumber" class="form-control" type="text"
name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="col-md-4">
<label for="actionedTo" class="col-sm-4 control-label">Actioned To</label>
<div class="col-sm-6">
<select id="actionedTo" class="form-control"></select>
</div>
</div>
<div class="col-md-4">
<label for="parentCategory"
class="col-sm-4 control-label">Parent Category</label>
<div class="col-sm-6">
<select id="parentCategory" class="form-control"></select>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="freeTextSearch"
class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text"
name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</form>
Your general structure is counter to your classes. You're structuring for your inputs to position inline but you're using form-horizontal and you're nesting columns.
You don't need any of that markup for this. Just use the form-group class and columns.
See working Snippet.
*The CSS I've added isn't needed to make everything work but I believe it looks better on larger viewports with it.
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</form>
</div>
Alternative Layout for Multiple Controls
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</div>
</form>
</div>

How can i use margin and padding inside of bootstrap?

i have been creating a form by using bootstrap but the result is not ok for me. how can i make my form better?
<div class="row" ng-if="model.FieldType == customTypes.Select">
<div class="form-group">
<label class="control-label col-md-4">Seçim</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect"/>
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+</button>
</div>
</div>
<div class="form-group">
<div class="col-md-8 pull-right">
<select class="form-control" ng-options="field.id as field.value for field in DropdownListCustomItems" ng-model="model.DropdownListCustomItem"></select>
</div>
</div>
</div>
</div>
If I'm right, you are looking for something like this. This code will fix alignment issue. How ever, I don't know the bootstrap way for setting top-margin. In this code, I'm using a custom css for setting top margin.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label class="control-label col-md-4">Seçim</label>
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" ng-model="model.NewComboItemForSelect" />
<div class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="AddToDropDownList()">+
</button>
</div>
</div>
</div>
<div class="col-md-8 col-md-push-4" style="margin-top: 4px">
<div class="form-group">
<select class="form-control"></select>
</div>
</div>
</div>
</div>

how do i control width of input with bootstrap

i am trying to control my width's for my input but i am having some trouble. Here is my mark up
<section class="bg-lb pt40 pb40 btborder">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bg-white ">
<div class="pt40 pb40">
<a class="btn btn-default hvr-fade">Login</a>
<span id="cricle"><b>OR</b></span>
<a class="btn btn-default hvr-fade">Register</a>
</div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span></div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span></div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
<a class="btn btn-default hvr-fade"><b>LOGIN</b></a>
</form>
</div>
</div>
</div>
</div>
</section>
im just simply trying to reduce the width of the input and center the form,
live preview here
http://plnkr.co/edit/RN6tPNCynK2lEdTeWmFQ?p=preview
If you want to continue using the grid system you can change the way your col-'s are setup.
Change:
<div class="row">
<div class="col-sm-12">
<div class="bg-white">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
To:
<div class="row">
<div class="bg-white">
<form>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
</div>
The main difference is that <div class="col-md-6 col-md-offset-3"> is now specifically wrapping the <div class="form-group">. Where the col-md-offset-3 is what will be centering your form.
Or to go a bit further, create a new <div class="row"> for each <div class="form-group"> instead of embedding all columns into one row.
The bootstrap way is to reduce the width of the column the form is in. With 3 columns you can center the form:
<div class="col-sm-3"></div>
<div class="col-sm-6">form comes here</div>
<div class="col-sm-3"></div>
http://plnkr.co/edit/DSroqJsfQBTuwBUgo3ps?p=preview
Just override bootstrap .css in a particular place. Try this for eg:
put it inside the css:
input.form-control{
max-width: 100px;
}
input.form-control will override every input with class set to : form-control
Or you can shrink the entire container class
.container{
max-width: 250px;
}
Test here : http://plnkr.co/edit/kR69nCvsDCp9AlQqZztY?p=preview