bootstrap grid with blank form-group col-md-6 - html

I'd like to achieve a grid like down below. There's a problem because I've got form-group as well. And the problem is, col-md-6 before last and the last one doesn't align correctly.
<form action="">
<div class="col-md-1 pull-right text-right padding-right-0">
<div class="action-buttons">
<a href="#" class="pull-right button-edit-content" data-target="#s3">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="form-group col-md-6">
<label for="">label_1</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_2</label>
<input type="text">
</div>
<div class="form-group col-md-6">
<label for="">label_3</label>
<input type="text">
</div>
<div class="form-group col-md-5">
</div>
<div class="form-group col-md-6">
<label for="">label_5</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_6</label>
<input type="text">
</div>
</form>

Try wrapping them in row, like
<div class="row">
<div class="form-group col-md-6">
<label for="">label_1</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_2</label>
<input type="text">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="">label_3</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<div> </div>
</div>
</div>

I think I see what you're trying to do. I think the problem is the empty column which doesn't have a comparable height to the others.
I'd suggest removing that empty column and clearing the left of the following one by adding a class to it as in this fiddle: https://jsfiddle.net/vv807bax/
CSS:
.clearleft {
clear: left;
}
HTML:
<div class="container">
<div class="row">
<form action="">
<div class="col-md-1 pull-right text-right padding-right-0">
<div class="action-buttons">
<a href="#" class="pull-right button-edit-content" data-target="#s3">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="form-group col-md-6">
<label for="">label_1</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_2</label>
<input type="text">
</div>
<div class="form-group col-md-6">
<label for="">label_3</label>
<input type="text">
</div>
<div class="form-group col-md-6 clearleft">
<label for="">label_5</label>
<input type="text">
</div>
<div class="form-group col-md-5">
<label for="">label_6</label>
<input type="text">
</div>
</form>
</div>
</div>

Related

how to align forms via bootstrap

I have contact us page, where i have contact form, but i want align to center. I tried use in more divs and elements add text center, but nothing works. Can you help me? Thanks
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<legend class="text-center header">Contact us</legend>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
<div class="col-md-8">
<input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
<div class="col-md-8">
<textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
You can try this way, hope it will works
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
......
</div>
</div>
</div>

Bootstrap horizontal alignment for different label for form group with error required text

Can anybody tell how to arrange horizontal text box in same row eve though label will be in different line
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label">Roll number <br> Student Code:</label>
<input type="text" class="form-control">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label">School code:</label>
<input type="text" class="form-control ">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label>Year Of Passing:</label>
<input type="text" class="form-control">
</div>
</div>
</div>
You can add w-50 d-inline-block class to input and w-25 to label as below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label w-25">Roll number <br> Student Code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">School code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">Year Of Passing:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
You can wrap input in a div with col-x attribute and add row class to form-group.
An example:
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
The full example here:
https://stackblitz.com/edit/js-bootstrap-css?file=index.html
<div class="row">
<div class="col-12">
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-3 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">School code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">Year Of Passing:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>

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>

Align Labels and Textboxes in Form-Inline

I am using bootstrap's grid system and want to create an inline form.
Here is what I have:
<div class="container body-content">
<form class="well form-inline" style="width: 100%;">
<div class="row">
<div class="form-group col-md-4">
<label>Location:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Assignment:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Incident Number:</label>
<input type="text" class="form-control">
</div>
</div>
<br>
<br>
<div class="row">
<div class="form-group col-md-4">
<label>Date:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Training:</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-4">
<label>Example:</label>
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
When this is ran, there is no structure or alignment for the textboxes or the labels. How can I achieve this?
Here is a bootply
For each label and input you should make this structure:
<div class="form-group col-md-4">
<label class="col-lg-4 control-label">Location:</label>
<div class="col-lg-8">
<input type="text" class="form-control">
</div>
</div>
this will make it work with the grid system
See bootply

Bootstrap input-group removes padding from col-XX-X

I'm trying to create a form that includes an input-group. I use the 'col'-classes of bootstrap to style it, but when this is combined with the 'input-group'-class, the padding of the columns are removed.
I would like the date and name input-field to be aligned.
Here is my JSFiddle
HTML
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Date</label>
<div class="col-sm-4 col-xs-4 input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Name</label>
<div class="col-sm-4 col-xs-4">
<input type="text" class="form-control" />
</div>
</div>
</div>
<br><br>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Date</label>
<div class="col-sm-4 col-xs-4">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Name</label>
<div class="col-sm-4 col-xs-4">
<input type="text" class="form-control" />
</div>
</div>
</div>
Any help is appreciated!
The input-group class should not be combined with any other, as indicated in their examples (http://getbootstrap.com/components/#input-groups):
<div class="row">
<div class="col-lg-6">
<div class="input-group">
[...]
</div>
</div>
</div>
Try this:
<div class="form-group">
<label class="col-sm-2 col-xs-2 control-label">Date</label>
<div class="col-sm-4 col-xs-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>