I have the folowing code that renders different from what I was expecting when you add the form tag.
Try removing the form tags to see the difference.
<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
<style>
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 vh-100 bg-info">
<main class="col p-4 flex-grow-1 fondo">
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center col-md-12">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
With form tag
Without form tag
I want it to look like the second picture, but dont know why the form tag changes the alignment.
Your form tag should has a col-sm-12 class
<form action="" class="col-sm-12">
...
</form>
Change your form code with following code :
<form action="" class="col-sm-12">
<div class="row">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</div>
</form>
Align it and you should use col class only inside row class.
<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
<style>
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 vh-100 bg-info">
<main class="col p-4 flex-grow-1 fondo">
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center col-md-12">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="" class="w-100">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control border-0" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Try this structure. It will easy for you.
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<div class="fondo d-flex justify-content-center align-items-center flex-column">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="">
<div class="form-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</body>
</html>
Related
I'd to split html page into 3 devision :
1st : contain text , table ...
2nd : this part will contain form for user submit
3nd : contain hyperlink or sth like that
my code likes below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOOTSTRAP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- <style>
.form {
margin: auto;
margin-top: 100px;
width: 300px;
padding: 20px;
border: 1px solid #DDD;
border-radius: 5px;
background-color: darkgray;
}
.form-label{
/* background-color: blue; */
color:aqua
}
</style> -->
</head>
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
<form action="" method="post">
{% csrf_token %}
<div class="form" style="width: 50%;">
<h3 class="mt-3">Please input the info</h3>
<div class="form-group mb-2">
<label class="form-label" >password:</label>
<input class="form-control" type="password" name = "password"/>
</div>
<div class="form-group mb-2 mt-2">
<label class="form-label">phone:</label>
<input class="form-control" type="text" name="phone"/>
</div>
<!-- <button style="width:100%" class="btn btn-primary btn-block mb-4 mt-3">submit</button> -->
<button style="width:100%" class="btn btn-warning btn-block mb-4 mt-3">submit</button>
</form>
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
</html>
however, its layout was not my expect, I also attach the output expect, could you please help assist ?
Here you go...
You are missing a <div> closing tag!
Optional: Change col to col-md-4 col-12.
Optional: You can remove style="width: 50%;".
Optional: Add d-flex justify-content- classes if you want the first card to be positioned to the left, the second in the middle and the third to the right.
See the snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOOTSTRAP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- <style>
.form {
margin: auto;
margin-top: 100px;
width: 300px;
padding: 20px;
border: 1px solid #DDD;
border-radius: 5px;
background-color: darkgray;
}
.form-label{
/* background-color: blue; */
color: aqua;
}
</style> -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-12 d-flex justify-content-md-start justify-content-center">
1 of 3
</div>
<div class="col-md-4 col-12 d-flex justify-content-center">
<form action="" method="post">
{% csrf_token %}
<div class="form">
<h3 class="mt-3">Please input the info</h3>
<div class="form-group mb-2">
<label class="form-label">password:</label>
<input class="form-control" type="password" name="password" />
</div>
<div class="form-group mb-2 mt-2">
<label class="form-label">phone:</label>
<input class="form-control" type="text" name="phone" />
</div>
<!-- <button style="width:100%" class="btn btn-primary btn-block mb-4 mt-3">submit</button> -->
<button style="width:100%" class="btn btn-warning btn-block mb-4 mt-3">submit</button>
</form>
</div>
</div>
<div class="col-md-4 col-12 d-flex justify-content-md-end justify-content-center">
3 of 3
</div>
</div>
</div>
</body>
</html>
You can try this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4 border">
1 of 1
</div>
<div class="col-xs-12 col-md-4 border">
1 of 2
</div>
<div class="col-xs-12 col-md-4 border">
1 of 3
</div>
</div>
</div>
How can I center a div vertically in bootstrap 5?
It should be aligned in the middle between of content before the div and the screen end.
Tried this:
<div>some content</div>
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div>div that should be centered</div>
</div>
It makes the pages longer than it actually is. The div doesn´t looks centered.
You can do it like this:
Wrap everything with one div that has 100% screen width and height.
Use flex-grow-1 for the second div so it takes the remaining height and center everything inside.
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100">
<div>This div is not centered.</div>
<div class="d-flex flex-grow-1 justify-content-center align-items-center">
<div>This div is centered.</div>
</div>
</div>
</body>
</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.0" />
<title>Document</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<style>
.card
{
min-width: 320px;
width: 480px;
}
</style>
</head>
<body>
<div class="d-flex align-items-center justify-content-center vh-100">
<div class="card shadow-lg">
<div class="card-header text-bg-danger">
<h2>
<i class="fa-solid fa-user"></i>
Login
</h2>
</div>
<div class="card-body">
<form action="">
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input
placeholder="your registered email"
class="form-control"
type="email"
name="email"
id="email"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input
placeholder="your password"
class="form-control"
type="password"
name="password"
id="password"
/>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-danger">Login</button>
<button type="reset" class="btn btn-secondary">Reset all</button>
</div>
</form>
</div>
</div>
</div>
<script
src="https://kit.fontawesome.com/266b76cb57.js"
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>
I put a background image and I'm using a card at the middle of the page. I've a white bar that come across all the screen and I don't know how to remove it.
Here is a screenshot:
Here is my code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Change your background to be set to the body instead of html:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
body{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Add transparent to your body as well
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body style="background-color: transparent">
<div class="container" style="background-color: transparent">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
there is background color in your body tag.
you can set background color to transparent.
body {
background-color: transparent;
}
The issue is caused by this line which is associated with the head tag.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
Use the below code and the issue will be fixed. The change that I made is, I changed the background property of the body to transparent which was assigned by default by the above tag. Now it works perfectly. Hope it helps.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
body{
background-color: transparent;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
How it should look
How it is not suppose to look
So my goal is to try to make my Registration form look like my login form. All I did was added extra fields and then the form went crazy. Can anyone explain? I searched the internet for help but that didn't work and I was just really trying to make this one work because it looks nice. Yes I am working and learning dJango so I just wanted this to look nice even though it is not even needed. I go the extra mile sometimes but hate when I don't understand.
This is my index html and login form
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="../static/img/swordandshield.jpg"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Welcome to My place</h1>
<h4>Sign into your account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Login</button>
</div>
</div>
<p>
Don't have an account yet?Register here
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
This is my registration form, it uses the same css and boostrap method
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="../static/img/swordandshield.jpg"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Registration Form</h1>
<h4>Sign up for an account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>Your Full Name</h4>
<input
type="fullName"
name="fullName"
class="form-control my-3 p-4"
/>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Confirm Password</h4>
<input
type="password"
name="cpw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Register</button>
</div>
</div>
<p>Have an account then Sign In</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
and this is my css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: rgb(211, 218, 218);
}
.row {
background: white;
border-radius: 30px;
box-shadow: 12px 12px 22px;
}
img {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.btn1 {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: black;
color: white;
border-radius: 4px;
font-weight: bold;
}
.btn1:hover {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: rgb(51, 105, 38);
color: white;
border-radius: 4px;
font-weight: bold;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: rgb(211, 218, 218);
}
.row {
background: white;
border-radius: 30px;
box-shadow: 12px 12px 22px;
}
img {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.btn1 {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: black;
color: white;
border-radius: 4px;
font-weight: bold;
}
.btn1:hover {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: rgb(51, 105, 38);
color: white;
border-radius: 4px;
font-weight: bold;
}
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="https://images.unsplash.com/photo-1602900004353-2e786ce8f35c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=658&q=80"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Registration Form</h1>
<h4>Sign up for an account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>Your Full Name</h4>
<input
type="fullName"
name="fullName"
class="form-control my-3 p-4"
/>
</div>
<!-- I added below </div> tag here. only one change and it works. -->
</div>
<!-- Change Ended. -->
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Confirm Password</h4>
<input
type="password"
name="cpw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Register</button>
</div>
</div>
<p>Have an account then Sign In</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
If i got your question this should help you.
You need to add crispy form tag on the top of the index page. To use crispy form tags, you need to install them first;
pip install django-crispy-forms
Then on the top of the index page (or any page where the form is present or use it in the base.html page);
{% load crispy_forms_tags %}
Create your forms in a different file named as forms.py where you can create your forms from python classes.
Import these forms into the views.py file and transfer them to html pages as variables.
In html pages;
<form action=some_url>
{{ form | crispy }} <!-- here the form is the variable whose value is set to be the class which created form in forms.py -->
</form>
I've tried many things but I am still getting this error.
SyntaxError: Unexpected token / in <path> while compiling ejs
I've looked at multiple issues like this one but with no success
This is the part with the error:
<% include ./partials/messages %>
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>404 Page not found</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
</head>
<body id="page-top">
<div id="wrapper">
<div class="d-flex flex-column" id="content-wrapper">
<div id="content" style="background-color: #000000 !important;height: 100vh;">
<nav class="navbar navbar-light navbar-expand bg-white shadow-lg mb-4 topbar static-top" style="background-color: rgb(247,23,53) !important;">
<div class="container-fluid"><img class="img-fluid" src="assets/img/Logo.png" style="width: 140px;margin: 0 auto;"></div>
</nav>
<% include ./partials/messages %>
<div class="container-fluid">
<div class="text-center border rounded shadow-lg mt-5" style="background-color: #ffffff;padding: 25px;max-width: 450px;margin: 0 auto;">
<form method="post" action="auth/login">
<h1 style="color: rgb(0,0,0);"><strong>Login</strong></h1>
<div class="form-group"><label for="password" style="color: rgb(0,0,0);"><strong>ID</strong></label><input class="form-control" type="text" name="id" placeholder="Voer hier het id in." autofocus="" required="" minlength="6" maxlength="6" pattern="\d{6}"></div>
<div class="form-group"><label for="password" style="color: rgb(0,0,0);"><strong>Password</strong></label><input class="form-control" type="password" placeholder="Password" name="password" maxlength="8" required=""><div><button class="btn btn-primary" type="submit"><strong>Login</strong></button>
</form>
</div>
</div>
</div>
</div>
<a class="border rounded d-inline scroll-to-top" href="#page-top">
<i class="fas fa-angle-up"></i></a></div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/chart.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="assets/js/theme.js"></script>
</body>
</html>
Try using this syntax:
<%- include('partials/messages'); %>