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
Related
I am trying to create a login screen with 2 columns.
On large screens: Left column = login controls, right column = Image.
on small screens: Top column = image, bottom column = login controls.
It works as expected. like the screenshots below:
So far, it works well. However, I want the "Sign in" and the "Welcome" text to appear inside the image on the smaller screens.
To get an Idea on what I am trying to achieve, please look at this Website login page. They have done it:
https://demo.hasthemes.com/adomx-preview/light/login.html
Here is my code so far.
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-sm-12 col-md-6 col-lg-8 order-md-2 order-lg-2" style="background-color: grey;">
this is my image panel
</div>
<div class="col-sm-12 col-md-6 col-lg-4 order-md-1 order-lg-1">
<div class="loginarea">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
<form style="margin-top: 30px; margin-bottom: 20px;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary float-right">Sign in</button>
</form>
Forgot password
</div>
</div>
</div>
and this is my simple CSS.
<style>
.fullheight {
height: 100%;
min-height: 100%;
}
html,
body {
height: 100%;
}
.loginarea {
margin-top: 100px;
padding-right: 20px;
padding-left: 20px;
}
</style>
How can I make the Text lines flow into the image and the white area contain only the login boxes?
If you are using latest version of bootstrap i.e version 4 then you should use the d-* class as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-sm-12 col-md-6 col-lg-8 order-md-2 order-lg-2" style="background-color: grey;">
this is my image panel
<div class="loginarea d-sm-none">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 order-md-1 order-lg-1">
<div class="loginarea">
<div class="d-none d-sm-block">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
</div>
<form style="margin-top: 30px; margin-bottom: 20px;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary float-right">Sign in</button>
</form>
Forgot password
</div>
</div>
</body>
</html>
this is as you expected
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 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 just need to align the textbox and label to the center of the page. I am unable to get this. Every time its left aligned. Please need suggestions
Html code:
<!DOCTYPE html>
<html>
<head>
<title>ProjectID Creation</title>
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link href="font.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="background-color:dodgerblue">
<h2><b>ProjectID Creation</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12">
<div class="form-group">
<label id="label" class="control-label" >UserID:</label>
<input type="text" class="form-control" name="user" ng-model="user" placeholder="Enter UserID" autocomplete="off" required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12">
<div class="form-group">
<label id="label" class="control-label">ProjectID:</label>
<input type="text" class="form-control" name="project" ng-model="project" placeholder="Enter ProjectID" autocomplete="off" required />
</div>
</div>
</div>
<div class="temp123" style="margin-bottom:60px">
<button type="submit" class="btn btn-primary" ng-click="create()">Create</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my code in jsfiddle
You can use text-align:center and col-lg-offset-4 and col-sm-offset-4 try the demo
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div class="container" style="background-color:dodgerblue">
<h2><b>ProjectID Creation</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body text-center">
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12 col-lg-offset-4 col-sm-offset-4">
<div class="form-group">
<label id="label" class="control-label" >UserID:</label>
<input type="text" class="form-control" name="user" ng-model="user" placeholder="Enter UserID" autocomplete="off" required />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group col-md-4 col-xs-12 col-lg-offset-4 col-sm-offset-4">
<div class="form-group">
<label id="label" class="control-label">ProjectID:</label>
<input type="text" class="form-control" name="project" ng-model="project" placeholder="Enter ProjectID" autocomplete="off" required />
</div>
</div>
</div>
<div class="temp123" style="margin-bottom:60px">
<button type="submit" class="btn btn-primary" ng-click="create()">Create</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
Just this,
<style type="text/css">
.container{
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
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 !!!