Please look at the following code:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="first">FIRST</label>
<input class="form-control" id="first" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="second">SECOND</label>
<input class="form-control" id="second" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="third">THIRD</label>
<input class="form-control" id="third" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="fourth">FOURTH</label>
<input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
</div>
</form>
</div>
My purpose was to create a form with 4 elements in ONE line.
I wrote this code based on this example: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_inline&stacked=h.
However, I got each one of these elements in a different line. Do you know why this code example didn't work out?
Maybe you need add these scripts and CSS:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Try this:
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-xs-12">
<form class="form-inline" role="form">
<div class="form-group">
<label for="first">FIRST</label>
<input class="form-control" id="first" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="second">SECOND</label>
<input class="form-control" id="second" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="third">THIRD</label>
<input class="form-control" id="third" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="fourth">FOURTH</label>
<input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
</div>
</form>
</div>
</div>
</body>
</html>
This gives you all four in one line...
you have missed div class="col-xs-12" that means all content should
be in one row,
one row have maximum 12 col-xs that we declared.
and i have just tried for you and it is giving me the output like:
If you are testing your form on a viewport of more than 768px width, it will appear in one line. Otherwise it will not.
Test this out with the demo of inline-form on bootstraps website on this link
Excerpt from the above link!
Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
Here is a plunker link that shows that your code when viewed in bigger screens shows up in one line. Click on the full screen link in the plunker and see the result.
Check if your parent container has a width set that is less than 768px.
i think they are too large for the window , try resizing the input boxes to fit the window in one line
or
try this put all the 4 elements in one 'div' tag , i think after displaying one div tag it goes to the next line by default, so use only one div tag
Related
Trying to align two form elements side by side to create an hours per week field
e.g
Hours per week (box here) - (box here)
but when I use two col-md-2 with a - between them I get the result of
Hours per week (box here) (box here) -
Anyone have a solution to display the - between the two boxes? I've tried using 3 col-md-1 but the alignment gets all out of whack!
The below code follows Bootstrap form construction. Using .input-group allows you to nest .input-group-addon between to fields with the .form-control class - though you do need to specify a width (hence the .col-xs-9).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="col-xs-3 control-label" for="HoursPerWeek">Hours Per Week</label>
<div class="col-xs-9">
<div class="input-group">
<input type="text" id="BoxOne" class="form-control">
<span class="input-group-addon">-</span>
<input type="text" id="BoxTwo" class="form-control">
</div>
</div>
</div>
</form>
Solution without the bootstrap grid
<form class="inline">
<div>
<label for="HoursPerWeek">Hours Per Week</label>
<input type="text" id="BoxOne">
<label for="#">-</label>
<input type="text" id="BoxTwo">
</div>
</form>
Solution using the bootstrap grid
<form>
<div class="form-group">
<label class="col-md-3" for="HoursPerWeek">Hours Per Week</label>
<input class="col-md-3" type="text" id="BoxOne">
<label class="col-md-3" for="#">-</label>
<input class="col-md-3" type="text" id="BoxTwo">
</div>
</form>
below is my code
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
i have created two columns in one row
first column has label and under that input box
next column has only label and it should be aligned inline with input box, but since only label was there it used to display on top. So i wrote one dummy label. Still it is not aligned with input box.
how to do this? Is there any way to do it in bootstrap?
Add between label. There should be some content inside label to make it work. So just add html code of empty space.
<label> </label>
However a better approach will be without bootstrap columns and using custom css as follows:
.column-holder {
table-layout: fixed;
display: table;
width: 100%;
}
.column-holder .column {
vertical-align: bottom;
display: table-cell;
padding: 0 15px;
}
label {
display: block;
}
input {
display: block;
width: 100%;
}
<div class="column-holder">
<div class="column">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="column">
<label>test</label>
</div>
</div>
Without Bootstrap :
that is happens because you put every label inside same div tag again and again.
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
when you remove those two same div tags or put all labels and input tag inside a single label then all elements will gets inline automatically.
HOW TO DO :
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
Using Bootstrap :
Yes you can do same thing using bootstrap even that is more easy and looks more beautiful. here is a simple example for you.
copy this code and run with chrome or firefox or safari this code will work perfectly
you can visit this site:for more detail
or check this outinline form using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Example of inline form</h2>
<form class="form-inline" role="form">
<div class="form-group">
<label >Name : </label>
<input type="email" class="form-control" id="name" placeholder="Enter your name ">
</div>
<div class="form-group">
<label for="email">Email : </label>
<input type="password" class="form-control" id="email" placeholder="enter your email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
I created this page with bootstrap but it only responsive when I am changing the size of the browser's width. When I am changing the height of the browser, it is not responsive. What I did wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="fullname">Name</label>
<input type="text" id="fullname" name="fullname" class="form-control"/>
</div>
<div class="form-group">
<label for="comments">Comments</label>
<textarea rows="5" cols="40" id="comments" name="comments" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="luckynumber">Lucky Number</label>
<select name="luckynumber" id="luckynumber" class="form-control">
<option>double zero</option>
<option>seven</option>
<option>thirteen</option>
</select>
</div>
<div class="checkbox">
<label><input type="checkbox" value="dog"/>Own a dog</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="cat"/>Own a cat</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="owned"/>Owned by a cat</label>
</div>
<span><b>Your favorite weather?</b></span><br/>
<div class="radio">
<label><input type="radio" name="count" value="hot"/>hot</label>
</div>
<div class="radio">
<label><input type="radio" name="count" value="cold"/>cold</label>
</div>
<div class="radio">
<label><input type="radio" name="count" value="rainy"/>rainy</label>
</div>
<input type="submit" class="btn btn-primary" value="submit"/>
</form>
</body>
</html>
Twitter Bootstrap framework responsiveness is based on the viewport width, not height. You will have to use your own approach to handle this. Perhaps setting the body and html in your css to height: 100% may be a start. But as I said, with Bootstrap alone, you won't be able to create responsiveness based in the height of the viewport.
Bootstrap is based on media queries.
For example:
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
It depends only on the width.
If you want use it by height check this response: Twitter Bootstrap 3 responsive full height grid
I have a form and I want to keep 2 or 3 controls in line in the same row, for example:
label1
r1_ctrl1 r1_ctrl2 r1_ctrl3
label2
r2_ctrl1 r2_ctrl2 r2_ctrl3
I tried to do it this way:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<select .../>
<a ... />
</div>
</form>
and it does not work.
I also tried:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<div class="controls form-inline"
<select .../>
<a ... />
</div>
</div>
</form>
And also no result.
The only working method is Html table, but the result is really ugly. Please advise.
If you want controls on the same row you shouldn't use:
.form-horizontal
but
.form-inline
http://getbootstrap.com/css/#forms-inline
This is what .form-horizontal does:
Individual form controls automatically receive some global styling. All textual , , and elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
And this is what .form-inline does:
Add .form-inline to your for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
I would take advantage of Bootstrap's flexible grid layout:
<div class="row">
<form>
<div class="col-xs-12">
<h3>Heading 1</h3>
</div>
<div class="col-xs-4 form-group">
<label for="input1">
<input id="input1" class="form-control" value="Control 1"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input2">
<input id="input2" class="form-control" value="Control 2"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input3">
<input id="input3" class="form-control" value="Control 3"></input>
</label>
</div>
</form>
</div>
Demo
Notice that I've changed your label to a heading. Each input should have its own label (with an appropriate for attribute) for accessibility. In this demo, the for attributes aren't strictly necessary as the labels wrap the inputs.
I'm developing a form in Bootstrap 3 that is to have a series of text controls and an image. The form takes up 100% of its container, and the text inputs also are set to 100% width. This works well when I don't have to worry about an image. I use the bootstrap .form-control and .form-horizontal classes to make it work (code at the bottom):
Current Look
I need to put the image to the right of these form controls and decrease their width appropriately:
Mockup
I would simply put in another column in Bootstrap's grid system to handle this, but I'd also like the columns to go back up to full width when the image is done, as shown in the mockup image above. Something similar to the "tight" image layout in Microsoft Word. I've tried setting float:right; and display:inline-block' to the image class but it doesn't turn out correctly:
Not Working Yet
Anyone know how to make the design work like how I described it in the mockup?
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h2>New Guest</h2>
<form class="form-horizontal" role="form">
<img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" />
<div class="form-group" id="group-tbFirstName">
<label for="tbFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" />
</div>
</div>
<div class="form-group" id="group-tbLastName">
<label for="tbLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" />
</div>
</div>
<div class="form-group" id="group-optGender">
<label for="optGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="optGender" placeholder="Gender" value="" />
</div>
</div>
<div class="form-group" id="group-tbAge">
<label for="tbAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" />
</div>
</div>
<div class="form-group" id="group-dtDateOfBirth">
<label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" />
</div>
</div>
</form>
</div>
</body>
</html>
The specific effect I'm going for is to have the inputs below the image expand out to 100% again. Like this:
I know that the image can be floated but I don't want all the inputs below it at the same width as the ones on the lines with the image. I want them to expand.
You just need to add some floats to the image and also to the form, as in the following:
(FIDDLE)
HTML
<img class="img-right">
<form class="form-horizontal">
</form>
CSS
.img-right {
float: right;
max-width: 200px;
padding-left: 20px }
.form-horizontal {
float: right }
Have you tried putting the first 3 or 4 inputs and the image in their own row? This will cause the row to expand out to the width of the container and keep your image on the right. You can also add the class class="img-responsive" to the image so that it will shrink down as the screen shrinks.
<div class="row">
<div class="col-sm-8">
//inputs go here
</div>
<div class="col-sm-4">
//image goes here
</div>
</div>
<div class="row">
<div class="col-sm-12>
//the rest of your inputs here
</div>
</div>
I see many kinds of format column in your code. This makes it behave uncontrollable.
Try to use one format only, say, class="col-lg-6.
As long as I know, bootstrap use 100% for form-control, we can modify it by choosing the suitable class of columns.
To handle your need, you can create new CSS file. place it below the bootstrap.min.css. Then Float the image to the right and set the min-width and max width in % to make it resized automatically based on browser's windows.
Besides, use class='img-responsive' inside the image attr to make it resized auto.
Use float property float: right;
.img-right {
float: right;
max-width: 200px;
padding-left: 20px;
}
.form-horizontal {
float: right;
}
<img class="img-right">
<form class="form-horizontal">
</form>