I have one div with height 300px and width auto, inside this div other div with text, I need this result:
enter image description here
This is my code HTML:
<section class="black-block">
<div class="container">
<div class="row">
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Empty content -->
</article>
<article class="col-xs-4 col-sm-4 col-md-4">
<h3 class="text-center">My title</h3>
</article>
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Empty content -->
</article>
</div>
</div>
This is my code CSS:
.title {
margin-top: 50px;
margin-bottom: 50px;
height: 100%;
}
.back-block {
height: 300px;
background: rgb(0, 0, 0);
margin-bottom: 30px;
}
h3 {
color: rgb(255, 255, 255);
}
h4 {
color: rgb(255, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>StackOverFlow</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Black part -->
<section class="back-block">
<div class="container">
<div class="row">
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Contenido vacio -->
</article>
<article class="title col-xs-4 col-sm-4 col-md-4">
<h3 class="text-center">Text that i want centre</h3>
</article>
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Contenido vacio -->
</article>
</div>
</div>
</section>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
How can I get the image result?
use flexbox with:
display: flex;
align-items: center;
justify-content: center;
.title {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin: 50px 0;
}
.back-block {
height: 300px;
background: rgb(0, 0, 0);
margin-bottom: 30px;
}
h3 {
color: rgb(255, 255, 255);
}
h4 {
color: rgb(255, 0, 0);
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>StackOverFlow</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Black part -->
<section class="back-block">
<div class="container">
<div class="row">
<article class="">
<!-- Contenido vacio -->
</article>
<article class="title">
<h3 class="text-center">Text that i want centre</h3>
</article>
<article class="">
<!-- Contenido vacio -->
</article>
</div>
</div>
</section>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Now run your code. It might be as you want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>StackOverFlow</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
#title {
display:block;
margin-top: 50px;
margin-bottom: 50px;
position: relative
top: 0;
bottom: 0;
height:100%;
min-height:200px !important;
border:1px solid red;
}
.back-block {
height: 300px;
background: rgb(0, 0, 0);
margin-bottom: 30px;
padding:20px;
}
h3 {
color: rgb(255, 255, 255);
}
h4 {
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<!-- Black part -->
<section class="back-block" style="display:flex;justify-content:center;align-items:center;">
<div class="container">
<div class="row">
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Contenido vacio -->
</article>
<article id="title" style="display:flex;justify-content:center;align-items:center;" class="col-xs-4 col-sm-4 col-md-4">
<h3 class="text-center">Text that i want centre</h3>
</article>
<article class="col-xs-4 col-sm-4 col-md-4">
<!-- Contenido vacio -->
</article>
</div>
</div>
</section>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">
</script>
</body>
</html>
Related
Whats up friends, great friday for yous!
So I been rebuilding the website for the company I work to learn HTML+CSS.
Just doing a replica of the original website and its been going great.
So I am having some issues on the the footer right now, the items are mixing on smaller screens.
On the image below you can see (1) how it is and the desired result and (2) what is happening with me.
Here is my code:
.footer {
color: #fff;
height: 140px;
background: linear-gradient(180deg, #130936, #130936) no-repeat center;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 70%;
}
p, p a {
text-decoration:none;
color: hsla(0, 0%, 100%, 0.72);
letter-spacing: 0.3px;
font-size:14px;
}
.footer-brand {
width: 136px;
background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
border: 0;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
i {
color: #fff;
font-size: 30px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<footer class="footer">
<div class="container-md h-100">
<div class="row align-items-center h-100 row-cols-4">
<div class="col-3"><img class="footer-brand" src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png" alt=""></div>
<div class="col-3">
<p class="p1">+44 (0) 700 677 1336</p>
<p>info#companyIwork.com</p>
</div>
<div class="col-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-3">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I do appreciate your help.
I think what you're missing is the use of the responsiveness prefixes for the col class, when you declare col or col-x as a class it means that the class would automatically be with a fixed size in relation to the other grids, to overcome content overlapping you'll need to the prefixed to determine the screen size from which the content is being displayed upon i.e col-sm-x, col-md-x etc
Read more about bootstrap grid from here https://getbootstrap.com/docs/5.3/layout/grid/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css"
/>
</head>
<body>
<footer class="footer">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-3 text-center">
<img
class="footer-brand image-fluid"
src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png"
alt=""
style="width:80px"
/>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p class="p1">
+44 (0) 700 677 1336
</p>
<p>
info#companyIwork.com
</p>
</div>
<div class="col-xs-12 col-md-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
NOTE: The snippet above does not consider your stylesheet, so be cautious your stylesheet might override some bootstrap styles
SUGGESTION: Also consider reading bootstrap colors from https://getbootstrap.com/docs/5.0/utilities/colors/
I need to make a fixed grid layout which i will then customize, the webpage have to have just full screen height and mustn't be V scrollable.
The page mocukup looks like this:
So i was trying to archieve it by using bootstrap grid system like this:
.content {
background-color: rgb(0, 119, 255);
}
.content .dettagli {
background-color: aquamarine;
}
.content .logo {
height: 100px;
background-color: rgb(255, 0, 0);
}
.content .action-bar {
height: 200px;
background-color: rgb(246, 255, 127);
}
.scontrino {
background-color: rgb(255, 127, 127);
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="asssets/css/index.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 content">
<div class="row">
<div class="col-sm-12 logo">
</div>
<div class="col-sm-12 dettagli">
</div>
<div class="col-sm-12 action-bar">
</div>
</div>
</div>
<div class="col-sm-3 scontrino">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script></body>
</html>
But actually the row and colls wrap the content so are not shown, while how can i set them immediatly to cover the entire page?
the logo col should cover only 100px of height while the action-bar 200px...
EDIT i'm trying to set 100% height to dettagli but it takes more space and the page become scrollable, while that 100% have to fit between .logo and .action-bar
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-9 content">
<div class="row h-100">
<div class="col-sm-12 logo">
</div>
<div class="col-sm-12 dettagli h-100">
</div>
<div class="col-sm-12 action-bar">
</div>
</div>
</div>
<div class="col-sm-3 scontrino">
</div>
</div>
</div>
Here an example of what I am trying to explain you in comment. You cannot apply % height everywhere, except if you start from html.
So here an example working. I let you understand.
.content {
background-color: rgb(0, 119, 255);
}
.height-fix-on-row{
height:300px;
/* You can try with different height as below
height:20vh;
height:20em;
height:20rem;
*/
}
.content .dettagli {
background-color: aquamarine;
}
.content .logo{
background-color: rgb(255, 0, 0);
}
.content .action-bar {
background-color: rgb(246, 255, 127);
}
.scontrino {
background-color: rgb(255, 127, 127);
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="asssets/css/index.css">
</head>
<body>
<div class="container-fluid">
<div class="row height-fix-on-row">
<div class="col-sm-9 content h-100">
<div class="row h-100">
<div class="col-sm-12 logo h-25">
</div>
<div class="col-sm-12 dettagli h-50">
</div>
<div class="col-sm-12 action-bar h-25">
</div>
</div>
</div>
<div class="col-sm-3 scontrino h-100">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script></body>
</html>
I'm having an image in the layout, and when I resize the window it's size goes down and become too small.
I want to make the image fix at it's position and prevent it from become smaller and smaller as I shrink the window.
HTML
<div class="container-fluid" style="background-color: #333333;padding-left:30px;">
<div class="row">
<div class="col-md-12 outsidediv">
<!-- image -->
<div class="col-md-2 col-sm-2 col-xs-2 image" >
<img src="https://i.postimg.cc/50JVVSZF/checkk.png" style="max-width:100%;" alt="img">
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<h2 style="font-size:2rem;color:#666666;">
<strong>
Some other Text alongside
</strong></h2>
</div>
</div>
</div>
</div>
CSS
.image{
display: flex;
flex-direction: column;
align-items: flex-start;
word-break:none;
color:white;
}
See this fiddle
When you shrink the window size, the image size decreases, how to fix this ?
You can set a static size with CSS: width: 93px; height: 96px;. You can either apply it to the '.image' class div or the image specifically. Here it is with inline CSS on the image tag:
.image{
display: flex;
flex-direction: column;
align-items: flex-start;
word-break:none;
color:white;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-12 outsidediv">
<!-- image -->
<div class="col-md-2 col-sm-2 col-xs-2 image" >
<img src="https://i.postimg.cc/50JVVSZF/checkk.png" style="width: 93px; height: 96px;" alt="img">
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<h2 style="font-size:2rem;color:#666666;">
<strong>
Some other Text alongside
</strong></h2>
</div>
</div>
</div>
</body>
</html>
You can just delete max-size and it will stay at the same size all the time.
.bs-example{
margin: 20px;
}
.outsidediv{
/*border:solid;*/
}
ul li{
/*margin-left:15px;*/
box-sizing: border-box;
font-size:1.3rem;
}
#play{
margin-top:35px;
}
.image{
display: flex;
flex-direction: column;
/*justify-content: center;*/
/*font-size:2rem;*/
align-items: flex-start;
word-break:none;
color:white;
}
#bt{
margin-top:40px;
position: relative;
margin-left:30px;
font-size:2rem;
}
nav{
min-width: 100%;
}
body{
margin:0px;
padding:0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Main page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" 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>
<!-- font awesome for the icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid" style="background-color: #333333;padding-left:30px;">
<div class="row">
<div class="col-md-12 outsidediv">
<!-- image -->
<div class="col-md-2 col-sm-2 col-xs-2 image" >
<img src="https://i.postimg.cc/50JVVSZF/checkk.png" alt="img">
</div>
<div class='col-md-2 col-sm-2 col-xs-2'>
<h2 style="font-size:2rem;color:#666666;">
<strong>
Some other Text alongside
</strong></h2>
</div>
</div>
</div>
</div>
</body>
</html>
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>