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>
Related
I am using bootstrap by running it locally and its not working. But when i am using with CDN link, its working. Can anyone help me out in this?
<!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.0">
<title>Home</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<script src="bootstrap.min.js"> </script>
</head>
<body>
<form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
</body>
</html>
Note:~ The bootsrap.min.css and bootstrap.min.js file is in the folder itself where i am running this project.
Try prepending ./ before filename. like this
<link rel="stylesheet" href="./bootstrap.min.css" type="text/css">
<script src="./bootstrap.min.js"> </script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I tried to align my checkbox and label to the center of the screen but it wasn't moving at all. i tried to put it in the container tag but it result in the label of the check box is not align together. can someone please help with this problem?
.container {
width: 350px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
<!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, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class= "form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>
<div class= "form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<form>
<label>
<input type="checkbox" checked>
Remember me
</label>
</form>
<div class="container">
<p>
<div class="form-group">
<input type ="submit" name="login"
class="btn btn-block" >
</p>
</div>
</body>
</html>
Add a class to your label in HTML:
<!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, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class= "form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>
<div class= "form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<form>
<label class = "checkbox">
<input type="checkbox" checked>
Remember me
</label>
</form>
<div class="container">
<p>
<div class="form-group">
<input type ="submit" name="login"
class="btn btn-block" >
</p>
</div>
</body>
</html>
And then in your CSS move it to the right:
.container {
width: 350px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
.checkbox {
left: 250px;
}
There are two ways to do this:
Make a div tag center contain the label checkbox.
Set label fullwidth and text center
.container {
width: 350px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
/* add this style */
label {
display: flex !important;
justify-content: center;
}
<!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, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class="form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>
<div class="form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<form>
<label>
<input type="checkbox" checked>
Remember me
</label>
</form>
<div class="container">
<p>
<div class="form-group">
<input type="submit" name="login" class="btn btn-block">
</p>
</div>
</body>
</html>
When I click on a link on a form that will take a user to a page with the same background image, it does not load.
The form is a standard log in with password reset and create new account links. All three share pretty similar HTML code and the background image is loaded under the body and shared amongst all three htmls. I'm unsure if this falls under any other question answered or if I am blatantly missing something
Above is the HTML that is the same for both passwordreset.html and newaccount.html
The only difference is that the other two both share a "back to login" link.
I'd just expected the image would act as a sort of constant between each HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>'Login Form'</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="loginbox">
<i class="fas fa-user fa-7x"></i>
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Username">
<p>Password</p>
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
Forgot your Password?<br>
Create an account
</form>
</div>
</body>
</html>
=================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>'Create New Account'</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheet/stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="loginbox newaccount">
<i class="fas fa-user fa-7x"></i>
<h1>Create New Account</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Username">
<p>Email</p>
<input type="email" name="" placeholder="Email">
<p>Password</p>
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Create">
Back to login screen<br>
</form>
</div>
</body>
</html>
=================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>'Reset Password'</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheet/stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="loginbox passwordreset">
<i class="fas fa-user fa-7x"></i>
<h1>Password Reset</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Username">
<p>Email</p>
<input type="email" name="" placeholder="Email">
<input type="submit" name="" value="Reset">
Back to login screen<br>
</form>
</div>
</body>
</html>
=================================================
CSS
=================================================
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("images/travel.jpg") no-repeat fixed center;
background-size: cover;
}
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>
How come when I load my app via a mobile device the h1 is cut off - I am using the Twitter BS:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<title>Birthday App</title>
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="cordova-2.5.0.js"></script>
<script src="js/index.js"></script>
<script src="js/app.js"></script>
<script src="js/bootstrap.js"></script>
<script>
app.initialize();
</script>
</head>
<body ng-app="birthdayToDo" ng-controller="main">
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Birthday Reminders</h1>
</div>
<ul class="unstyled" ng-repeat="bday in bdays">
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
<button class="btn" type="button" ng-click="remove($index)">Delete</button>
</form>
</li>
</ul>
<form ng-show="visible" ng-submit="newBirthday()">
<label>Name:</label>
<input type="text" ng-model="bdayname" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bdaydate" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
</form>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a>
</div>
</div>
</body>
</html>
The responsive stylesheet needs to override some styles in bootstrap.css. Including the bootstrap-responsive css after bootstrap.css should fix your issue.