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>
Related
I created a form that it is connected to my google Doc but the problem the form is responsive to phone screen as it I want it to be. please check the attached picture
this how it looks in my phone browser
I want it to full screen like it is opened from an app. I have used materialize CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> creat PDF </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s6">
<input placeholder="Your name" id="name" type="text" class="validate">
<label class="active" for="name">First Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="Your name" id="id" type="text" class="validate">
<label class="active" for="id">Your Id</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input placeholder="Your name" id="dep" type="text" class="validate">
<label class="active" for="dep">Your Department</label>
</div>
</div>
<button id="btn" onclick="waitingMessage()" class="btn waves-effect waves-light" type="submit"
name="action">Submit
<i class="material-icons right">send</i>
</button>
<div id="msg">
<div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include('js');?>
</body>
</html>
You need to read the grid section of materialize css it is the most important section of any css framework.
Here is a solution:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> creat PDF </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col m6 offset-m3 s12 ">
<div class="input-field">
<input placeholder="Your name" id="name" type="text" class="validate">
<label class="active" for="name">First Name</label>
</div>
<div class="input-field">
<input placeholder="Your name" id="id" type="text" class="validate">
<label class="active" for="id">Your Id</label>
</div>
<div class="input-field">
<input placeholder="Your name" id="dep" type="text" class="validate">
<label class="active" for="dep">Your Department</label>
</div>
<button id="btn" onclick="waitingMessage()" class="btn waves-effect waves-light" type="submit"
name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="row">
</div>
<div id="msg">
<div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include('js');?>
</body>
</html>
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>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Win the week web portal portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js">
</head>
<body>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-sm-8">
<img class="img-fluid" src="{{url_for('static',filename='images/image.png')}}" id="sideimage">
</div>
<div class="col-sm-4">
<div class="container" id ="inbound1">
<h3 id="tophead1">WELCOME TO</h2><br>
<h2 id="tophead2">Win The Week Web<sup id="sup">TM</sup> Portal</h2>
<h5 id="tophead3">Scorecard</h5>
<img class="img-fluid" src="{{url_for('static', filename='images/logo.png')}}" id="logo">
</div>
<div class="container" id ="inbound2">
<form action="#" method="post" name="formdata">
<label for="username" id="label1"><strong>Username:</strong></label>
<input type="email" name="username" id="username" required>
<br>
<label for="password" id="label2"><strong>Password:</strong></label>
<input type="password" name="password" id="password" placeholder="Password" required>
<br>
<div class="container">
<button class="btn btn-primary" id="login" name="login" type="submit" value="Login">Login</button>
</div>
<h4 id="tophead4" >Forgot password?
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The code above does contains the body part but it is not showing in the debugger console. I tried remove caching, installing different browsers, but all in vain.
I am trying to learn flask and that is why the url path is specified differently.
You are missing a </script> tag in your header this will fix the problem you are having.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Win the week web portal portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
</head>
<body>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-sm-8">
<img class="img-fluid" src="{{url_for('static',filename='images/image.png')}}" id="sideimage">
</div>
<div class="col-sm-4">
<div class="container" id ="inbound1">
<h3 id="tophead1">WELCOME TO</h2><br>
<h2 id="tophead2">Win The Week Web<sup id="sup">TM</sup> Portal</h2>
<h5 id="tophead3">Scorecard</h5>
<img class="img-fluid" src="{{url_for('static', filename='images/logo.png')}}" id="logo">
</div>
<div class="container" id ="inbound2">
<form action="#" method="post" name="formdata">
<label for="username" id="label1"><strong>Username:</strong></label>
<input type="email" name="username" id="username" required>
<br>
<label for="password" id="label2"><strong>Password:</strong></label>
<input type="password" name="password" id="password" placeholder="Password" required>
<br>
<div class="container">
<button class="btn btn-primary" id="login" name="login" type="submit" value="Login">Login</button>
</div>
<h4 id="tophead4" >Forgot password?
</form>
</div>
</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>
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 !!!