I'm making a simple form with this code:
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<label class="col-2">Name:</label>
<input class="form-control col-10" type="text" />
</div>
</div>
It looks like this:
You can see that the input does not align with the jumbotron, and that is because the input doesn't stop at the padding:
How do I fix this?
Here you go with the solution
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<div class="col-2">
<label>Name:</label>
</div>
<div class="col-10">
<input class="form-control" type="text" />
</div>
</div>
</div>
You should use col-* inside a div tag
Column classes should be given to the elements surrounding the input controls (and labels). The Bootstrap grid system works best as follows:
div.container > div.row > div.col-* > content
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<div class="col-2">
<label>Name:</label>
</div>
<div class="col-10">
<input class="form-control" type="text" />
</div>
</div>
</div>
You have added Bootstrap's predefined grid classes in input element. So, Grid classes padding apply in input element. You will need to create grid classes with separate div element. then put input element inside this div element.
<div class="container">
<div class="jumbotron" style="width:100%">
<h1>
ConfigTool Web Interface
</h1>
<p>
Edit the config variables here and click save.
</p>
</div>
<div class="form-group row">
<label class="col-2">Name:</label>
<div class="col-10">
<input class="form-control" type="text" />
</div>
</div>
</div>
also, Please check this official bootstrap Horizontal Form
You are missing the parent element for the form-group. Try this -
<div class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
</div>
You need to remove the "row" class from the form-group. the row class basically remove the padding from the div element.
<div class="form-group">
<label class="col-2">Name:</label>
<input class="form-control col-10" type="text" />
</div>
Related
I have this layout
<div class="container-fluid header">
<div class="row">
<div class="col-md-4">
<label>Date From</label>
<input type="text" class="form-control" bsDatepicker [(bsValue)]="dateFrom" [minDate]="currentDate">
</div>
</div>
</div>
after that the label is on top of the input. I can't find a way so in this same col-md-4, the label to be
next to the input - inline. So they show together in the same line.
How can i make this and to preserve the responsivness of the col bootstrap class ?
Add form tag with inline class.
<div class="container-fluid">
<div class="row">
<form class="form-inline">
<div class="col-md-4 form-group ">
<label>Date From</label>
<input type="text" class="form-control" bsDatepicker [(bsValue)]="dateFrom" [minDate]="currentDate">
</div>
</form>
</div>
Please note that I am a developer, not a designer.
I need to separate card div for two columns in desktop mode. I mean "This should be in Left Side" should be display on left side and "This should be on right side" should be display on right side.
I use following HTML.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>
</div>
</div>
If you want to test online here is the jsfiddle (https://jsfiddle.net/uxfjwhpc/1/).
What is my mistake and how to correct it?
The classes col-* works when they are wrapped under row class. You can find the updated code below for card-block div. Hope this helps.
<div class="card-block">
<div class="row">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>
</div>
</div>
<div class="row card-block">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>
</div>
This will work for you.
I have the same issue with adding Form inside Card in Bootstrap. Here is my implementation.
From the original bootstrap standard form implementation:
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</form>
I need to adjust it to this to work:
<form action="/action_page.php">
<div class="row">
<label for="email" class="col-md-2">Email:</label>
<input type="email" class="form-control col-md-10" id="email" placeholder="Enter email" name="email">
</div>
</form>
I need to change form-group class to row class to make sure form-horizontal class should work fine inside the card of bootstrap.
Just started learning Bootstrap and for example have designed this form like this, I want to know if those column numbers even make sense according to each other?
<form class="form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</div>
</div>
</form>
See here the difference of what I explained in comments :
In your case, a more proper structure could be :
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-sm-6">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</form>
</div>
</div>
And you have to add a .container or .container-fluid class around your .row
You can have .row as much as you wants in a single .container class.
See your code on a bootply fiddle
On my website http://createabundance.ca, inside the payment form that is shown when any of the orange buttons are clicked, the text fields are not selectable on mobile safari or chrome, but work without issue on desktop safari, and chrome.
Screenshot: http://d.pr/i/nrBu
Any ideas as to what the issue might be?
You have form fields like this
<div class="form-row">
<div class="col-xs-12 form-group required">
<input name="email" class="form-control" size="4" placeholder="邮件地址" type="email">
</div>
</div>
remove col-xs-12 from <div class="col-xs-12 form-group required"> and put it in separate div <div class="col-xs-12"> like below
<div class="form-row">
<div class="col-xs-12">
<div class="form-group required">
<input name="name" class="form-control" size="4" placeholder="姓名" type="text">
</div>
</div>
</div>
and it will fix the problem when form opens in mobile
sidenote: class="form-row" has no css property so totally remove this <div class="form-row"> because it severing no purpose
<div class="col-xs-12">
<div class="form-group required">
<input name="name" class="form-control" size="4" placeholder="姓名" type="text">
</div>
</div>
but if you want to use <div class="form-row"> then
<div class="col-xs-12">
<div class="form-row">
<div class="form-group required">
<input name="name" class="form-control" size="4" placeholder="姓名" type="text">
</div>
</div>
</div>
I have two input boxes that I am trying to get side by side on the row but I'd like there still to be a gap between the boxes but flush to the sides of the container.
Is there a way using just Bootstrap to do this? The container is a replication of a mobile device.
<div class="group col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="row">
<input type="text" name="first-name" ng-model="user.firstname" />
</div>
</div>
<div class="col-sm-6">
<div class="row">
<input type="text" name="last-name" ng-model="user.surname" />
</div>
</div>
</div>
</div>
plunkr example
Bootstrap has a few different grid classes. col-<size>-<num> where <size> can be xs, sm, md, or lg, and <num> can be an integer between (and including) 1-12.
For mobile devices, you'll want to use xs. If you don't specify any of the larger sizes, then they'll use the same widths as the smaller one. If you change col-sm-12 to col-xs-12 and col-sm-6 to col-xs-6 I think you'll get the result you're looking for.
It also helps your inputs look more consistent and more easily themed if you give them the form-control class.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="group col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="first-name" />
</div>
</div>
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="last-name" />
</div>
</div>
</div>
</div>
I'm not familiar with Bootstrap, but one way to achieve it would be to add this to your CSS:
.col-sm-6, .col-sm-6 .row, .col-sm-6 .row input {
display: inline-block;
}
I am not sure if I understand your question correctly. You need a space between the text box side by side right? if so try this code. You could also use col-xs-offset-1 for space between grid. This will allow you to push 1 grid away. example http://www.bootply.com/U6vlrIktq2
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<div class="col-md-4 ">
<input type="text" class="form-control"><br>
</div>
<!-- for more spacing between boxes-->
<div class="col-xs-5">
<input type="text" class="form-control">
</div>
<div class="col-xs-5 col-xs-offset-1">
<input type="text" class="form-control">
</div>