I have a problem with using background-image in style in my HTML page.I am creating login page in my Django application and when I execute the page, the background image is not displaying. Interestingly, this code worked yesterday and not today.
I've already deliberately placed the image and the file in one folder to avoid path problems.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title> Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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>
<style>
body {
margin-top: 20px;
background: rgb(184, 213, 242);
}
.account-block {
padding: 0;
background-image: url('login.jpg') !important;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
position: relative;
}
.account-block .overlay {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.account-block .account-testimonial {
text-align: center;
color: #fff;
position: absolute;
margin: 0 auto;
padding: 0 1.75rem;
bottom: 3rem;
left: 0;
right: 0;
}
.text-theme {
color: #5369f8 !important;
}
.btn-theme {
background-color: #5369f8;
border-color: #5369f8;
color: #fff;
}
</style>
</head>
<body>
<div id="main-wrapper" class="container" style="text-align:center; width:100%;">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="card border-0">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-6">
<div class="p-5">
<div class="mb-5">
<h3 class="h4 font-weight-bold text-theme">Login</h3>
</div>
<h6 class="h5 mb-0">Welcome back!</h6>
<p class="text-muted mt-2 mb-5">Enter your User ID and password to access admin panel.</p>
<form method="POST" action="">
{% csrf_token %}
<div class="form-group">
<label for="exampleInputText1">User ID</label>
<input type="text" name="username" class="form-control" id="exampleInputText1">
</div>
<div class="form-group mb-5">
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-theme">Login</button>
Forgot password?
</form>
</div>
</div>
<div class="col-lg-6 d-none d-lg-inline-block">
<div class="account-block rounded-right">
<div class="overlay rounded-right"></div>
<div class="account-testimonial">
<h4 class="text-white mb-4">Test 1</h4>
<p class="lead text-white">"Test 2"</p>
</div>
</div>
</div>
</div>
</div>
<!-- end card-body -->
{% for message in messages %}
<p id="messages">{{message}}</p>
{% endfor %}
</div>
<!-- end card -->
<p class="text-muted text-center mt-3 mb-0">Don't have an account? register</p>
<!-- end row -->
</div>
<!-- end col -->
</div>
<!-- Row -->
</div>
</body>
</html>
Any ideas on how to fix this?
I could be wrong here but I would try out this solution.
Try changing
background-image: url('login.jpg')
to:
background-image: url('../indentification/login.jpg')
I'm not sure that you eliminated the path problem exactly.
Finally, I have created content folder and: background-image: url('../../static/app/content/login.jpg');
Related
Hello I'm trying to show modal with jinja2 (if - else)
because I can't use javascript.
this is my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.98.0">
<title>lidar - signup </title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/sign-in/">
<link href="../../static/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
<!-- Custom styles for this template -->
<link href="../../static/css/signin.css" rel="stylesheet">
<link href="../../static/css/modals.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="text-center">
{%if ErrorTitle%}
<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header border-bottom-0">
<h5 class="modal-title">{{ErrorTitle}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label=Close></button>
</div>
<div class="modal-body py-0">
<p>{{ErrorMessage}}</p>
</div>
<div class="modal-footer flex-column border-top-0">
<button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2" data-bs-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
{%endif%}
<main class="form-signin w-100 m-auto">
<form method="POST" action="/register">
<img class="mb-4" src="../../static/image/hashtag.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">register</h1>
<div class="form-floating">
<input type="id" class="form-control" id="id" placeholder="name#example.com" required>
<label for="floatingInput">id</label>
</div>
<div class="form-floating">
<input type="usernick" class="form-control" id="usernick" placeholder="name" required>
<label for="floatingInput">nickname</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="Password" required>
<label for="floatingPassword">비password</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="repassword" placeholder="Password" required>
<label for="floatingPassword">repassword</label>
</div>
<button class="w-100 btn btn-lg btn-primary" id="form_submit" type="submit">signup</button>
<p class="mt-5 mb-3 text-muted">© lidar</p>
</form>
</main>
</body>
</html>
this is error img.
modal popup is slides the existing page sideways.
https://i.stack.imgur.com/JR1Xu.png
if trigger modal, yes existing page is go away to sideways.
I used bootstrap example.
css also bootstrap example.
How can I fix it? thanks.
<div class="modal-dialog" role="document" style="margin-top:10%">
You can use in-line style to adjust the margin.
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>
I'm working on a site for a class project and everything is working fine except when I tried to make the footer sticky the sidebar overlaps the footer when content is added dynamically.
I have the sidebar height set to 90vh because I could not figure out how to get the background color to take up the full height of the sidebar when there was no content I set the sidebar overflow to auto which was working fine but when I try to make the footer sticky it works find until the content grows to big. Scrollbars do appear but the sidebar overlaps the footer.
Here is the html & css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.main-image {
background-image: url(../images/crypto.jpg);
background-repeat: no-repeat;
height: 90vh;
max-width: 100%;
clip: rect(0, 400px, 200px, 0);
}
.sidebar {
height: 90vh;
overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Crypto & Cocktails </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" href="./assets/images/favicon.ico">
</head>
<body>
<!-- header -->
<header id="top">
<div class="row">
<div class="col s12 center #26a69a teal lighten-1">
<img src="assets/images/cryptococktailsheader.jpg" class="responsive-img" alt="Crypto & Cocktails" />
</div>
</div>
</header>
<main>
<div class="row">
<!-- sidebar -->
<div class="col s12 l2 #00695c teal darken-3 sidebar">
<span class="flow-text center">
<h5 class="white-text">Search Coinbase</h5>
<form id="coin-search" action="">
<input id="coin-input" type="text" class="white" name="coin-input"
placeholder="Cryptocurrency Ticker">
<button class="btn btn-lg btn-primary submitButton">Search</button>
</form>
</span>
<div id="myCoins" class="col-12"></div>
</div>
<div class="col s12 l10 content">
<div class="row">
<div class="col s12 l3 ">
<h2 id="coin-name"></h2>
<span id="coin-display" class="flow-text"></span>
<h3 id="drinkName"></h3>
<span id="drinkImg"></span>
<a class="right hide-on-med-and-up" href="#top">Back to top</a>
</div>
<div class="col s12 l7 main-image hide-on-small-only"></div>
</div>
</div>
</div>
</main>
<footer class="#26a69a teal lighten-1 center">
<div class="container">
<div class="row">
<div class="col l12">
<h5 class="white-text">Developers - Contact Us</h5>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2021 Copyright
</div>
</div>
</div>
</footer>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Materialize Framewrk -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<!-- Custom Scripts -->
<script src="./assets/scripts/main.js"></script>
<script src="./assets/scripts/cocktail.js"></script>
<script src="./assets/scripts/coinbase.js"></script>
</body>
We just had to add the z-index: 1; to the footer.
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 can't see where is the extra pading or the things that add the ugly mini scroll horizontal, there is my code:
I have been checking my code and I can't find it :(
Someone can help?
I'm cooding in just html and css, I know that
body{
background: black;
}
section.home{
margin-top: 0;
background: url(../img/bg-01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pull-left{
}
.ingresar-bg{
background-color: gray;
}
.ingresar{
margin: 50px 60px;
border: solid 1px white;
color: white;
background-color: rgba(0,0,0,0);
padding: 10px;
display: inline-block;
}
.ingresar:hover, .ingresar:active, .ingresar:visited{
background-color: gray;
color: white;
border: solid 1px white;
}
input.form-control{
margin-bottom: 15px;
}
.logo-modal{
margin-left: auto;
margin-right: auto;
}
.img-svg-logo{
margin: 35px 50px;
color: rgb(255, 255, 255);
width: 200px;
position: fixed;
}
#media (max-width:640px) {
.img-svg-logo{
width: 150px;
}
.ingresar{
font-size: 15px;
}
}
.cover-text {
text-align: center;
color: white;
vertical-align: middle;
font-size: 24px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 110px;
}
.input-lg{
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 100px;
}
input[placeholder].position{
text-align: center;
background-position: left center;
padding-left: 5px;
background-image: url(../img/ubicacion1.svg);
background-repeat: no-repeat;
}
.servicio-button{
background: #2260ad;
font-size: 25px;
border: solid 1px #2260ad;
border-radius: 0px;
width: 300px;
margin-bottom: 100px;
margin-top: 100px;
}
.servicio-button:hover{
background-color: #194984;
border: solid 1px #194984;
}
.modal-content {
position: relative;
background-color: gray;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
section.function{
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.iconos{
color: rgb(34, 96, 172);
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div="container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left">
<a href="index.html">
<img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" />
</a>
</div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" />
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead">
Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés
</p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position" placeholder="¿Dónde te encuentras?" class="button-add">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a>
</div>
</div>
<!--
</section>
<section class="function">
<div class="cover-text" id="function">
<h1>¿Cómo funciona?</h1>
<p class="lead">We're that "cool" vegan uncle who doesn't have kids and somehow makes a living repairing antique polaroid cameras, while drinking a $38 bottle of artisanal cold-brew.</p>
</div>
<div class="row iconos block-center" id="iconos">
<div class="col-md-4">
<img src="assets/img/ubicacion-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/servicios-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/agenda-img.png" class="img-responsive color" />
</div>
</div>
</section>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Try this code. Edited and alligned some code.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- Latest compiled and minified CSS -->
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div "container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left"> <img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" /> </div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead"> Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés </p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position button-add" placeholder="¿Dónde te encuentras?">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2"> <a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a> </div>
</div>
</div>
</section>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" /> </div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Additional CSS
.row {
margin-right: auto;
margin-left: auto;
}
Actually it is the problem with bootstrap row class.
Check this code . It works
Working example http://www.bootply.com/coISbk1PgQ
I experienced the same issue but I soon figured that I was applying bootstrap classes in the wrong order.
.container = always leaves a wide padding on both sides of the page.
.container-fluid = leaves a small padding.
.row = comes with a negative margin that is equal to the small padding that .container-fluid adds.
So putting this together
<div class="container-fluid">
<div class="row">This container will stretch from one side of the page to the order</div>
<div style="width: 100%">This container will appear to have spaces between both of its sides and the walls of the page.</div>
</div>