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;}
Related
I have two input fields for the user to fill namely username and password. This is how it looks like
Here is the code below for the same
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</form>
</div>
</body>
</html>
Now I want the Email and Password to be aligned vertically just like the input fields are aligned.
I read about form-control-static but I am unable to see the effect here. I tried using it for the classes for Email and Password something like
<label class="control-label col-sm-2 form-control-static" for="pwd">Password:</label>
But I do not see any change. What am I doing wrong?
Note: I am using Bootstrap 3
The above style is coming from Bootstrap 3 only, "Text-align:right"
#media (min-width: 768px)
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
If you want to align labels to left, override the above property in your code as follows:
#media (min-width: 768px)
.form-horizontal .control-label {
text-align: left;
}
Your code seems to work as expected..., try verifying if you have made any css changes...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class=" col-sm-2 col-xs-3" for="email">Email:</label>
<div class="col-sm-3 col-xs-3">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class=" col-sm-2 col-xs-3" for="pwd">Password:</label>
<div class="col-sm-3 col-xs-3">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</form>
</div>
UPDATE the control-label class is by default aligning items to the right on bigger screens.. to solve it you can remove it.. or use bootstrap alingment classes...
How can I add a label to my checkbox's so that I can have them inline.
I am wanting it like this:
label input input
Currently the code below is showing like input input label why?
HTML:
<div class="col-md-6 pull-right">
<div class="form-group">
<label>Gender</label> <label class=
"col-sm-2 checkbox-inline"><input id="genMale" type="checkbox"
value="genMale">Male</label> <label class=
"col-sm-2 checkbox-inline"><input id="genFemale" type=
"checkbox" value="genFemale">Female</label>
</div>
</div>
The gender label is not within the grid. Add the class col-sm-2 to the label.
<label class="col-sm-2">Gender</label>
Here's a snippet:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-md-6 pull-right">
<div class="form-group">
<label class="col-sm-2">Gender</label>
<label class="col-sm-2 checkbox-inline">
<input id="genMale" type="checkbox" value="genMale">Male</label>
<label class="col-sm-2 checkbox-inline">
<input id="genFemale" type="checkbox" value="genFemale">Female</label>
</div>
</div>
You can do like. I think this will perfectly work for you.
Happy Coding :-) ;-)
<!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>Inline Check Box</h2>
<form class="form-inline" role="form">
<div class="checkbox">
<label>Gender</label>
</div>
<div class="checkbox">
<label> Male <input type="checkbox"></label>
</div>
<div class="checkbox">
<label> Female <input type="checkbox"></label>
</div>
</form>
</div>
</body>
</html>
is this is what you need ? Or am i wrong ?
You had the pull right, i deleted it
<div class="col-md-6">
You can try this.
<label style="float:left;margin-right:15px;">Gender</label>
You can also try this....
<label class="pull-left">Gender</label>
MB You mean something like this?
<div class="col-md-6 pull-right">
<div class="form-group">
<label>Gender</label> <br><br>
<input id="genMale" type="checkbox" value="genMale" name="male">
<label for="male" class="col-sm-2 checkbox-inline">Male</label>
<input id="genFemale" type="checkbox" value="genFemale" name="Female">
<label for="Female" class="col-sm-2 checkbox-inline">Female</label>
</div>
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;
}
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>