Trying to align my footer icons but I can't seem to center the first 2 images. The bootstrap icons center fine, but the first 2 images don't. I have tried doing things like align-items-center, justify-content-center, text-center, etc.
using bootstrap v5.3.0-alpha-1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</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="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="container" style="color: black;">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-muted">© 2022 Company, Inc</span>
</div>
<ul class="nav justify-content-center">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Team</li>
<li class="nav-item">Pricing</li>
</ul>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao-pass">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" class="opensea_icon" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://twitter.com/xxx">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://t.me/xxx">
<i class="bi bi-telegram"></i>
</a>
</li>
</ul>
</footer>
</div>
<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>
The vertical-align property on your images is different than the bootstrap icons:
If you inspect the bootstrap icon, you'll see there is:
vertical-align: -.125em;
Try to add the same vertical-align to your images.
Related
I'm new to website developement. I'm trying to get my embbeded twitch player to use it's parent full width. The height seems so work just fine, but whilst using the d-flex class from bootstrap it makes the player extremly thin.
Please watch my code here:
https://jsfiddle.net/Sagan_owl/nwvt2ag8/3/
Don't mind the player error message, that's expected
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brams 225</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="./main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script src="https://embed.twitch.tv/embed/v1.js"></script>
</head>
<body>
<main class="container-fluid">
<div class="row corps">
<div class="col-lg-2 bg-warning">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Donations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Professionnel</a>
</li>
</ul>
</div>
<div class="col-lg-10 d-flex flex-column">
<div class="row d-flex align-items-stretch section2-haut bg-success">
<div class="col-lg-12 d-flex align-self-center justify-content-center">
<div id="twitch-embed"></div>
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: "100%",
height: "100%",
channel: "monstercat",
// only needed if your site is also embedded on embed.example.com and othersite.example.com
parent: ["embed.example.com", "othersite.example.com"]
});
</script>
</div>
</div>
<div class="row section2-bas bg-info ">
<div class="col-lg-4 mt-auto text-center">
<img src="https://panels-images.twitch.tv/panel-18340583-image-9eaaa5a0-b00a-4475-bc6a-c6b5930bae48"
class="img-fluid" alt="twitter img not found">
</div>
<div class="col-lg-4 mt-auto text-center">
<img src="https://panels-images.twitch.tv/panel-18340583-image-1deed596-2b7e-4781-9628-e3a82b4cc9c2"
class="img-fluid" alt="twitter img not found">
</div>
<div class="col-lg-4 mt-auto text-center">
<img src="https://panels-images.twitch.tv/panel-18340583-image-f0ce67ba-5a55-4aa6-8d94-b628ebac530a"
class="img-fluid" alt="twitter img not found">
</div>
</div>
</div>
</div>
</main>
</body>
</html>
----------
main{
height: 100vh;
}
.corps{
height: 100vh;
}
.section2-haut{
height: 80vh;
}
.section2-bas{
height: 20vh;
}
You need to set the dimensions on the parent div
https://jsfiddle.net/pu5rhtxo/
#twitch-embed {
width: 100%;
}
In this example I set some CSS on the parent Div
Also fixed the parent in the JS script tags so the player actually worked
I have tried multiple things that I have read trying to correct this issue, the big one that I've seen says that when you load you will see an error in the console, there is no error so I don't believe that one is my problem. My navbar will collapse as the screen gets smaller, but when you click on the hamburger nothing happens.
Here is my HTML
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<div class="container-fluid">
<div class="d-none d-lg-block center">
<p class="navbar-brand d-none d-lg-block nav-quote">"She believed she could so she did." -R.S. Grey
</p>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#aboutmelink">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html">My Resume</a></li>
<li class="nav-item"><a class="nav-link" href="index.projects.html">My Projects</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html.html">Contact Me</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions
and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and
we no longer hosted websites so my next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img
src="./assets/sylvan_home_logo.png"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego"
href="https://www.sylvanlearning.com/stem/robotics-science"
target="_blank"><img
src="./assets/lego.jpg"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img
src="./assets/tynker.png"
height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
Try this. The main thing here is Navigation bar. I haven't changed the rest. It seems that your markup was not in proper order. I have solved it for you.
Also I have used scripts from your question. I haven't changed their order.
Run the code Snippet
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and we no longer hosted websites so my
next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img src="./assets/sylvan_home_logo.png" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego" href="https://www.sylvanlearning.com/stem/robotics-science" target="_blank"><img src="./assets/lego.jpg" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img src="./assets/tynker.png" height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
So for a school project im making a website but whenever I use container and container-fluid no matter what I use i have these empty spaces on the side and I have no clue how to fix them so i came here for help.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" id="nav">
<div class="row">
<div class="col-xl-12">
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
</html>
I do hope I can find help here and thanks in advance!
Bootstrap adds in some spacing by default to container and container-fluid classes. To remove these, you can specify you want no padding / margin on each item by adding a class using the format {property}{sides}-{size} where size is 0.
For example, to remove padding you can add a p-0 class. You can also remove a specific side:
pt-0 top
pr-0 right
pb-0 bottom
pb-0 left
Similarly, to remove margin you can add a m-0 class.
For more info on spacing, check out: https://getbootstrap.com/docs/4.0/utilities/spacing/
To remove these default spacing use bootstrap grid classes can be removed with .no-gutters.
Here is an example
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
For more information: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Not sure what you mean by white spaces, you might want to define with an image. If you mean that your body doesn't fill the page, the problem is nested containers. See comments below.
<body>
<!-- This container is going to "add space" to your sides. -->
<div class="container" id="nav">
<div class="row">
<!-- This will fill all 12 columns on XL viewport,
but the columns are inside the parent container. -->
<div class="col-xl-12">
<!-- This will go to the limits of the parent container above. -->
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
I am trying to build a website (using bootstrap 4) that has a footer containing 3 columns. When the browser is big enough (e.g. open on PC) it looks absolutely fine, but if the browser is compressed (e.g. mobile phone) then you only see part of the footer.
What am I doing wrong please? I have been googling for hours, reading as many other Stack Overflow articles and trying them and not getting anywhere.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 200px; /* bottom has to be the same as footer height */
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.copyright-container
{
padding: 10x;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="2.png" alt="">
</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="#">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container"><p>Page Content</p></div>
<footer class="section footer-classic context-dark bg-image" style="background: #000000;">
<div class="container">
<div class="row row-30">
<div class="col-md-4 col-xl-5">
<div class="pr-xl-4">
<hr>
<div class="text-center center-block">
<p>You can follow us on:</p>
<i id="social-fb" class="fa fa-facebook-square fa-3x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-3x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-3x social"></i>
</div>
<hr>
</div>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Site</h5>
<ul class="nav-list">
<li>About</li>
<li>Help</li>
<li>Accessibility</li>
</ul>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Legal</h5>
<ul class="nav-list">
<li>Terms of Service</li>
<li>Privacy Policy</li>
<li>Cookie Policy</li>
</ul>
</div>
</div>
</div>
<div class="row copyright-container">
<p class="rights">
<span>© </span><span class="copyright-year">2020</span><span> </span><span>PERSON</span><span>. </span><span>All Rights Reserved.</span></p>
</div>
</footer>
</body>
</html>
I think the main issue might be incorrect structure (HTML along with the corresponding Bootstrap classes). If you're going to use Bootstrap's grid system, then it's a good idea to follow the structure that they recommend in order to have a fully responsive website.
Following their convention and structure can be tricky at first, but once you go through the motions it should work fine. Be aware that specific styling and layout does require some research.
The following example was inspired from their project examples page.I adapted the code based on your question regarding the footer responsiveness. I removed the top navbar for simplicity:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sticky Footer inspired by Bootstrap Examples</title>
<!-- Bootstrap 4 CDN as of 01/17/2020 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fontawesome 4.7 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,
body {
height: 100%;
}
.fa {
color: white;
}
</style>
</head>
<body class="d-flex flex-column">
<!-- Main page content -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Main container</h1>
</div>
</main>
<!-- Respoonsive footer using Bootstrap's grid layout -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<div class="row">
<div class="col align-self-center">
<i class="fa fa-twitter-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-envelope-square fa-4x" aria-hidden="true"></i>
</div>
<div class="col">
<h5>Site</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">About</a></li>
<li><a class="text-muted" href="#">Help</a></li>
<li><a class="text-muted" href="#">Accessibility</a></li>
</ul>
</div>
<div class="col">
<h5>Legal</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Terms of Service</a></li>
<li><a class="text-muted" href="#">Privacy Policy</a></li>
<li><a class="text-muted" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
Working example here
I have edit your css & HTML
html,body, .wrapper {
position: relative;
height: 100%;
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
}
.copyright-container
{
padding: 10x;
}
https://jsfiddle.net/lalji1051/r5aqxetv/7/
I am trying to figure out why my container is overlapping my header when it comes to the small screen section. My goal is for the container (and all the contents inside of it) to be underneath my header on the page. It works perfectly for the extra small screen part, but the small screen is where it all goes wrong. I am just beginning my journey into bootstrap so please ignore my sloppy code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="css/grid-system-test.css">
</head>
<body>
<header>
<div class="d-sm-none"> <!-- Navbar is only viewable on extra small screens -->
<div class="white-block">
<img class="comp-logo mx-auto d-block" src="img/logo.png" alt="company logo">
</div>
<nav class="text-center">
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
<div class="col-12">
<ul class="nav xs-nav">
<li class="nav-item">
<a class="nav-link" href="#"><p>SERVICES</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>WORK</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>BLOG</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>CONTACT</p></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-sm-block"> <!------------------------ NAVBAR FOR SMALL SCREEN STARTS HERE -------------------------->
<nav class="white-bg text-center small-nav">
<ul class="nav justify-content-center">
<li class="small-nav-item">
<a class="small-nav-link" href="#">SERVICE</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">WORK</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#"><img class="comp-logo comp-logo-small" src="img/logo.png"></a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">BLOG</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">CONTACT</a>
</li>
</ul>
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
</nav>
</div>
</header>
<!-------------------------------------------- CONTAINER STARTS HERE -------------------------------------------------->
<div class="container-fluid text-center">
<h2>VISUAL DESIGN & WEB DEVELOPMENT</h2>
<h4 class="park-city-text">FROM PARK CITY, UTAH</h4>
<div class="row">
<div class="col-6">
<div class="circle-big red-bg ml-4">
<h6 class="text-light center-txt">DESIGN</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big orange-bg mr-4">
<h6 class="text-light center-txt">DEVELOP</h6>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="circle-big green-bg ml-4 circle-margin-top">
<h6 class="text-light center-txt">SUPPORT</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big blue-bg mr-3 circle-margin-top">
<h6 class="text-light center-txt">HOST</h6>
</div>
</div>
</div>
<!-- end of circle images -->
<p class="selectW">SELECTED WORK</p>
<img class="ipad rounded" src="img/apple-ipad.jpg" alt="apple on ipad">
<div class="row">
<div class="col-6">
<p class="float-left ml-3">FEATURED PROJECT</p>
</div>
<div class="col-6">
<div class="circle-sm red-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm orange-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm green-bg small-circle-text float-right mr-2"><p class="font-weight-bold">S</p></div>
<div class="circle-sm blue-bg small-circle-text float-right mr-2"><p class="font-weight-bold">H</p></div>
</div>
</div>
</div>
</body>
</html>