I want to line up label and input tags.
<div class="form-group row">
<label class="form-control-label"
for="field_hasSernum">Has Sernum</label>
<input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
</div>
But the "input" is located under "label" tag
If you review Bootstrap's documentation on its form layout they recommend incorporating their grid system to align your label / input in a horizontal fashion:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group form-row">
<label class="form-control-label col-2" for="field_hasSernum">Has Sernum</label>
<div class="col-10">
<input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
</div>
</div>
It's really that simple! You can take advantage of all of Bootstrap's grid system to better fine-tune the display on different device sizes, aligning things in different fashions, etc.
You need to specify .col class to make horizontal form.
Ref: https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form
Snippet:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group row">
<div class="col-3">
<label class="form-control-label" for="field_hasSernum">Has Sernum</label>
</div>
<div class="col-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="hasSernum" id="field_hasSernum">
</div>
</div>
</div>
Related
How do I centering this form? No matter what I've tried (changing around the div classes, the styles, etc. it still does not center).
I've tried looking at using flex box and other tools but regardless of what I do, if something gets centered, the input field stays to the far left.
<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 text-center">
<form>
<div class="fc">
<div class="fg cg">
<h3>
Name
</h3>
<input class="fc"style="width: 35%" type="text"></input>
</div>
<div class="fa">
<input class="btn" type="submit" value="Submit"></input>
</div>
</div>
</form>
</div>
You just need to make the form a column, then .text-center works:
<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 text-center">
<form class="col-12">
<h3>
Name
</h3>
<input class="fc" style="width: 35%" type="text"></input>
<br/>
<input class="btn" type="submit" value="Submit" />
</form>
</div>
<div class="row text-center">
<form>
<h3>
Name
</h3>
<input class="form-control" type="text">
<input class="btn" type="submit" value="Submit">
</form>
</div>
Add margin: 0 auto; like #Sysix has said in the comments
<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 text-center">
<form style="margin: 0 auto">
<div class="fg cg">
<h3>
Name
</h3>
<input class="fc"style="width: 35%" type="text"></input>
<div class="fa">
<input class="btn" type="submit" value="Submit"></input>
</div>
</div>
</form>
</div>
Use this in the style
margin-left:auto;margin-right:auto;
Will also center anything for future reference
Also someone has already asked this before here:
Centering a form in bootstrap not working
Well there are many ways of centering. But since you are using Bootstrap I thought I'd try it using Bootstrap classes.
I use the grid system to build a row with one big column spanning the entire row. I wrap the form in a div with a utility class d-flex and modify it with justify-content-center to center it.
Inside the form I use the form-row. Then use form-group to indicate a column inside the form-row. To fix formatting I put form-control on the input.
And finally I put the button on a seperate form-row. This solves your problem with only bootstrap.
<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-12">
<div class="d-flex justify-content-center">
<form>
<div class="form-row">
<div class="form-group">
<label for="name">Name</label>
<input id="name" class="form-control" type="text">
</div>
</div>
<div class="form-row">
<div>
<button class="btn" type="submit">Submit</btn>
</div>
</div>
</form>
</div>
</div>
</div>
I am currently building a form in bootstrap 4, however, I am unable to shift the label to the left and the checkbox to the right.
Using bootstrap 4.3.1 :
#checkAll { float: right;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="row no-gutters">
<div class="form-group form-check-inline">
<label for="checkAll" class="form-check-label generalFrontLabel">Check all :</label>
<input type="checkbox" id="checkAll" class="pull-right generalCheckBox">
</div>
</div>
I have tried using a pull-right class on the HTML but it doesn't work as well, I managed to make it work by add margin-left for the checkbox but it does not align well on different computers.
An example of what I am trying to achieve without bootstrap
https://jsfiddle.net/wfkey98r/
Try to do something like this.
<div class="container">
<h2>Form control: checkbox</h2>
<p>The form below contains three checkboxes. The last option is disabled:</p>
<form>
<div class="checkbox">
<label style="margin-right: 10px;">Option 1:</label><input type="checkbox" value="">
</div>
<div class="checkbox">
<label style="margin-right: 10px;">Option 2:</label><input type="checkbox" value="">
</div>
</form>
</div>
I need small white space between two text boxes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row col-lg-12 col-sm-12">
<div class="input-group col-md-8">
<span class="control-label">Product Name*</span>
<input type="text" class="form-control" placeholder="Product Name" id="productname" required>
</div>
<div class="input-group col-md-4" style=>
<span class="control-label">Short Name*</span>
<input type="text" class="form-control" placeholder="ShortName" id="shortname" required>
</div>
</div>
Are you want space between the textbox? i mean in small device it having in two row .so there is add mt-3(margin-top) for below margin to each input-group
Is this issue?
Add mt-3(margin-top) to each input-group and also add a width to span for correct alignment like this span{width:130px;}
span{
width:130px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="input-group col-12 mt-3">
<span class="control-label d-flex h-100 align-items-center">Product Name* </span>
<input type="text" class="form-control" placeholder="Product Name" id="productname" required>
</div>
<div class="input-group col-12 mt-3" style=>
<span class="control-label d-flex h-100 align-items-center">Short Name* </span>
<input type="text" class="form-control"placeholder="ShortName" id="shortname" required>
</div>
</div>
</div>
You may use margin or padding class on your span element :
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row col-lg-12 col-sm-12">
<div class="input-group col-md-8">
<span class="control-label px-1">Product Name*</span>
<input type="text" class="form-control" placeholder="Product Name" id="productname" required>
</div>
<div class="input-group col-md-4" style=>
<span class="control-label px-1">Short Name*</span>
<input type="text" class="form-control" placeholder="ShortName" id="shortname" required>
</div>
</div>
https://getbootstrap.com/docs/4.5/utilities/spacing/
Spacing
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
How it works
Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.
I am trying to get responsiveness with simple Bootstrap. Responsiveness works only when I use the first word with more than 15 characters as shown below.
<!-- Headers -->
<div class="container">
<div class="row justify-content-center">
<div class="col">
<p>1234567</p> <!---- not responsive-->
<p>123456789012345 there is difference between knowing
the path and walking the path</p> <!-- responsiveness -->
</div>
<div class="col">
<form> ...</form>
</div>
How to get responsiveness without having change length of the first word of the a sentence.
I think you need to understand how the bootstrap grid system works. So I think the following link will help you to study the bootstrap.
If you want to study the bootstrap 3 then refer the following link of Bootstrap 3 grid system will help you.
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
If you want to study the bootstrap 4 then refer the following link of Bootstrap 4 grid system will help you.
https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
Also, you need to learn media queries, that will help you to design a responsive layout. Refer the following link for understanding media queries and breakpoints.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
According to your layout in the image, the following code will help you. Run the code snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 text-center">
<p>1234567</p> <!---- not responsive-->
<p>123456789012345 there is difference between knowing
the path and walking the path</p> <!-- responsiveness -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 reg_form">
<form class="text-center">
<h4> Registration </h4>
<input type="email" class="form-control" placeholder="Email" required>
<input type="password" class="form-control" placeholder="Enter Password" required>
<input type="password" class="form-control" placeholder="Confirm Password" required>
<input type="checkbox"> I agree. <br>
<input type="submit" class="btn btn-info">
</form>
</div>
I wonder what is best approach to obtain date from date to layot.
So it should be something like:
float center for below two lines
<label for date from><input datepicker> <label for date to><input datepicker>//line 1
<button>//line 2
I've build already(with blessing of bootstrap):
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="float-right">
<span>date from</span>
<input>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="float-left">
<span>date to</span>
<input>
</div>
</div>
</div>
and that almost fits my needs, beside that on mobiles floats destroy whole layout. I think that those float divs should have some how dynamic float depends on resolution or better solution to make on small resolution width 100% for both span and input to create moblie layout like:
label from
input
label to
input
If You already have this one. If you have any question regarding this. ask me in comment. If I have Make any mistake. Please comment below I will try my best to solve your problem. Good luck.
$(document).ready(function () {
$('.pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
.right{float:right !important;}
.col-sm-12{width:50% !important;}
#media only screen and (max-width:768px) {
.col-sm-12{width:100% !important;}
.right{float:none !important;}
input.pickyDate{width:100%;}
/*Usefull class*/
.topMar {
margin-top: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="right">
<span class="lable">date from</span>
<input type="text" placeholder="click to show datepicker" class="pickyDate" />
</div>
</div>
<div class="col-md-6 col-sm-12 topMar">
<span class="lable">date to</span>
<input type="text" placeholder="click to show datepicker" class="pickyDate" />
</div>
</div>
</div>
</body>
If I understand correctly, you shouldn't need to use floats at all. Bootstrap will automatically take care of the alignment of your <div>s. Just reverse the order of your two input fields; the first one will be on the left.
I found nice solution using botstrap css
<form class="form-inline text-center">
<div class="form-group">
<label for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>