My two column layout is stacking on top of each other instead of sitting side by side.
Can anyone help me out?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span8">
<img src="img/banner-cat.png" />
</div>
</div>
<div class="row-fluid">
<div class="span4">
<form class="form">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" First Name">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" Last Name">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
You have a bunch of unnecessary divs:
<body>
<div class="row-fluid">
<div class="span8">
<img src="img/banner-cat.png" />
</div>
<div class="span4">
<form class="form">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" First Name">
<label for="name" class="col-sm-2 control-label"></label>
<input type="text" class="form-control" placeholder=" Last Name">
</form>
</div>
</div>
</body>
Basically, anything that should be in a row needs to be within the same row or row-fluid container. This is covered in the documentation: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
Related
I am trying to get a description as to how to use the form directly next to the form.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<h1 class="form-inline" style="text-align: center;">Tester</h1>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput1">Full Name</label>
<input type="name" class="form-control" id="FormControlInput1" placeholder="John Doe">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput2">Phone Number</label>
<input type="phone-number" class="form-control" id="FormControlInput2" placeholder="403-213-4312">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlTextarea1">Required Services</label>
<textarea class="form-control" id="FormControlTextarea1" rows="3"></textarea>
</div>
</div>
</form>
Was hoping to be able to get the "tester" message to the right of the form.
How do I solve the problem?
You can use Bootstrap's grid layout system to manage the layout.
For example:
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<form class="col">
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput1">Full Name</label>
<input type="name" class="form-control" id="FormControlInput1" placeholder="John Doe">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput2">Phone Number</label>
<input type="phone-number" class="form-control" id="FormControlInput2" placeholder="403-213-4312">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlTextarea1">Required Services</label>
<textarea class="form-control" id="FormControlTextarea1" rows="3"></textarea>
</div>
</div>
</form>
<h1 class="col" style="text-align: center;">Tester</h1>
</div>
</div>
</body>
</html>
This would create:
- A container to manage the layout
- A row to manage the form and the h1 as elements that should be positioned next to each other
- The form and the h1 each marked with the col class so that they are auto laid out. You can also use different classes like col-2 col-md-2 etc. to have more control over how many columns each control is allowed to use.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
The two input fields do not align in the same line when i take the label off the second field how can this be corrected ?
Make the label as siblings of the form-group instead if you are planning to use only one label, and you can instead use <span> or any other element, because semantically speaking, <label> is not for this kind of naming, much like using <h1> in Contact Person instead of a <label> with style
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<label for="ex1">Name</label>
<div class="form-group row">
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
Swellar has a good solution in his answer. However, if you are looking for an alternative, you can put a dummy label element and then set its CSS property as visibility: hidden;. So, you don't have to take out your label element from second field, and this label will be hidden.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<h1>Contact Person</h1>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<label for="ex1" style="visibility: hidden;">LName</label>
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</section>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="section-component">
<div class="col-xs-12"><h1>Contact Person</h1> </div>
<div class="form-group">
<div class="col-xs-6 form-field">
<label for="ex1">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
</div>
<div class="form-group">
<div class="col-xs-6 form-field">
<label for="ex2">Last Name</label>
<input class="form-control" id="ex2" placeholder="Last name" type="text">
</div>
</div>
</section>
You have to add a <label> to your last name field.
You should always include a label for better accessibility.
If you don't want to use a label (which is not recommended), you can use flex-box to align it to the bottom:
.form-group: {
align-items: flex-end;
display: flex;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- website templates CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- custom CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- website templates fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group row">
<div class="col-xs-6 form-field">
<label for="ex1" style="margin-bottom:0">Name</label>
<input class="form-control" id="ex1" placeholder="First name" type="text">
</div>
<div class="col-xs-6 form-field">
<label></label>
<input class="form-control" id="ex1" placeholder="Last name" type="text">
</div>
</div>
</form>
</div>
</body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- website template JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- custom date picker JavaScript -->
<script src="/js/myScript1.js"></script>
</html>
HTML
<div class="form-group">
<label class="col-lg-2 control-label">Person Name </label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Enter Person Name ">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Event Title </label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Enter Person Name ">
</div>
</div>
Person Name and Event Title, both have same number of characters that is 11. But still when I see in my webpage. I get Person Name , getting in two lines.
Here is the image for the same.
Thank You.
Update like this :
<label class="col-lg-3 control-label">Person Name </label>
<div class="col-lg-9">
use form-horizontal class to look good in all devices and text in same line.
Large devices : label and input are in one line.
Small devices (mobile) : label comes top of input. and it looks good.
try this.
<!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.7/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.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="Person Name" >Person Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Person Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Event Title">Event Title:</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Person Name">
</div>
</div>
</form>
</div>
</body>
</html>
Just add below code in your css
.control-label{white-space: nowrap;}
I just started with Bootstrap and having an issue with textarea HTML element - it doesn't follow left alignment with other text fields and goes across the entire page instead. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body name="viewport" content="width=device-width, initial-scale=1.0">
<div id="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="name">
Name
</label>
<div class="col-sm-4">
<input class="form-control" type="text" id="name" placeholder="Your name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">
E-mail
</label>
<div class="col-sm-4">
<input class="form-control" type="email" id="email" placeholder="Your email address" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="comment">
Message
</label>
<div class="cols-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input class="btn btn-success" type="submit" value="Send" />
</div>
</div>
</form>
</div>
</body>
</html>
And the result looks like this below.
Textarea too wide and not aligning with other text elements above it
fix this:
<div class="cols-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
to
<div class="col-sm-4">
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
You could add:
.cols-sm-4{
width: 33.33333333%;
margin-left: 15px;
display: inline-block;
}
I'd like to make a bootstrap form that looks good on web and mobile. It seems like the straightforward markup doesn't work well. It's an angular app, but I don't think angular figures in...
One problem is if I try to contain several fields by a div in order to apply a background color, the fields aren't contained, spilling off the left side of the div.
Another problem, related I think, is that the fields appear on mobile with 0px left and right margins, which doesn't look too good.
Here's the markup:
in index .html:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My BS App</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">My BS App</h3>
</div>
<div class="row">
<div class="col-md-6">
<div ng-view></div>
That angular view directive causes the form to be included as follows...
<form class="form-horizontal" name="parentForm" role="form" novalidate mb-submit="save()">
<fieldset>
<div ng-repeat="parent in family.parents()">
<legend>{{parent.firstName}} {{parent.lastName}}</legend>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
<input type="checkbox" ng-checked="parent.list" ng-model="parent.list">List parent</input>
</div>
</div>
</div>
</div>
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
And here's the bad result: see how fields spill off to the left?
On Web....
About what it looks like on mobile...
Try removing the <div class="row"> tags wrapped around your <div class="form-group"> tags. Both classes have negative left and right margins, which are being combined by the nested tags.
Example here.
Add a
<div class="col-md-12">
After your
<div class="row">
in the div containing the background-color:red;.
For example:
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
</div>
Compare your code with the correct code of bootstrap documentation
http://getbootstrap.com/css/#forms