I am making a website for learning purposes in HTML with a sign-in form but, when I put an image near the form the form moved to the bottom. I tried padding-top, padding-bottom nothing is helping how do I resolve this issue? My website :
Here's my code:
<!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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
<div>
<div>
<nav class="navbar navbar-light " style="background-color: #000029 ;">
<div class="container-fluid">
<img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
<form class="d-flex">
<button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
</form>
</div>
</nav>
</div>
<div style="width: 600px;">
<img src="House real estate logo template.png" style="padding-left: 100px; margin-top: 50px ;" alt="Hope">
</div>
<div style="width: 600px; float: right;">
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
<div style="border-left: 3px solid #1f1f1f; height: 500px; position: absolute; left: 45%; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;"></div>
</div>
</body>
</html>
One solution can be :
Wrap the components that have to appear side-by-side into a div and apply flex CSS to the wrapper div
Add flex-grow CSS to the children according to the layout ratios.
Plus, add elements to the container div in right to left order, while using relative positioning.
The following solution does the same.
<!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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
<div>
<div>
<nav class="navbar navbar-light " style="background-color: #000029 ;">
<div class="container-fluid">
<img src="https://joeschmoe.io/api/v1/random" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
<form class="d-flex">
<button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
</form>
</div>
</nav>
</div>
<div style="display: flex">
<div style="width: 600px; flex-grow: 1">
<img src="https://joeschmoe.io/api/v1/random" style="padding-left: 100px; margin-top: 50px ;" alt="Hope">
</div>
<div style="border-left: 3px solid #1f1f1f; height: 500px; position: relative; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;">
</div>
<div style="width: 600px; float: right; flex-grow: 1; margin-left: 50px; margin-top: 100px;">
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
</div>
</div>
</body>
</html>
float: right will move an element to the right and let content that follows it bubble up to its left.
The form is at the end of the page, so there is nothing that follows it.
When using floats for layout, you need to float the first element and not the last element.
That said, do not use floats for layout. They aren't designed for it even if they where the best thing CSS had for hacking a layout into a webpage 20 years ago.
We now have Flexbox (for organising rows of data) and Grid (for organising rows + columns of data).
Use those instead.
Since you have tagged this bootstrap-5, you might want to use its Flexbox based grid system (where it has some predefined styles for laying out content in a grid that you apply by adding classes to the elements).
Solution
I have added float: left; at tag where hope image is there
and added margin-top property .
<div style="width: 600px; float: left; ">
<img src="img.jpg" style="display: block; margin-left: 50px; margin-right: auto; margin-top: 130px ; width: 100%;" alt="Hope">
</div>
<div style="width: 600px; float: right; margin-top: 200px;" >
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
You Can Check My Output In Image
<!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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
<div>
<div>
<nav class="navbar navbar-light " style="background-color: #000029 ;">
<div class="container-fluid">
<img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
<form class="d-flex">
<button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
</form>
</div>
</nav>
</div>
<div style="width: 600px; float: left; ">
<img src="https://i.ibb.co/Vg1Jyfz/images.jpg" style="display: block; margin-left: 50px; margin-right: auto; margin-top: 130px ; width: 100%;" alt="Hope">
</div>
<div style="width: 600px; float: right; margin-top: 200px;" >
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
<div style="border-left: 3px solid #1f1f1f; height: 500px; position: absolute; left: 45%; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;"></div>
</div>
</body>
</html>
Related
I created a sign up page with HTML and Bootstrap 5. I made a Validation for this page with the help of Bootstrap. When the registration is complete, a Modal appears. However, there is a problem. Modal opens even if there is an empty space in the form section, that is, even if there is a Validation error. How can I prevent this?
I wrote a code like this:
(function() {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
#media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: 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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks for help.
I couldn't think of a solution.
Catch the show.bs.modal and test the validity again
Alternatively count if the number of .was-validated equals number of forms on the page
(function() {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
[...forms]
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
document.getElementById('exampleModal').addEventListener('show.bs.modal', function(e) {
const errors = [...forms].some(form => !form.checkValidity());
if (errors) e.preventDefault();
});
})()
body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
#media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: 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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Here is a version with only one form
(function() {
'use strict'
const form = document.querySelector('.needs-validation');
form.addEventListener('submit', (e) => {
const thisForm = e.target;
if (!thisForm.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
thisForm.classList.add('was-validated')
});
document.getElementById('exampleModal').addEventListener('show.bs.modal', (e) => {
if (!form.checkValidity()) e.preventDefault();
});
})()
body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
#media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: 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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
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 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>
I want the blue element to expand to the bottom of the page.
But if I set the height: 100% to it, then it does expands beyond the bottom of the page. I think it does that because it doesn't take in consideration the size of the red element and then together with the size of the red element they go more that 100% of the parent.
How do I know that it expand beyond the page? Because the parent element have borders that then are shorter than the blue element.
The code looks like that:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
:root {
--body-backroung-color: #e7e8e5
}
html, body {
height: 100vh;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
background-color: var(--body-backroung-color);
}
.main-content {
padding: 25px;
}
.zero-margin-lr {
margin-left: 0;
margin-right: 0;
}
.page-margin-lr {
margin-left: 9em;
margin-right: 9em;
border-left: solid 0.1em gray;
border-right: solid 0.1em gray;
}
.main-content-custom {
background-color: #e9ecef;
}
.jumbotron-custom {
margin-bottom: 0 !important;
}
.content {
margin-bottom: 1em
}
</style>
</head>
<body class="mat-typography">
<div class="container-flex page-margin-lr">
<!--RED ELEMENT-->
<div class="row">
<div class="col-12">
<div class="jumbotron text-center">
<h1>.</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/home']"
routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- BLUE ELEMENT-->
<div class="row main-content-custom zero-margin-lr">
<div class="col-2"></div>
<div class="col-8">
<div class="main-content">
<form name="newPost" #newPost="ngForm">
<div class="form-group">
<label for="title">Title</label>
<input id="title" name="title" type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea id="content" name="content" class="form-control" rows="6"></textarea>
</div>
<div class="form-group">
<label for="author">Author</label>
<input id="author" name="author" type="text" class="form-control"/>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary" >Post</button>
</div>
</form>
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</body>
</html>
The snippet above is inside the body element. The html and body have height: 100%
How can I make the blue element expand to the bottom of the page but don't go beyond/outside of the parent element?
So the solution for me was:
add height: auto; min-height: 100vh to the parent.
add flex: 1 to the child/blue element
Thank you to Zohir Salak for heling a lot.
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>