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>
Related
I cannot for the life of me figure out what's going on here. I want to increase the height of a DIV element the one with an id of #titleStrip, but it isn't happening. Very frustrated. Thought I had figured this kind of stuff out, but alas no. Time for a break. Any help is always appreciated. All the other answers referred me to checking the height of the containing element, but in this case, the containing element already has a height. Below is the code.
My code:
#charset "utf-8";
.rndImg {
width: 120px;
height: 132px;
float: left;
margin-right: 15px;
margin-left: 10px;
margin-bottom: 5px;
shape-outside: circle();
margin-top: 24px;
border: 2px solid blue;
border-radius: 75%;
}
#featured {
width: 85px;
height: 35px;
margin-left: 35px;
margin-top: 2px;
}
#titleBP_1 {
position: absolute;
top: 20px;
left: 40%;
}
#pDate {
position: relative;
left: 77%;
top: 15px;
}
#titleStrip {
width: 100%;
height: 120px;
background: Lavender;
overflow: hidden;
}
#postOnStrip {
display: inline;
}
#inOne {
width: 500px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
#inTwo {
width: 500px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
display: inline;
}
.blogTxt {
width: 480px;
font-family: font-family: 'Alegreya', serif;
/* 'Roboto', sans-serif; */
font-size: 13px;
line-height: .8em !important;
letter-spacing: .13em;
text-align: justify !important;
margin-bottom: 15px;
margin-left: 15px;
margin-top: 30px;
margin-right: 15px;
display: inline;
}
#topBlogReveal {
display: block;
margin-left: 345px;
}
#mainContentBox {
display: flex;
flex-flow: row;
flex-wrap: no-wrap;
margin-right: 15px;
}
#postBox {
border: 2px solid blue;
width: 90%;
height: 450px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
}
#topBanner {
width: 100%;
height: 120px;
}
.dCap {
float: left;
line-height: 90%;
width: 1.1em;
font-size: 600%;
font-family: georgia;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practicing with Div</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/newIndex.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Include google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Lato&family=Lobster&family=Montserrat&family=Open+Sans&family=Playfair+Display:ital,wght#0,400;0,500;1,400&family=Roboto&family=Viaoda+Libre&display=swap" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="javascript/index.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">About</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="index_the_real_thing.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="philosophy.html">Philosphy <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="spirituality.html">Spiritualism</a>
</li>
<li class="nav-item">
<a class="nav-link" href="socialChange.html">Social Change</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--Zeroth Row Banner Image-->
<div class="row" id="row0">
<div class="col" id="row0_col1">
<img
class="banPics"
id="topBanner"
alt="There will always be something to read here..."
src="Images/bannerPlaceholder.jpg"
>
</div>
</div>
<div class="container-fluid">
<!--First Blog Post-->
<div class="row" id="row1">
<div class="col" id="row1_col1">
<div id="postBox">
<div id="titleStrip">Featured
<h3 id="titleBP_1">Blog Post #1</h3>
</div>
<div id="postOnStrip">
<p id="pDate"><b>Posted On: </b><em>June 23, 2021</em></p>
<hr class="divider">
</div>
<div id="mainContentBox">
<div id="inOne">
<img id="topBgImg" class="rndImg" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg">
<p class="blogTxt"><span class="dCap">W</span>hat if the opiate epidemic runs deeper than purple bruises and scabrous veins running yup and down the arms of our nation's heroine addicts? What if it isn't just a socio economic problem, nor the result of international
anatagonisms vis a vis the black marget drug trade, but rather the first symptoms of a looming existential crisis for humanity at large. The cancer patient swallows pills to ease the aching malignancy bloomin down there in the organs and
tissues, the mess of physicality from which our consciousness is supposed to arise out of. But someti,es, the cancer patient blajets hersel fin morphine just to kill that deeper ache which starts when one percieves the horizon of their
own impending demnise. And who can blame them Life is hard.</p>
</div>
<div id="inTwo">
<p class="blogTxt">What if the opiate epidemic runs deeper than purple bruises and scabrous veins running yup and down the arms of our nation's heroine addicts? What if it isn't just a socio economic problem, nor the result of international anatagonisms vis
a vis the black marget drug trade, but rather the first symptoms of a looming existential crisis for humanity at large. The cancer patient swallows pills to ease the aching malignancy bloomin down there in the organs and tissues, the mess
of physicality from which our consciousness is supposed to arise out of. But someti,es, the cancer patient blajets hersel fin morphine just to kill that deeper ache which starts when one percieves the horizon of their own impending demnise.
And who can blame them Life is hard.</p>
Read More
</div>
</div>
</div>
</div>
</div>
<div class="row" id="row1">
<div class="col" id="row1_col1">
</div>
</div>
<div class="row" id="row1">
<div class="col" id="row1_col1">
</div>
</div>
</div>
</body>
</html>
The most frustrated EVER. I had this page working, but then I started rebuilding it, and here I am back at square one feeling like a dullard
The parent element div#postBox has the CSS property display: flex;, which stretches the child div to its own size. If you remove display: flex; in #postBox, you will find that #titleStrip will be 120px of height. Ofcourse, the styling for #postBox will break, so you have to figure out something there. CSS Tricks has an excellent guide on flexbox here.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.navbar-custom {
background-color:rgb(128 128 128 / 18%);
height:48px;
width:100%
}
.close{
margin-bottom: 40px;
}
h5{
margin-top: 30px;
margin-left: 30px;
margin-bottom: 10%;
}
.container-fluid {
max-width: 100%;
padding-right:0;
padding-left:0;
margin-right:0;
margin-left:0
}
html, body {
margin: 0;
padding: 0;
position: relative;
width: 100%;
right:0;
padding-right: 0px!important;
margin-right: 0px!important;
width: 100vw;
overflow-x: hidden;
}
.row row-cols-1{
width: 100%;
right: 0;
}
.img-fluid{
max-width: 100%;
height : auto;
}
.btn btn-primary{
width: 100%;
text-align: center;
display: block;
width: 48%;
box-sizing: border-box;
text-align: center;
margin-right: 10px;
position: absolute;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<nav class="navbar navbar-custom ">
<a class="navbar-brand" href="#">
<img src="logo.png" class="logo1" alt="logo" style="width:50px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<button type="button" class="close " aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</li>
</ul>
</nav>
<div class="container-fluid ">
<h5><b>Do you have Fever above 101.4?</b></h5>
</div>
<div class="container-fluid ">
<img src="fever.png" class="img-responsive center-block d-block mx-auto mt-5" alt="logo" style="width:200px;">
</div>
</div>
<div class="container mt-5">
<div class="row row-cols-1 mx-2 ">
<button type="button" class="btn btn-primary mt-5 ">Yes,I do</button>
<button type="button" class="btn btn-primary mt-1">No, I don't</button>
</div>
</div>
</body>
</html>
I am experiencing a gap (space) below buttons when i'm resizing the window in vertical manner, the gap increases as i vertically upsize the window, it takes a space, i have tried different techniques including margin bottom, but didn't accomplish what i want to be, kindly suggest a solution which includes bootstrap 4. Thanks
moreover i want to center align the image on ipad such that is aligned on iphone screens
here the gap is increased
here the gap is decreased
i want to fill the gap below screen so that the image comes at center
just like it comes at center on iphone screens
Add fixed-bottom to your last div
like this:
<div class=" fixed-bottom row row-cols-1 mx-2 ">
<button type="button" class="btn btn-primary mt-5 ">Yes,I do</button>
<button type="button" class="btn btn-primary mt-1">No, I don't</button>
</div>
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've been trying to figure this out for a while now. I've been using this template from bootstrap:https://getbootstrap.com/docs/4.1/examples/sign-in/
But im trying to add a navbar on top of it. The styling in the framework is added onto the body to make it center. The problem i am having right now is that if i add a navbar get's centered aswell since its also in the body I've tried to add custom classes but that won't help me so far. this is what i have so far for it.
Form:
<form class="form-signin" method="post">
<h1 class="h3 mb-3 font-weight-normal">Vul hier je login
gegevens</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-block"
type="submit">Inloggen</button>
<p class="mt-5 mb-3 text-muted">© 2018</p>
</form>
Nav:
<nav class="navbar navbar-expand-md navbar-dark" style="background-color:#fe5f55;">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Css:
* {
}
html,
body {
height: 100%;
}
body{
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
text-align:center;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
button.btn-block {
color:#ffffff;
background-color:#fe5f55;
}
If anyone can help me out here with this problem would be greatly appreciated!
you need to add css styling to your navbar, the following should help:
.navbar {
position: fixed;
top: 0;
width: 100%;
}
this will keep the navbar fixed to the top of the browser window - the width is up to you but i often find navigation bars to be full width. hope this helps. If not please provide a JSFiddle example and i will look at it there.
Add flex-direction: column; and align-items: stretch; to your flex-container, which is body in your case:
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 40px;
background-color: #f5f5f5;
text-align: center;
flex-direction: column;
align-items: stretch;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark" style="background-color:#fe5f55;">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<form class="form-signin" method="post">
<h1 class="h3 mb-3 font-weight-normal">Vul hier je login gegevens
</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-block" type="submit">Inloggen</button>
<p class="mt-5 mb-3 text-muted">© 2018</p>
</form>
here is the working example of it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.center{
width: 500px;
margin:0 auto;
}
.height{
height:100px;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
</nav>
<div class="height">
</div>
<div class="center">
<form class="form-signin" method="post">
<h1 class="h3 mb-3 font-weight-normal">Vul hier je login gegevens
</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-block" type="submit">Inloggen</button>
<p class="mt-5 mb-3 text-muted">© 2018</p>
</form>
</div>
</body>
</html>
check the fiddle out resize the screen to see navbar and form effect:https://jsfiddle.net/0vu83eru/7/
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.