I want to scale the below image to the height of the header. Can anyone please tell me why it is not working?
html,
body {
height: 100%;
width: 100%;
background-color: red;
}
#header {
background-color: green;
height: 10%;
}
#body {
background-color: blue;
height: 70%;
}
#footer {
background-color: orange;
height: 20%;
}
img {
max-height: 100%;
max-width: 100%;
}
.scaleableImage {
height: 100%;
width: auto;
}
.scaleableImage img {
max-height: 100%;
max-width: 100%;
border: 1px solid red;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<style type="text/css">
</style>
<div class="container-fluid" id="header">
<div class="row">
<div class="col-2">
<a href="#" class="scaleableImage">
<img src="https://www.googlewatchblog.de/wp-content/uploads/google-logo-perfekt.jpg" />
</a>
</div>
<div class="col-6">
<span>Second</span>
</div>
<div class="col-4">
<span>Third</span>
</div>
</div>
</div>
<div class="container-fluid" id="body">
<div class="row">
</div>
</div>
<div class="container-fluid" id="footer">
<div class="row">
<div class="col-6">
<span>First</span>
</div>
<div class="col-6">
<span>Second</span>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I've adjusted your CSS with the main changes being the following.
#header .row {
max-height: 100%;
}
#header .col-2 {
padding: 0;
}
This limits the row class within the header to a max height of 100%. As you set #header to 10%, row will stay within that height. Also, padding set on col-2 was preventing the image from using the full space. Add padding back as you see fit, but keep in mind that it will shrink the image accordingly if the col class width is reduced. Below is a working example.
html,
body {
height: 100%;
width: 100%;
background-color: red;
}
#header {
background-color: green;
height: 10%;
}
#body {
background-color: blue;
height: 70%;
}
#footer {
background-color: orange;
height: 20%;
}
#header .row {
max-height: 100%;
}
#header .col-2 {
padding: 0;
}
.scaleableImage img {
max-height: 100%;
max-width: 100%;
border: 1px solid red;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid" id="header">
<div class="row">
<div class="col-2">
<a href="#" class="scaleableImage">
<img src="https://www.googlewatchblog.de/wp-content/uploads/google-logo-perfekt.jpg" />
</a>
</div>
<div class="col-6">
<span>Second</span>
</div>
<div class="col-4">
<span>Third</span>
</div>
</div>
</div>
<div class="container-fluid" id="body">
<div class="row">
</div>
</div>
<div class="container-fluid" id="footer">
<div class="row">
<div class="col-6">
<span>First</span>
</div>
<div class="col-6">
<span>Second</span>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Related
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.
Why is align-content: space-around not working here? What is the fix? Need to align columns 3 and 4 to bottom.
.row {
background: #f8f9fa;
}
.col {
border: solid 1px red;
padding: 10px;
height: 200px;
}
.col-sm-6 {
border: 1px solid green;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
<div class="row align-content-around">
<div class="col-sm-6">
1
</div>
<div class="col-sm-6">
2
</div>
<div class="col-sm-6">
3
</div>
<div class="col-sm-6">
4
</div>
</div>
</div>
</div>
</div>
Fiddle - https://jsfiddle.net/afelixj/y9perjhf/
Your row has auto height - add height: 100% or h-100 class to it - see demo below:
.row {
background: #f8f9fa;
}
.col {
border: solid 1px red;
padding: 10px;
height: 200px;
}
.col-sm-6 {
border: 1px solid green;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
<div class="row align-content-around h-100">
<div class="col-sm-6">
1
</div>
<div class="col-sm-6">
2
</div>
<div class="col-sm-6">
3
</div>
<div class="col-sm-6">
4
</div>
</div>
</div>
</div>
</div>
I'm trying to make a simple webpage with header and footer using bootstrap 4, the problem is that the footer won't show in the end of the page.
here is my html, please can anyone tell me what to do.
html, body {
height: 100%;
}
.appbox {
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>
<div class="container appbox">
<div class="row align-items-start">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="row align-items-end">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>
Please try it:
html, body {
height: 100%;
}
.appbox {
display: flex;
flex-wrap: wrap;
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
min-height: 100vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>
<div class="container appbox">
<div class="row align-items-start w-100">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="row align-items-end w-100">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>
You are using bootstrap classes in a wrong way. First you appbox is not having height:100% and align-items-* should be used with a flex container to align items inside not with the element you want to align.
You can correct your code like below without adding any external CSS (https://getbootstrap.com/docs/4.2/utilities/flex/)
html,
body {
height: 100%;
}
.appbox {
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- you make this 100% height and a flex container with colmun direction -->
<div class="container appbox h-100 d-flex flex-column">
<div class="row">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<!-- you use margin-top:auto to push footer at the bottom -->
<div class="row mt-auto">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>
Are you looking this kind of View ? then please check
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>
<div class="container appbox">
<div class="row align-items-start">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="wrapper">
<div class="container">
<header class="hero-unit">
<h1>Header</h1>
<p>It's really <strong>not</strong> that hard, y’know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p>
</header>
</div>
<div class="push"><!--//--></div>
</div>
<footer>
<div class="container">
<p>Put together in less than five minutes by Martin Bean. Uses Twitter Bootstrap and Ryan Fait’s Sticky Footer.</p>
</div>
</footer>
Hope this helps.. thanks
html, body {
height: 100%;
}
.appbox {
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
height: 100%;
}
.footer{
position:absolute;
bottom:0;
right:0;
left:0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>
<div class="container appbox">
<div class="row align-items-start">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="row align-items-end footer">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>
I've been working on a website and I can't get the navbar at the top to display above everything else. It displays above the first header and p tag but after that when scrolling more it displays under the images and headers that are in the bootstrap 4 grids. I have tried setting the z-index to stupidly big numbers, setting the position to absolute and setting the z-index to a big number again, but neither of those approaches worked. I know I have set the background of the div/navbar to black but it still won't cover up the images/text. How can I fix this?
TL;DR: my navbar won't display above any content in my bootstrap rows and i've tried everything, how do i fix this?
#font-face {
font-family: Quicksand-Bold;
src: url(../data/Quicksand-Bold.otf);
}
#font-face {
font-family: Quicksand;
src: url(../data/Quicksand-Regular.otf);
}
html {
background-color: black;
}
.container-fluid {
background-color: black;
}
.row {
margin:auto;
}
.sticky {
position: sticky;
top:0;
}
.navitem {
color:white;
}
.navline {
height: 5px;
width: 0;
background-color: #fff;
margin: auto;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.navitem:hover + .navline {
-webkit-transition: width 0.5s;
transition: width 0.5s;
width:100%;
}
.navigation {
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
background-color: black;
}
.navigation li {
display: inline-block;
font-size: 20px;
padding: 20px;
font-family: Quicksand, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navigation li a:hover {
text-decoration: none;
color:#ddd;
}
.navigation li a:active {
text-decoration: none;
color:#ddd;
}
.active {
color:#fff;
}
.navline-active {
height: 5px;
width: 100%;
background-color: #fff;
margin: auto;
}
#headerline {
height: 10px;
width: 70%;
background-color: #fff;
margin: auto;
}
.no-a-style {
color:white;
}
.no-a-style:hover {
text-decoration: none;
color:grey;
}
.navheader {
color:white;
padding-right: 10px;
font-size:25px;
font-family: Quicksand-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer {
text-align: center;
color: lightgrey;
font-family: Quicksand, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer-bold {
font-family: Quicksand-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.body {
color:white;
}
.body p {
font-size:18px;
}
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.nav-container {
background:black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- redacted lmao -->
<!-- Site embed properties -->
<meta property="og:title" content="Hex - Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://hexbugman213.net/" />
<meta property="og:image" content="http://hexbugman213.net/favicon.png" />
<meta property="og:description" content="<?php echo $desc; ?>" />
<title>Hex - Portfolio</title>
<!-- meta -->
<meta name="Hex" content="Hex - Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style/beanstrap -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container sticky">
<div class="sticky nav-container">
<ul class="navigation">
<li><span class="navheader">Hex</span>
<div class="navline"></div>
</li>
<li>Home
<div class="navline"></div>
</li>
<li>Links
<div class="navline"></div>
</li>
<li>Portfolio
<div class="navline"></div>
</li>
<li>Files
<div class="navline"></div>
</li>
<li>Other
<div class="navline"></div>
</li>
</ul>
</div>
</div>
<br>
<div class="container body">
<h1>Portfolio</h1>
<h2>Click on any item below for more information.</h2>
<br>
<div class="row">
<div class="col-sm-4" data-aos="fade-right"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-left">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
</div>
<div class="row">
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
</div>
<hr>
<div id="footer">
<h3>Website designed by <span id="footer-bold">Hex</span>.</h3>
</div>
</div>
<script>
AOS.init();
</script>
</body>
</html>
Add z-index property for your sticky class in css and set it to a high value. That will keep it above anything else.
.sticky {
position: sticky;
top:0;
z-index: 1000;
}
#font-face {
font-family: Quicksand-Bold;
src: url(../data/Quicksand-Bold.otf);
}
#font-face {
font-family: Quicksand;
src: url(../data/Quicksand-Regular.otf);
}
html {
background-color: black;
}
.container-fluid {
background-color: black;
}
.row {
margin:auto;
}
.sticky {
position: sticky;
top:0;
z-index: 1000;
}
.navitem {
color:white;
}
.navline {
height: 5px;
width: 0;
background-color: #fff;
margin: auto;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.navitem:hover + .navline {
-webkit-transition: width 0.5s;
transition: width 0.5s;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- redacted lmao -->
<!-- Site embed properties -->
<meta property="og:title" content="Hex - Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://hexbugman213.net/" />
<meta property="og:image" content="http://hexbugman213.net/favicon.png" />
<meta property="og:description" content="<?php echo $desc; ?>" />
<title>Hex - Portfolio</title>
<!-- meta -->
<meta name="Hex" content="Hex - Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style/beanstrap -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container sticky">
<div class="sticky nav-container">
<ul class="navigation">
<li><span class="navheader">Hex</span>
<div class="navline"></div>
</li>
<li>Home
<div class="navline"></div>
</li>
<li>Links
<div class="navline"></div>
</li>
<li>Portfolio
<div class="navline"></div>
</li>
<li>Files
<div class="navline"></div>
</li>
<li>Other
<div class="navline"></div>
</li>
</ul>
</div>
</div>
<br>
<div class="container body">
<h1>Portfolio</h1>
<h2>Click on any item below for more information.</h2>
<br>
<div class="row">
<div class="col-sm-4" data-aos="fade-right"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-left">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
</div>
<div class="row">
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
</div>
<hr>
<div id="footer">
<h3>Website designed by <span id="footer-bold">Hex</span>.</h3>
</div>
</div>
<script>
AOS.init();
</script>
</body>
</html>
Run code snippet
I am new to Bootstrap, and would like to move my box2 and box3 divs to the bottom of the column on the right side of the page. I can't seem to work out how to do this without resorting to an empty row that is above box2 and box3. Here is my current html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body style="background:pink;">
<div class="jumbotron" style="background:pink;">
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is there a way of doing this using the Bootstrap grid?
Any help is much appreciated!
Try this
<!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 rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var bottom1 = $('.box1').outerHeight(true);
var bottom2 = $('.right-sides-columns').outerHeight(true);
var topheight = bottom1 - bottom2;
$('.right-sides-columns').css("margin-top", topheight + "px");
});
</script>
<style type="text/css">
.jumbotron {
text-align: center;
padding-bottom: 5px;
}
h2 {
margin: auto;
}
.box1 {
min-height: 450px;
border-style: dotted;
}
.box2 {
min-height: 150px;
margin-bottom: 10px;
border-style: dotted;
}
.box3 {
min-height: 30px;
border-style: dotted;
}
</style>
</head>
<body >
<div class="jumbotron" >
<h2>Lyrical</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="box1">FORM</div>
</div>
<div class="col-lg-3 right-sides-columns">
<div class="row">
<div class="col-lg-12">
<div class="box2">Description</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="box3">Credits</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not a specific bootstrap answer, but a more general approach:
It is possible to push an element to the bottom of it's parent with flexbox's align-self.
.flex-row {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 300px;
}
.flex-col {
background: rebeccapurple;
}
.flex-col--end {
align-self: flex-end;
}
<div class="flex-row">
<div class="flex-col">
<p>Lorem Ipsum</p>
</div>
<div class="flex-col flex-col--end">
<p>Dolor Sit</p>
</div>
</div>