please see this picture!
I'm trying to align 'form element' to center.
here is what I tried.
1.I used .form-inline {margin: 0 auto;}2. added text-center in form class="form-inline"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<form class="form-inline">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email"> </div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="library/tether-master/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
< /html>
Could you please help me to find-out a solution of it?
Try the following CSS:
.form-inline {
margin: 0 auto;
display: table;
}
if your are using twitter-bootstrap why you not center with bootstrap elements ????? Offsetting columns
.com/css/#grid-offsetting
here is the Bootstrap solution, and its responsiv!
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container jumbotron">
<div class="row ">
<div class="col-sm-8 col-sm-offset-4 column">
<form class="form-inline">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email"> </div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
</div>
</div>
</body>
</html>
Related
I'm currently using Bootstrap 4 for a project in a JavaScript course im following, and im doing the HTML, but i've run into an issue with the input-group-addon class on a span. It's not showing like the icon is showing in the tutorial
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Loan Calculator</title>
</head>
<body class="bg-dark">
<div class="contr">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Loan Calculator</h1>
<form id="loan-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span id="input-group-addon">%</span>
<input type="number" class="form-control" id="interest" placeholder="Interest Rate">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
Your structure and class names are a little bit off. You need a span.input-group-text nested inside a div.input-group-prepend
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
.input-group-addon does not appear in the v4.0 documentation that was for v3.
If I do not set my HTML and BODY tag class = "h-100" They are showing at like 210 pixels. I then have to keep setting lower level elements to h-100 also.
I'm really not sure how to fix it other than adding the h-100
<html class="h-100" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="h-100">
I believe that the correct result of bootstrap HTML and body is that it should size it self roughly to the size of the viewing medium.
Here is the full page of what I'm trying to accomplish on jsfiddle.
https://jsfiddle.net/v2cqh3n8/
The reason I am trying to have the body set to a nice size is because I want to center align the login form. Which I am also having trouble with.
Try this bootstrap solution. Hope it works better for you, without adding height to BODY and HTML Tag .
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="form-group">
<label for="">Username</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="text" class="form-control">
</div>
<button class="btn btn-primary">Log-in</button>
</div>
</div>
</div>
It worked by simply adding height to body in vh unit. h-100 justify-content-center to .row
Here is working example:
https://jsfiddle.net/HarishBoke/faocwnp6/1/
If all you want to do is put the form in the centre of the page, just use flexbox.
I've added in you js fiddle with the correct bootstrap classes.
The reason you need to set h-100 on these elements is that the content within those elements is not filling the DOM.
Side-note: You also don't need all of the containers/rows if you're just centering the element.
<!doctype html>
<html class="h-100" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="h-100 d-flex align-items-center justify-content-center">
<form action="/login" method="POST" class="w-50">
<div class="form-group">
<label for="username-input"> Username </label>
<input name="username" type="text" class="form-control" id="username-input" placeholder="Username">
</div>
<div class="form-group">
<label for-"password-inpiut"> Password </label>
<input name="password" type="password" class="form-control" id="password-input" placeholder="Password">
</div>
<button class="btn btn-primary" type="submit"> Log-in </button>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Just set the height of the html and body to 100% using css or h-100 classes and then add d-flex and align-items-center classes to the body.
html,
body {
height: 100%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="d-flex align-items-center">
<div class="container-fluid">
<div class="row">
<div class="col">
<form action="/login" method="POST" class="w-50 mx-auto">
<div class="form-group">
<label for="username-input"> Username </label>
<input name="username" type="text" class="form-control" id="username-input"
placeholder="Username">
</div>
<div class="form-group">
<label for="password-inpiut"> Password </label>
<input name="password" type="password" class="form-control" id="password-input"
placeholder="Password">
</div>
<button class="btn btn-primary" type="submit"> Log-in </button>
</form>
</div>
</div>
</div>
</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 am trying to create a inline form, but its not styling correctly.
Below is the code I am using:
body {
background-color: #a7cdf2;
}
#map {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form class="inline" action="" method="post" name="search">
<input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
<datalist id="id_datalist">
<option value="CLARENVILLE, CA">
</datalist>
<div class="form-group">
<label for="origin">Origin:</label>
<input class="form-control" id="origin" list="id_datalist" name="origin" size="40" type="text" value="SHANGHAI, CN">
</div>
<div class="form-group">
<label for="speed">Speed (knots):</label>
<input class="form-control" id="speed" name="speed" size="5" type="text" value="14.0">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
This is how it renders in Chrome:
It seems your boostrap links are incorrect... I played around with your code and replaced the links and it worked fine. It looks like either you have put the downloaded files in the wrong place, or perhaps the example you found wasn't clear. When the src has a value like /static/css/bootstrap.min.css it is looking at the files on the server hosting the site. Perhaps you should use CDN links instead?
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
body {
background-color: #a7cdf2;
}
#map {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form class="inline" action="" method="post" name="search">
<input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
<datalist id="id_datalist">
<option value="CLARENVILLE, CA">
</datalist>
<div class="form-group">
<label for="origin">Origin:</label>
<input class="form-control" id="origin" list="id_datalist" name="origin" size="40" type="text" value="SHANGHAI, CN">
</div>
<div class="form-group">
<label for="speed">Speed (knots):</label>
<input class="form-control" id="speed" name="speed" size="5" type="text" value="14.0">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>