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
Related
I have 2 HTML containers, but because I have span elements followed by a text input (I think this is the issue?), I'm unable to get the content in the containers centered how I want. Is there a way to push the margin or padding in on these elements? Or is there a simpler way. In the JSFiddle, they spans are pretty large, but I'd like them to be around the size of the picture below. I'm using bootstrap.
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/oy4u1sm9/4/
Idealformatting (without the large span element, of course)
Using <span> tags as labels is not best practice as they are inline elements. Try to always use <label> tags. Here is your code tweaked to match your desired styling. More comments in the fiddle below.
<div class="row mb-5">
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
</div>
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div>
</div>
I made some comments in the code for clarity. Here you go:
https://jsfiddle.net/hmLpdnqa/
You just included wrong bootstrap file. Try this and see your issue resolved or not.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<!-- ROW 1 -->
<div class="row">
<div class="col" align="center">
<h2>TITLE</h2> </div>
<div class="col" align="center">
<h2>TITLE</h2></div>
</div> <!-- ROW 1 -->
<!-- ROW 2 -->
<div class="row">
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div> <!-- ROW 2 -->
<br>
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
</div>
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;}
How to make responsive site in which labels in one div and corresponding text box in other. I have written a small piece of code.Its working(for md device) but when window size is resized its format is not correct(Both labels are clubbed together).How to correct this (for xs devices)? PFB the screenshot.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form role="form">
<div class="row">
<label class="col-md-4 col-xs-12" for="TextArea">Text Area</label>
<label class="col-md-4 col-xs-12" for="TextArea">Text Area</label>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
<div class="col-md-4 col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
You should put your labels inside each div containing the textarea tag.
<form role="form">
<div class="row">
<div class="col-md-4 col-xs-12">
<label for="TextArea1">Text Area</label>
<textarea class="form-control" id="TextArea1"></textarea>
</div>
<div class="col-md-4 col-xs-12">
<label for="TextArea2">Text Area</label>
<textarea class="form-control" id="TextArea2"></textarea>
</div>
</div>
</form>
Test it here (slide JSFiddles vertical axis to simulate the environment size you need)
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
I am still learning the proper use of Bootstrap 3 and was wondering if you all could help me out. I would like a layout something like this:
Label Label
Textbox Textbox
Label Label
Textbox Textbox
Label Label
Textbox Textbox Textarea
I know that if I use the .form-group it will allow me to accomplish the Label over the top of the textbox. How can I assure that this happens in a column yet allows for some inline things like the example with the two textboxes alongside each other?
As mentioned earlier, you can use the grid system to layout your inputs and labels anyway that you want. The trick is to remember that you can use rows within your columns to break them into twelfths as well.
The example below is one possible way to accomplish your goal and will put the two text boxes near Label3 on the same line when the screen is small or larger.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text"/>
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text"/>
</div>
<div class="col-xs-6">
<div class="row">
<label class="col-xs-12">Label3</label>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<input class="form-control" type="text"/>
</div>
<div class="col-xs-12 col-sm-6">
<input class="form-control" type="text"/>
</div>
</div>
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text"/>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
http://jsfiddle.net/m3u8bjv0/2/
You could use the bootstrap grid system :
<div class="col-md-6 form-group">
<label for="textbox1">Label1</label>
<input class="form-control" id="textbox1" type="text"/>
</div>
<div class="col-md-6 form-group">
<label for="textbox2">Label2</label>
<input class="form-control" id="textbox2" type="text"/>
</div>
<span class="clearfix">
http://getbootstrap.com/css/#grid
Is that what you want to achieve?
You can use the bootstrap grid system. as Yoann said
<div class="container">
<div class="row">
<form role="form">
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Name">
</div>
<div class="clearfix"></div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
</form>
<div class="clearfix">
</div>
</div>
</div>