Whenever I'm scrolling my mouse, all the listed admin cards come over the navbar. This is a very irritating flaw and I can't seem to understand where I went wrong. Any help would be appreciated. Thanks!
#mainsec {
height: 100vh;
width: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#navv {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
#navv a:hover {
background-color: rgba(221, 221, 221, 0.568);
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="../../css/admin_dash.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top"> Phemesoft
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#sec1">Admins</a>
<a class="nav-link" href="#sec2">Manage Admins</a>
<a class="nav-link" href="#sec3">Course Content</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="column">
<div id="sec1">
<div class="row" id="mainsec">
<div class="col-sm-6">
<h2>Admins</h2>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-5 cards-wrapper"></div>
</div>
</div>
</div>
</div>
<div id="sec2">
<div class="row" id="mainsec">
<div class="col-sm-6">
<h1>User to Admin</h1>
</div>
<div class="col-sm-6">
<form class="form" action="makeadmin" method="POST">
Enter email:
<input type="email" placeholder="Email" name="email">
<button type="submit" class="btn btn-light">Check</button>
</form>
</div>
</div>
</div>
<div id="sec3">
<div class="col-sm-6" id="mainsec">
<h1>Add course content</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.ajax({
url: "listadmins",
type: "GET",
success: function(response) {
var $results = $(".cards-wrapper");
for (var a = 0; a < response.length; a++) {
// console.log(response[a].Name);
$results.append(
'<div class="card"><div class="card-body"><h6 class="card-title">' +
response[a].Name +
'</h6></div></div>'
);
}
}
});
</script>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navv").style.top = "0";
} else {
document.getElementById("navv").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
};
</script>
</body>
</html>
Here's an image of the issue:
The card appears over then nav bar
Ps: I haven't posted the mapping of /listadmins because it;s just normal Database query
Thanks all of guys for responding. I found the answer in one the comments. It was to use a higher z-index value for the navbar.
#navv {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
z-index: 2;
}
remove 'position: relative' from the card class
This has nothing to do with the ajax directly but more the rest of the page.
Your html is invalid
head tag not closed
body tag not opened
duplicate id mainsec - not using them really so I made them a class and removed the id's
some other invalid markup
Hard to see the issue here so I adjusted the size slightly for this site
Now that we got that strait, you can adjust the margins and padding on the tops with mt-5 pt-4 however you wish, toy around with this and see where you get things to move.
.mainsec {
height: 5em;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
}
#navv {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
transition: top 0.3s;
}
#navv a:hover {
background-color: rgba(221, 221, 221, 0.568);
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="../../css/admin_dash.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../../assets/logo.png" width="30" height="24" class="d-inline-block align-text-top" alt="Phemesoft logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#sec1">Admins</a>
<a class="nav-link" href="#sec2">Manage Admins</a>
<a class="nav-link" href="#sec3">Course Content</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container mt-6">
<div class="">
<div id="sec1">
<div class="mainsec mt-5">
<div class="col-sm-3">
<h2>Admins</h2>
</div>
<div class="col-sm-7 mt-5 pt-4">
<div class="row">
<div class="col-sm-8 cards-wrapper">
<div class="cards-wrapper">
<div class="card">
<div class="card-body">
<h6 class="card-title">Pretend append
</h6>
</div>
</div>
<div class="card">
<div class="card-body">
<h6 class="card-title">Pretend append
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="sec2">
<div class="row mainsec">
<div class="col-sm-6">
<h1>User to Admin</h1>
</div>
<div class="col-sm-6">
<form class="form" action="makeadmin" method="POST">
Enter email:
<input type="email" placeholder="Email" name="email">
<button type="submit" class="btn btn-light">Check</button>
</form>
</div>
</div>
</div>
<div class="row" id="sec3">
<div class="col-sm-6 mainsec">
<h1>Add course content</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.ajax({
url: "listadmins",
type: "GET",
success: function(response) {
var $results = $(".cards-wrapper");
for (var a = 0; a < response.length; a++) {
$results.append(
'<div class="card"><div class="card-body"><h6 class="card-title">' +
response[a].Name +
'</h6></div></div>'
);
}
}
});
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navv").style.top = "0";
} else {
document.getElementById("navv").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
};
</script>
</body>
</html>
Related
---------//////Question starts here/////---------------
I am trying to make all of my Bootstrap 5 cards even in standard view and responsive to mobile devices, but adjusting the height in CSS does not seem to work. Right now it is responsive, but the pictures are all stretched out. As far as the card's height they are all different sizes. I tried grabbing the card-text "class" and using truncate but it doesn't seem to help either. I feel like I'm so close. Im almost positive it has to do with the card-text class. Any thoughts? I've attached a picture to this question, and here is my code below:
<!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>Portfolio Projects</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.min (15).css" />
</head>
<body>
<!-- ===================== NavBar Starts from here====================== -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">CHAZZY!</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="../index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../About/index.html"
>About</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../Projects/index.html"
>Projects</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="https://chaz-carothers.netlify.app"
>Tree.Link</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
href="../Contact/index.html"
tabindex="-1"
aria-disabled="true"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- ================== NavBar Ends ========================== -->
<!-- ========================== Project Cards ======================== -->
<div class="container">
<div class="row">
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img src="../Projects/img/weather.jpeg" alt="Weather" />
<div class="card-body">
<h5 class="card-title">Weather API</h5>
<p class="card-text">
This is a weather app I created using the ___ API. I added
several other weather resources to provide extra information.
</p>
<a
href="../WEATHER API/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/Skeletorrr.png"
class="card- img-top"
alt="skeletor"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Whack-A-Skeletor</h5>
<p class="card-text">
This is my version of a Whack-A-Mole game that I created using plain vanilla JavaScript.
Skeletor is the mole, and the game has background music to the Price Is Right. Once the user
is finished playing, Vincent Price's notorious laugh chimes in at the end.
</p>
<a
href="https://pedantic-swartz-521f4d.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="./img/badguys.png"
class="card- img-top"
alt="villain"
/>
<div class="card-body">
<h5 class="card-title">Disney Villain Page</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore.
</p>
<a
href="https://dizney.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/memory.jpeg"
class="card- img-top"
alt="memory"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Harry Potter Memory Game</h5>
<p class="card-text">
My 7 year old son's favorite movie is Harry Potter, so I programmed a memory game for him using JavaScript.
</p>
<a
href="../Projects/Memory Game/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
-----------------/////And here is my CSS//// -------------
body {
background-color: gray;
}
.card {
transition: border-color 1s, box-shadow 0.5s;
}
.card:hover {
border-color: rgb(255, 0, 0);
box-shadow: 0px 0px 10px 2px rgb(255, 0, 0);
}
.card-title {
display: flex;
justify-content: center;
}
.film {
font-size: 3rem;
}
#media all and (max-width: 600px) {
.film {
font-size: 2rem;
}
.card {
width: 100%;
}
.card-title {
font-size: 1.5rem;
}
.img-card {
width: 100%;
}
}
I want to make this mobile responsive
The button are overlaping
{%load static%}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Upload_Image</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #7abecc !important;
}
.material-icons {
vertical-align: middle;
}
.container2{
padding-left: 40%;
}
.alert{
padding-left: 40%;
}
</style>
</head>
<body>
{% if user.is_authenticated%}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Image Captioning</a>
<i class="material-icons bg-light ">collections</i>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<span class="navbar-text">
WRITE CAPTION
Hi! {{ user.username }}
<i class="material-icons bg-dark mx-2 ">home</i>
<i class="material-icons bg-dark mx-3 ">logout</i>
</span>
</div>
</div>
</nav>
<div class="alert alert-success" role="alert">
<h1>Image Upload</h1>
</div>
<form method="post"action="/upload_save" enctype="multipart/form-data">
{%csrf_token%}
<div class="container"style="height:1000px;Max-width:100%;">
<div class ="container2" id ="images"><br>
<input type="button"class="btn btn-success cc"name="add_image" id ="add_image"value="Add Image">
<input type="submit"class="btn btn-success"value="Upload & Save Data"><br>
<!-- <input type="submit"class="btn btn-primary"value="Save Data"> -->
</div>
</form>
<script>
document.getElementById("add_image").onclick=function (ev) {
var image=document.getElementById("images");
var preview=document.createElement("img");
preview.style.width="300px";
preview.style.height="300px";
preview.style.marginTop = "20px";
preview.style.border = "thick solid #ffffff";
preview.style.borderRadius = "25px";
var newInput=document.createElement("input");
newInput.type="file";
newInput.name="file[]";
var br=document.createElement("br");
var br1=document.createElement("br");
newInput.onchange=function(ev1){
if(this.files && this.files[0])
{
var fileReader=new FileReader();
fileReader.onload=function(ev2){
preview.src=ev2.target.result;
};
fileReader.readAsDataURL(this.files[0])
}
};
image.appendChild(newInput)
image.appendChild(preview);
image.appendChild(br);
image.appendChild(br1);
}
</script>
{%else%}
<script type="text/javascript">
alert("Cant Access without Login");
window.location.href = "{%url 'login' %}"
</script>
{% endif %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
This the code of my HTML file and i want to make it mobile responsive here the image preview option are going out of the screeen
i tried many things but nothing works so i have no idea what to do next how to resolve the issue
When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
Hi hacakaman79 just add below code on head style tag
#media only screen and (max-width: 767px){
form{
width : 100%;
margin : 0 auto;
clear : both;
}
.container2{
padding : 0;
margin : 0 auto;
}
}
I have a login page that contains a form that is centered both horizontally and vertically, but you are able to scroll down slightly the height of the navigation bar. I have tried changing the classes and also the height within the style, but it messes with how the form is positioned in the center of the page. Any help would be much appreciated.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="login.php">Web App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="splash.php">Choose Login</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="cover" class="min-vh-100">
<div id="cover-caption">
<div class="container">
<div class="row text-white">
<div class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4">
<h1 class="display-4 py-2 text-truncate">Student Login.</h1>
<div class="px-2">
<form action="" method="POST" autocomplete="off" class="justify-content-center">
<div class="form-group">
<label class="sr-only" for="studentnumber">Student Number:</label>
<input type="number" min="1" class="form-control" name="studentnumber" placeholder="Student Number">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
#cover {
background-size: cover;
height: 100%;
text-align: center;
display: flex;
align-items: center;
position: relative;
}
#cover-caption {
width: 100%;
position: relative;
z-index: 1;
}
/* only used for background overlay not needed for centering */
form:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: -1;
border-radius: 10px;
}
</style>
Use fixed-top class to solve your problem. Or use flexbox instead of min-vh-100 class.
#cover {
background-size: cover;
height: 100%;
text-align: center;
display: flex;
align-items: center;
position: relative;
}
#cover-caption {
width: 100%;
position: relative;
z-index: 1;
}
/* only used for background overlay not needed for centering */
form:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: -1;
border-radius: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top fixed-top">
<div class="container">
<a class="navbar-brand" href="login.php">Web App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="splash.php">Choose Login</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="cover" class="min-vh-100">
<div id="cover-caption">
<div class="container">
<div class="row text-white">
<div class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4">
<h1 class="display-4 py-2 text-truncate">Student Login.</h1>
<div class="px-2">
<form action="" method="POST" autocomplete="off" class="justify-content-center">
<div class="form-group">
<label class="sr-only" for="studentnumber">Student Number:</label>
<input type="number" min="1" class="form-control" name="studentnumber" placeholder="Student Number">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
You may also try mine
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack Overflow</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- .static-top replaced with .fixed-top -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="login.php">Web App</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="splash.php">Choose Login</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="cover" class="min-vh-100">
<div id="cover-caption">
<div class="container">
<div class="row text-white">
<div
class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4"
>
<h1 class="display-4 py-2 text-truncate">Student Login.</h1>
<div class="px-2">
<form
action=""
method="POST"
autocomplete="off"
class="justify-content-center"
>
<div class="form-group">
<label class="sr-only" for="studentnumber"
>Student Number:</label
>
<input
type="number"
min="1"
class="form-control"
name="studentnumber"
placeholder="Student Number"
/>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password:</label>
<input
type="password"
class="form-control"
name="password"
placeholder="Password"
/>
</div>
<button
type="submit"
name="submit"
class="btn btn-primary btn-lg"
>
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS:
#cover {
background-size: cover;
height: 100%;
text-align: center;
display: flex;
align-items: center;
position: relative;
}
#cover-caption {
width: 100%;
position: relative;
z-index: 1;
}
/* only used for background overlay not needed for centering */
form:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: -1;
border-radius: 10px;
}
Hope it helps ^_^
I have a quite weird problem (and a few of my fellows) that we are unable to put "card" bootstrap class to screen center, we tried a lot of solutions which were available on the internet, but neither of those worked out.
Here's the div that doesn't want to move:
<div class="container h-100">
<div class="flex-center-wrap">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihihihihihi</div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
and here is a quick showup of how it looks like (that div is overlapping a navbar and doesn't want to go to center), vizualization is Here
You are trying to use align-items, which is a flex item property, on a div that's not a flex item.
Also, you are trying to align on the screen, but your html and body don't have height: 100% set.
To demonstrate, you can add style="height: 100vh; display: flex;" to the parent div. As you can see below, the card is getting correctly centered.
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
/*---Media Queries --*/
#media (max-width: 992px) {
}
#media (max-width: 768px) {
}
#media (max-width: 576px) {
}
a {
color: #d7eaf4;
}
body {
color: #fff;
background: #2834d8 url(img/hotel.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
font-family: poppins,Helvetica,Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0!important;
}
.footer {
font-size: 14px;
padding-left: 1rem!important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
}
.h-100 {
height: 100%!important;
}
.navbar {
background: rgba(18,13,33,.8);
color: #d7eaf4;
box-shadow: 0 5px 15px #000000c0;
margin-top: 0;
margin-bottom: 0;
}
#fixed {
background-image: url('img/mac.png');
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0e1a33" />
<title>Hotel Morenka Cipa</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="theme.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href=""><img></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ranking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
</ul>
</div>
</nav>
<footer class="footer fixed-bottom">
Copyright © 2020 Kuba Wroński & Mateusz Gołębiowski
</footer>
<div class=" d-dlex justify-content-center align-items-center a div" style="height: 100vh; display: flex;">
<div class="d-dlex justify-content-center align-items-center a div">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihihihihihi</div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
add css class
.centered {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0e1a33" />
<title>Hotel Morenka Cipa</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="theme.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href=""><img></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ranking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
</ul>
</div>
</nav>
<footer class="footer fixed-bottom">
Copyright © 2020 Kuba Wroński & Mateusz Gołębiowski
</footer>
///////////////////// add class here
<div class="centered">
<div class=" d-dlex justify-cointent-center align-items-center a div">
<div class="d-dlex justify-cointent-center align-items-center a div">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihihihihihi</div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
See it on: voiddevelopment.com
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Test Website</title>
<meta name="viewport" content="width=device-width,, maximum-scale=1, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><Void></a>
</div>
<div class="collapse navbar-collapse" id="menuCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Purchase</li>
<li>Contact Us</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="search" />
</div>
<button type="submit"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid push-spaces">
</div>
</div>
<div class="supporting">
<div class="container-fluid" style="alignment: top;">
<div class="col">
<span class="glyphicon glyphicon-eye-open"></span>
<h3>Professional Design</h3>
<br />
<p>Work with us to create the website design of your dreams.</p>
</div>
<div class="col">
<span class="glyphicon glyphicon-console"></span>
<h3>Great Functionality</h3>
<br />
</div>
<div class="col">
<span class="glyphicon glyphicon-tags"></span>
<h3>Order Now</h3>
<br />
</div>
</div>
</div>
CSS:
.jumbotron{
background: url("jumbotron.jpg") no-repeat center top;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
background-size: 70%;
margin-top: 0 auto;
}
.push-spaces {
height: 550px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
}
.supporting .glyphicon {
font-size: 4em;
}
.supporting .col h3 {
font-weight: bold;
}
On all mobile platforms, there is a odd whitespace showing up between the jumbotron image and the supporting content. This is odd because I did not add any. Perhaps some CSS tag to pull up the supporting content?
you have a div called .push-spaces that's 550px high , a class of container-fluid, which has a margin of 0 auto it is causing the white space.
This ended up being the solution:
<img src="jumbotron.jpg" class="img-responsive" style="margin-left: 10%; margin-right: 10%; width: 80%;">
Just changed the jumbotron to an image. Realized that I didn't need text over it anyway.