I have a page here to illustrate my question.
http://www.ttmt.org.uk/bootstrap-form/
It's a simple 2 column layout with a form in the right column
The form is in 2 columns also.
I would like the form columns to be half the with of the column it's in.
So the name input would be half the with of the right column and email input would be the remaining half.
How do I code this using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.box{
height: 500px;
}
.left{
background: #aaa;
}
.right{
background: #ccc;
padding: 50px 0 0 0;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="row">
<div class="col-sm-6 left box">
</div>
<div class="col-sm-6 right box">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" placeholder="name" class="form-control">
<input type="text" placeholder="email" class="form-control">
</div>
<div class="form-group">
<input type="text" placeholder="phone number" class="form-control">
<input type="text" placeholder="company" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Add this CSS
<style type="text/css">
.form-inline .form-control
{
width: 100%;
}
</style>
and change some classes
<div class="row col-sm-12">
<div class="col-sm-6 left box"></div>
<div class="col-sm-6 right box">
<form class="form-inline col-sm-12">
<div class="form-group col-sm-6">
<input class="form-control col-sm-6" placeholder="name"
type="text">
</div>
<div class="form-group col-sm-6">
<input class="form-control col-sm-6" placeholder="email"
type="text">
</div>
<div class="form-group col-sm-6">
<input class="form-control col-sm-6" placeholder=
"phone number" type="text">
</div>
<div class="form-group col-sm-6">
<input class="form-control col-sm-6" placeholder="company"
type="text">
</div>
</form>
</div>
</div>
Let me know if it works
Happy Coding !!!
Related
I am having a slight issue with my textarea in html, when I add the Placeholder attribute it doesn't seem to be visible until I highlight and press backspace also the cursor appears further away from the initial leftmost position.
<html>
<head>
<title>
Post a Task
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="card" style="width: 50rem; margin-top: -40px; padding: 20px; margin: auto;">
<div class="card-body">
<h5 class="card-title text-center" id="Signup_Title">POST YOUR TASK </h5>
<!--<h6 class="card-title text-center" id="Signup_Sub_Title"></h6>-->
<form>
<div id="formpage_1">
<div class="form-row">
<div class="form-group col-md-12">
<label>Brief Title:</label>
<textarea class="form-control" cols="50" rows="2" placeholder="Brief Title">
</textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Detailed Description:</label>
<textarea class="form-control" cols="50" rows="8" placeholder="Detailed Description">
</textarea>
</div>
</div>
<div class="form-group">
<button type="menu" class="btn btn-primary form-control"
style="background-color:#f9d342 ; color:#252218 ; border: none; width: 30%;">Attach File
</button>
</div>
</div>
</body>
</html>
<html>
<head>
<title>
Post a Task
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="card" style="width: 50rem; margin-top: -40px; padding: 20px; margin: auto;">
<div class="card-body">
<h5 class="card-title text-center" id="Signup_Title">POST YOUR TASK </h5>
<!--<h6 class="card-title text-center" id="Signup_Sub_Title"></h6>-->
<form>
<div id="formpage_1">
<div class="form-row">
<div class="form-group col-md-12">
<label>Brief Title:</label>
<textarea class="form-control" cols="50" rows="2" placeholder="Brief Title"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Detailed Description:</label>
<textarea class="form-control" cols="50" rows="8" placeholder="Detailed Description"></textarea>
</div>
</div>
<div class="form-group">
<button type="menu" class="btn btn-primary form-control"
style="background-color:#f9d342 ; color:#252218 ; border: none; width: 30%;">Attach File
</button>
</div>
REMOVED WHITE SPACE
I am designing a responsive web page which contains a form.
But all the input elements are getting out of the form from left and right.
Can anyone tell me, What is the reason behind this.?
My Demo Code ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Temp Pages for Testing </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
.custFrmOnlyBkCol { background-color: lightgray; }
</style>
</head>
<body>
<div class="jumbotron">
<div class="col-md-12">
<form action="#" class="custFrmOnlyBkCol">
<!-- In Css : .custFrmOnlyBkCol { background-color: lightgray; } -->
<div class="form-group row">
<label class="col-3 text-right">Id</label>
<div>
<p>101</p>
</div>
</div>
<div class="form-group row">
<label class="col-3 text-right" for="">First Name</label>
<input type="text" class="form-control col-md-9">
</div>
<div class="form-group row">
<label class="col-3 text-right" for="">Last Name</label>
<input type="text" class="form-control col-md-9">
</div>
<input class="form-control offset-md-3 col-md-6 btn btn-primary" type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
Set the widths of the input
input {
width: x%;
}
</style>
You should put input tags inside a div with row class like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Temp Pages for Testing </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
.custFrmOnlyBkCol { background-color: lightgray; }
</style>
</head>
<body>
<div class="jumbotron">
<div class="col-md-12">
<form action="#" class="custFrmOnlyBkCol">
<!-- In Css : .custFrmOnlyBkCol { background-color: lightgray; } -->
<div class="row col-md-10">
<label for="" class="col-md-3 text-right">First Name</label>
<input type="text" class="form-control col-md-9">
</div>
<div class="row col-md-10">
<label for="" class="col-md-3 text-right">Last Name</label>
<input type="text" class="form-control col-md-9">
</div>
<input class="form-control offset-md-3 col-md-6 btn btn-primary" type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
I'm working on a registration form and I have a problem when I want to make input["text"] (year) and select item (day and month) on the same line, this what I'm getting :
registration form
I want to delete the margin on the bottom of the select tag (added by default ) by adding a margin on the top, so I add this :
input[type="email"],
input[type="password"],
input[type="text"],
select {
display: block;
width: 80%;
height: 30px;
text-align: center;
border: none;
font-size: 1em;
color: #313A3D;
background-color: #E8E9EA;
margin-top: 10px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/styleAuth.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<header>
<div class="navbartop">
<!--<a class="title" href="./auth.html" >title of the template</a>-->
<a class="item selected" href="#auth">Authentification</a>
<a class="item" href="#register">register</a>
<a class="item" href="#newsleter">newsleter</a>
<a class="item" href="#comments">Comments</a>
</div>
</header>
<section class="secondSection">
<div class="registerPanel">
<div class="row topbuffer">
<div class="col-md-6"><input type="text" name="fn" placeholder="first name" /> </div>
<div class="col-md-6"><input type="text" name="ln" placeholder="last name" /></div>
</div>
<div class="row topBuffer">
<div class="col-md-4">
<select>
<option selected="">day</option>
<option>1...31</option>
</select>
</div>
<div class="col-md-4">
<select>
<option>month</option>
<option>1...12</option>
</select>
</div>
<div class="col-md-4">
<input type="text" name="y" placeholder="year" />
</div>
</div>
<div class="row topBuffer">
<div class="col-md-12"><input type="email" name="email" placeholder="email" /></div>
</div>
<div class="row topBuffer">
<div class="col-md-6"><input type="password" name="pw1" placeholder="enter your password" /></div>
<div class="col-md-6"><input type="password" name="pw2" placeholder="comfirm your password" /></div>
</div>
</div>
</section>
</body>
</html>
... but it's still not working, the margin on the top has no effect, so can anyone help me, guys !!
thanks in advance
Try this. No need to write any css
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Test Code</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " crossorigin="anonymous ">
<style>
input[type="email"],
input[type="password"],
input[type="text"],
select {
/* display : block;
width : 80%;
height : 30px;
text-align : center;
border : none;
font-size : 1em;
color: #313A3D;
background-color: #E8E9EA;
margin-top : 10px; */
}
</style>
</head>
<body>
<header>
<div class="navbartop">
<!--<a class="title" href="./auth.html" >title of the template</a>-->
<a class="item selected" href="#auth">Authentification</a>
<a class="item" href="#register">register</a>
<a class="item" href="#newsleter">newsleter</a>
<a class="item" href="#comments">Comments</a>
</div>
</header>
<section class="secondSection">
<div class="registerPanel">
<div class="row topbuffer form-group">
<div class="col-md-6">
<input type="text" name="fn" placeholder="first name" / class="form-control"> </div>
<div class="col-md-6">
<input type="text" name="ln" placeholder="last name" / class="form-control">
</div>
</div>
<div class="row topBuffer form-group">
<div class="col-md-4">
<select class="form-control">
<option selected="">day</option>
<option>1...31</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control">
<option>month</option>
<option>1...12</option>
</select>
</div>
<div class="col-md-4">
<input type="text" name="y" placeholder="year" class="form-control" />
</div>
</div>
<div class="form-group">
<input type="email" name="email" placeholder="email" / class="form-control">
</div>
<div class="row form-group">
<div class="col-md-6">
<input type="password" name="pw1" placeholder="enter your password" / class="form-control">
</div>
<div class="col-md-6">
<input type="password" name="pw2" placeholder="comfirm your password" / class="form-control">
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
Updated:
I do not know if I understood well but what you want is to remove the botton margin of the two selects ?, if so, here is the necessary css:
First, you need to add a class to the day and month selects like this:
HTML:
<div class="col-md-4">
<select class="margin-bottom-0">
<option selected="" >day</option>
<option>1...31</option>
</select>
</div>
<div class="col-md-4">
<select class="margin-bottom-0">
<option>month</option>
<option>1...12</option>
</select>
</div>
<div class="col-md-4">
<input type="text" name="y" placeholder="year"/>
</div>
After that do you need to declare the class in css like this:
CSS:
.margin-bottom-0{
margin-bottom: 0;
}
I hope it helps you
Regards!
I cant seem to make this work. I wanted a simple responsive login page but the form doesn't stay on the center, it keeps going to the left.
Why this is not working?? If I divide the col into 3 sections of 4, should the it stay on the middle?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron" style="margin-top:150px">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</body>
</html>
I've added a class named col-centered. You can see an example below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
<style>
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4 col-centered">
<div class="jumbotron">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
I'm using bootstrap for the design of my form, but it's not showing the back-ground color of the form, like it's in the examples.
All the fonts colors sizes & designs of the bootstrap are applied, but the background of my form is missing.
I also copy and pasted all the code from the example to see if it will show the form background, but even then it didn't show the background-color of the bootstrap theme.
I have included bootstrap.css and bootstrap.min.css in my html file.
This is the theme that I am using: https://bootswatch.com/flatly/
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Users</title>
</head>
<body>
<form class="form-horizontal col-lg-7" style="border: 1px solid red;" action="/index.php">
<fieldset>
<div class="form-group">
<label for="inputUsername" class="col-lg-3 control-label">Username</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputUsername" placeholder="Enter Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-3 control-label">Password</label>
<div class="col-lg-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-3">
<button type="reset" class="btn btn-default">Reset </button>
<button type="submit" class="btn btn-primary">Login </button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
try it like this
<head>
<meta charset="utf-8">
<title>Users</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- my style sheet -->
<link rel="stylesheet" href="style.css">
</head>
There is a missing code before the fiedset tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Users</title>
</head>
<body>
<form class="form-horizontal col-lg-7" style="border: 1px solid red;" action="/index.php">
<div class="row">
<div class="col-bs-6">
<div class="well bs-component">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="inputUsername" class="col-lg-3 control-label">Username</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="inputUsername" placeholder="Enter Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-3 control-label">Password</label>
<div class="col-lg-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-3">
<button type="reset" class="btn btn-default">Reset </button>
<button type="submit" class="btn btn-primary">Login </button>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</form>
</body>
</html>