I'm using bootstrap now for my design, earlier I used table, tr and td and it worked fine. But now, the design gets changed and I want to see both elements in a single row.
Here is my code
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
jsfiddle is here
https://jsfiddle.net/Z4ntn/438/
On top of it I would like to build similar kind in another rows.
Plz let me know what went wrong and what needs to be updated to see both in a single row.
Bootstrap says form-inline for elements in same line
like this
<div class="row">
<div class="col-xs-6">
<div class="form-inline">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<input type="text" class="form-control"/>
</div>
</div>
</div>
EDIT
Bootply:
Form-inline
Related
I have the following codes that I want the next line of labels and input boxes to be align with the first row of input boxes. How can I achieve that?
I added the class="col-md-3 col-sm-6" for each row but it doesn't work.
<div style="width: 50%; margin: 20px auto; float:left">
<form action="/view" method="POST" style="white-space: nowrap;">
<div class="form-group form-inline">
<label for="1" class="control-label">Ingot Order</label>
<input type="text" id="1" class="form-control">
<label for="2" class="control-label">Number</label>
<input type="text" id="2" name="number" class="form-control">
</div>
<div class="form-group form-inline">
<label for="3" class="control-label">Date</label>
<input type="text" id="3" class="form-control">
<label for="4" class="control-label">Total Pcs</label>
<input type="text" id="4" class="form-control">
</div>
Update: It seems there's some confusion to the statement that I made. So I updated a picture to show what I want my display to be
The illustration
You need to put each component into it's own col div. That way it keeps them the same width throughout.
See this codepen
So instead of:
<label for="1" class="control-label">Ingot Order</label>
<input type="text" id="1" class="form-control">
You have:
<div class="col-md-2">
<label for="1" class="control-label">Ingot Order</label>
</div>
<div class="col-md-4">
<input type="text" id="1" class="form-control">
</div>
If you're using bootstrap then your form element should have a class container for fixed width containers or container-fluid or flexible containers for col-sm-6 class to work. See this codepen. Read this for more info.
I need to add an "inline" control inside a form-group class in TB3 but I am not able to do it. This is what I've tried without success meaning it does not work as I want:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="new_question" method="POST" class="form-vertical" role="form">
<div class="form-group">
<label for="field_type_id">Select a Question Type</label>
<select class="form-control" id="field_type_id" name="field_type_id">
<option value="">Select One</option>
</select>
</div>
<div class="form-group">
<label for="field_name">Question Text</label>
<textarea class="form-control" name="field_name" id="field_name" rows="4"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Option 1</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value=""> Checkbox
</label>
</div>
</form>
</div>
</div>
</div>
From the snippet/example above I would expect:
Keep the first and second element as it's: the label on the top then the HTML element
Make an inline version of the third element: first have the option, then the HTML, then the checkbox which mean everything in one line.
The idea is to have something like:
Label1 Input1 Checkbox1
Label2 Input2 Checkbox2
Does any knows how to achieve this? It has to be done only in a certain lines so the rest of the form behaves as the form basic example.
For example, you might want to use columns from the Grid system:
<form role="form">
<div class="form-group col-sm-2">
<label>Some label</label>
</div>
<div class="form-group col-sm-2">
<label>E-mail</label>
<input type="email" class="form-control">
</div>
<div class="form-group col-sm-2">
<div class="checkbox">
<label>
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
</div>
</form>
The above example creates 3 equal-width columns using predefined grid class col-sm-2
Create a
Give it a class of Flex
Set the width
<div class='flex'>
<div> item1</div>
<div> item2</div>
<div> item3</div>
</div>
<div class='flex'>
<div> item4</div>
<div> item5</div>
<div> item6</div>
</div>
.flex {
display:flex;
justify-content:center;
align-items: center;
}
https://codepen.io/Codokk101/pen/goQNOW
How do I got about moving the checkbox label above the checkbox?
At the moment the labels are appearing on the left hand side of checkbox and I would like them above the checkboxes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<input type="checkbox" value="">
</div>
</div>
</div>
the answer to your issue is simple. All you have to do is use a "br" tag after each ending "label" tag. In other words, by using the "br" or break tag, you're telling the checkbox to "break" down to the next line that is available.
Your code would look like this...
HTML
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
</div>
Hope that helps!
You can change to structure as below because....
It gives flexibility to place the label and checkbox as per your need.
Not only that but also the Important Reason that why you should wrap <input> inside <label> tag is that the checkbox will function even when you click on label itself rather than only on checkbox as it was earlier.
In this example, with the structure you had, so when you click on "View Statistics" the checkbox will not be checked/unchecked. But, if you wrap <input> inside <label>, then even when you click on label itself, the checkbox functionality is achieved.
You can also refer to JSfiddle if you need https://jsfiddle.net/Dhruvil21_04/2m3asp3k/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics<br>
<input id="viewstats" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs<br>
<input id="viewgraphs" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations<br>
<input id="viewnotifications" type="checkbox" value="">
</label>
</div>
</div>
</div>
I'm relatively new to having to actually style web pages and I'm having an issue with using Bootstrap. As shown in the bootply below, a simple page, using bootstrap columns and some custom styling, causes the labels to overlap the textboxes when the page is resized - for example, try narrowing the width of the page. What am I missing that is causing this behaviour?
http://www.bootply.com/ttuZZWim70
Thanks!
If you're attempting to create a horizontal form, you will want to add the appropriate Bootstrap horizontal form classes. Examples can be found at Horizontal Form. You would want to structure your html similar to the following with form-horizontal class on the form element and each group of labels/inputs with form-group. You can adjust the col-sm-* as necessary to organize your layout. It's best practice to try to get your column definitions col-*-* to add up to 12. Two get two form-group to display on a single row, you can utilize something like col-md-6 wrapped around each form-group.
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Test">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Test">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Here is a jsfiddle showing an example. You will need to extend the results window to be able to see the elements side by side. The horizontal form elements take up quite a bit of room so I might recommend giving each their own separate line similar to example on bootstrap.
Let me know if that helps.
Thanks!
You can try with the below link.
fiddle
<form class="well span12">
<div class="row">
<div class="span6">
<label>Long name test 1</label>
<input type="text" class="span6">
<label>Long name test 3</label>
<input type="text" class="span6">
</div>
<div class="span6">
<label>Long name test 2</label>
<input type="text" class="span6">
<label>Long name test 4</label>
<input type="text" class="span6">
</div>
</div>
</form>
Copy this and paste in your code Dam sure it will work.
<div class="form-group field">
<label>Email Address</label>
<input type="text" class="form-control" placeholder="Email Address">
</div>
I am using the Grid layout in Bootstrap.
How do I make a particular control(say text area) span for 3 rows in this grid design?
Is it possible with Grid layout?
You essentially want to use a nested grid or a form group.
First, split the page into two columns, the left with more than one row and the right with only one row. In the provided example, I demonstrate how you could use a form group in the left column to get the labels/inputs exactly as in your diagram.
<div class="row">
<!-- Left Column -->
<div class="col-sm-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label">Input 1</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Input 2</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Input 3</label>
<div class="col-sm-9">
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
<!-- Right Column -->
<div class="col-sm-6">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
See this working Plnkr example
Note that the plnkr needs to be wide enough to not apply the responsive layout and stack
If instead you wanted to use a nested grid to get the same effect, you would just define a new grid with rows/columns inside the left column.
I did not test this, but try something like this:
<div class="row">
<div class="col-md-9">
<div class="col-md-12">.col-md-12</div>
<div class="col-md-12">.col-md-12</div>
<div class="col-md-12">.col-md-12</div>
</div>
<div class="col-md-3">.col-md-3</div>
</div>
This uses the nested columns, like #user3711852 suggested.