How do I make the columns end at the footer instead of going through them? In the preview, you can see some of the last images being covered up by the footer.
Is it because the footer is fixed-bottom?
Do I need to set the height of the 2 columns to x-footer height? Any help would be appreciated
using bootstrap 5.3.0 alpha-1
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
window.onload = (event) => {
const tooltip = bootstrap.Tooltip.getInstance('#add_bot_button') // Returns a Bootstrap tooltip instance
tooltip.show();
};
#navbar_wallet_address {
list-style-type: none;
}
#navbar_wallet_address a ul li {
list-style-type: none;
}
#sidebar {
height: 100vh;
max-height: 100vh;
background: lightgreen;
}
<!doctype html>
<html lang="en">
<title>discord dashboard -- 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/NEW_DISCORD.css') }}" />
<body>
<div class="container-fluid px-0" style="overflow-y: hidden; height: 100vh;">
<div class="row gx-0">
<nav class="col-2 p-0 d-flex flex-column gap-1 text-dark" id="sidebar">
<!-- sidebar header -->
<div class="text-dark p-3" style="text-align: center; align-items: center;">
<h4>
Sidebar Header
</h4>
</div>
<div class="flex-grow-1 overflow-auto text-dark list-group" style="align-items: center; border: 1px solid black;">
<ul class="nav flex-column mb-auto align-items-center" id="owned_guilds_list">
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br> <li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br> <li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
</ul>
</div>
</nav>
<div class="col-10 align-items-center text-align-center p-3 flex-grow-1 overflow-auto" style="background: lightyellow; height: 100vh;">
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
</div>
<nav class="navbar fixed-bottom bg-dark">
<div class="container-fluid">
<!-- <a class="navbar-brand" href="#">Fixed bottom</a> -->
<div class="">
<a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Tooltip test 1234">
Button 1
</a>
</div>
<!-- <div class="position-absolute top-50 start-50 translate-middle"> -->
<div class="position-absolute bottom-25 start-50 translate-middle-x">
<a href="#" class="btn btn-primary" id="add_bot_button">
Button 2
</a>
<a href="#" class="btn btn-primary" id="add_bot_button">
Button 3
</a>
</div>
<div class="text-white">
Username
</div>
</div>
</nav>
</div>
</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>
<script type="text/javascript" src="{{ url_for('static', filename='script/NEW_DISCORD.js') }}"></script>
<!-- <script type="application/javascript" src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script> -->
</body>
</html>
You have the viewport height set to 100 which is partially obscurred by the footer.
You can tell the sidebar and main divs to only occupy the space that is not covered by the footer.
Change the height: 100vh in your divs to height: 94vh.
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
window.onload = (event) => {
const tooltip = bootstrap.Tooltip.getInstance('#add_bot_button') // Returns a Bootstrap tooltip instance
tooltip.show();
};
#navbar_wallet_address {
list-style-type: none;
}
#navbar_wallet_address a ul li {
list-style-type: none;
}
#sidebar {
height: 100vh;
max-height: 100vh;
background: lightgreen;
}
<!doctype html>
<html lang="en">
<title>discord dashboard -- 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/NEW_DISCORD.css') }}" />
<div class="container-fluid px-0" style="overflow-y: hidden; height: 94vh;">
<div class="row gx-0">
<nav class="col-2 p-0 d-flex flex-column gap-1 text-dark" id="sidebar">
<!-- sidebar header -->
<div class="text-dark p-3" style="text-align: center; align-items: center;">
<h4>
Sidebar Header
</h4>
</div>
<div class="flex-grow-1 overflow-auto text-dark list-group" style="align-items: center; border: 1px solid black;">
<ul class="nav flex-column mb-auto align-items-center" id="owned_guilds_list">
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br> <li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br> <li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
<li class="nav-item">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" class="rounded-circle" style="height: 50px; width: 50px;">
</li>
<br>
</ul>
</div>
</nav>
<div class="col-10 align-items-center text-align-center p-3 flex-grow-1 overflow-auto" style="background: lightyellow; height: 94vh;">
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br> <a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
<a href="#" class="href">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/disguised-face_1f978.png" style="height: 100px; width: 100px;" />
</a>
<br>
</div>
<nav class="navbar fixed-bottom bg-dark">
<div class="container-fluid">
<!-- <a class="navbar-brand" href="#">Fixed bottom</a> -->
<div class="">
<a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Tooltip test 1234">
Button 1
</a>
</div>
<!-- <div class="position-absolute top-50 start-50 translate-middle"> -->
<div class="position-absolute bottom-25 start-50 translate-middle-x">
<a href="#" class="btn btn-primary" id="add_bot_button">
Button 2
</a>
<a href="#" class="btn btn-primary" id="add_bot_button">
Button 3
</a>
</div>
<div class="text-white">
Username
</div>
</div>
</nav>
</div>
</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>
<script type="text/javascript" src="{{ url_for('static', filename='script/NEW_DISCORD.js') }}"></script>
<!-- <script type="application/javascript" src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script> -->
</html>
Because the footer is fixed, it's being positioned relative to the viewport. I would suggest you apply some css to the content that is being covered
covered-content {
margin-bottom: //height of footer;
}
if you have a dynamic footer you can use some javascript Element.clientHeight to get the computed footer height.
Related
I have a main content part of a sidebar that is supposed to be scrollable if it overflows. The problem is that it makes the whole page scroll instead of just the sidebar. The other problem is that it's supposed to scroll inside of it's container instead of making the whole sidebar scroll.
How do I fix this?
it's supposed to look like this:
___
header
___
nav pill 1
nav pill 2
___
a href image
a href image
...
...
___
button
text
___
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
window.onload = (event) => {
const tooltip = bootstrap.Tooltip.getInstance('#add_bot_button') // Returns a Bootstrap tooltip instance
tooltip.show();
};
document.getElementById('server_wide_button').addEventListener('click', () => {
document.getElementById('channel_specific_button').classList.remove('active');
document.getElementById('server_wide_button').classList.add('active');
});
document.getElementById('channel_specific_button').addEventListener('click', () => {
document.getElementById('server_wide_button').classList.remove('active');
document.getElementById('channel_specific_button').classList.add('active');
});
document.getElementById('add_bot_button').addEventListener('click', () => {
console.log('adding bot to guild');
});
#sidebar_header {
top: 0;
text-align: center;
position: fixed;
width: inherit;
}
#sidebar_sub_header {
/* top: 0; */
/* position: fixed;
width: inherit; */
}
#sidebar_main_content {
overflow-y: scroll;
}
#sidebar_footer {
position: fixed;
bottom: 0;
width: inherit;
}
#sidebar {
width: 250px;
min-height: 100vh;
max-height: 100vh;
}
/* #sidebar_main_content::-webkit-scrollbar {
width: 0;
height: 0;
} */
#dropdown {
align-items: center;
text-align: center;
}
<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">
<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>
<div class="container-fluid">
<div class="row">
<!-- <div class="col align-items-start bg-dark text-white"> -->
<div class="align-items-start text-center p-0 bg-dark text-white" id="sidebar">
<div class="p-3 bg-dark text-white" id="sidebar_header">
<span class="fs-4">
Header
</span>
<hr>
<div class="p-3" id="sidebar_sub_header bg-secondary">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link text-white active" aria-current="page" id="server_wide_button">
Test 1
</a>
</li>
<li>
<a href="#" class="nav-link text-white" id="channel_specific_button">
Test 2
</a>
</li>
</ul>
</div>
</div>
<!-- <div class="p-3" id="sidebar_sub_header bg-secondary">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link text-white active" aria-current="page" id="server_wide_button">
Test 1
</a>
</li>
<li>
<a href="#" class="nav-link text-white" id="channel_specific_button">
Test 2
</a>
</li>
</ul>
</div> -->
<div class="mb-auto p-3 bg-danger flex-fill" id="sidebar_main_content">
<!-- main content - scrollable -->
<ul class="nav flex-column mb-auto align-items-center">
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
</ul>
</div>
<div class="p-3 bg-dark text-white" id="sidebar_footer">
<a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Test tooltip">
Test Button
</a>
<br><br>
<div class="dropup-center dropup">
<a href="#" class="align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
{{ wallet_address }}
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">Delete User Info</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="col bg-secondary text-white" id="main_content">
One of three columns
</div>
</div>
</div>
Using bootstrap 5.3.0 alpha1
Also - is what I have right so far? Each element is supposed to be fixed in the sidebar. not sure if i need position: fixed for each element or just for the sidebar. any help would be appreciated
edit:
also where test text here 0000000000000000000000000 is, how do i shrink that or confine it inside the div?
edit2: edited code to show some updates
Set different overflow behaviours for the 3 containers
You want the outer container not to scroll. That is important, because if you don't specifically block scrolling of the outer container, it will scroll. That was the cause of your problem.
Then you want the sidebar itself to scroll, and the main content to (separately) scroll.
I have added to your code 3 style attributes, one for each of the 3 containers. I see you are carefully using classes, which is excellent: just put those styles into the relevant classes (I couldn't find the class for the main body text).
#sidebar_header {
top: 0;
text-align: center;
}
#sidebar_sub_header {
/* position: fixed; */
/* width: inherit; */
}
#sidebar_main_content {
overflow-y: scroll;
}
#sidebar_footer {
position: fixed;
bottom: 0;
width: inherit;
}
#sidebar {
width: 250px;
min-height: 100vh;
max-height: 100vh;
}
<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/dashboard_test.css') }}" />
<div class="container-fluid" style="height:100%; overflow:hidden;">
<div class="row">
<div class="align-items-start text-center p-0 bg-dark text-white" id="sidebar" >
<div class="p-3">
<span class="fs-4" id="sidebar_heading">
Header
</span>
</div>
<hr>
<div class="p-3" id="sidebar_sub_header">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
Test 1
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Test 2
</a>
</li>
</ul>
</div>
<hr>
<div class="mb-auto p-3 bg-danger flex-fill" id="sidebar_main_content" style="height:100%; overflow-y: scroll;">
<!-- main content - scrollable -->
<ul class="nav flex-column mb-auto align-items-center">
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
</ul>
</div>
<div class="p-3" id="sidebar_footer">
<a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Test tooltip">
Test Button
</a>
<br><br>
<div class="dropup-center dropup">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
test text here 0000000000000000000000000
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">Delete User Info</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="col bg-secondary text-white" id="main_content">
One of three columns
</div>
</div>
</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>
I tried to make a mega menu with bootstrap. I use the code of dropdown menu and I make some changes on the code, but the links in the dropdown don't work only if I open the link in new tab. Otherwise, when I press the link it closes the dropdown menu. I think maybe is something wrong with the class or js, but I am not sure.
#logo{
position: relative;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
#navbar{
position: -webkit-sticky;
padding-bottom: 10px;
padding-top: 10px;
z-index: 100;
background-color: #282b2e!important;
margin-bottom: 0px;
border-radius: 0px;
}
body {
margin: 0;
}
#megamenu{
padding: 30px;
}
#navlink{
margin-left: 15px;
margin-right: 15px;
color: #bfbfbf;
font-size: 16px;
}
#megamenucol{
align-self: baseline;
}
#navlink{
color: #bfbfbf;
}
#navlink:focus, #navlink:hover {
color: rgb(211, 152, 48);
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #d39830;
height: 4px;
-webkit-transition-property: left,right;
transition-property: left,right;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#megamenu {
position: absolute;
background: #54595f;
border-radius: 0px;
margin-top: 0px;
}
#h6{
color: #bfbfbf;
font-size: 14px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid #d39830;
}
#dropdownitem {
display: block;
width: 100%;
padding: .25rem 1.5rem;
clear: both;
font-weight: 400;
color: #bfbfbf;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
font-size: 14px;
}
#dropdownitem:focus, #dropdownitem:hover {
color: #d39830;
text-decoration: none;
background-color: #f8f9fa00;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<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://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" integrity="sha256-c+C87jupO1otD1I5uyxV68WmSLCqtIoNlcHLXtzLCT0=" crossorigin="anonymous" />
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light ">
<a class="navbar-brand" id="logo" href="https://www.dimtiles.gr/"><img src="https://www.dimtiles.gr/wp-content/uploads/2019/05/logo.png" width="90" height="90" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav1,#navbarNav2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav1">
<ul class="navbar-nav ">
<li class="nav-item ">
<a id="navlink" class="nav-link hvr-underline-from-center " href="https://www.dimtiles.gr/">Αρχική</a>
</li>
<!----------------- MEGA MENU DAPEDO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Δάπεδο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Δαπέδου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-33-x-33/">33X33</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-45%cf%8745/">45X45</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-50%cf%8750/">50X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-60/">60X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-80%cf%8780/">80X80</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%b1-60-%cf%87-120/">60X120</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%ce%bc%ce%b5%ce%b3%ce%b1%ce%bb%ce%b5%cf%83-%ce%b4%ce%b9%ce%b1%cf%83%cf%84%ce%b1%cf%83%ce%b5%ce%b9%cf%83/">120X240</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8760/">15X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%84%cf%85%cf%80%ce%bf%cf%85-%ce%be%cf%85%ce%bb%ce%bf%cf%85-15%cf%8790/">15X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%b4%ce%b1%cf%80%ce%b5%ce%b4%ce%bf%cf%85-%cf%84-%ce%be%cf%85%ce%bb%ce%bf%cf%85-20%cf%87120/">20X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Παραδοσιακά</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%b1%cf%81%ce%b1%ce%b4%ce%bf%cf%83%ce%b9%ce%b1%ce%ba%ce%b1/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Επενδύσεις</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%ce%b5%cf%80%ce%b5%ce%bd%ce%b4%cf%85%cf%83%ce%b7/">Όλα τα προϊόντα</a>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Μπάνιο</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton1">
<div class="container">
<div class="row ">
<h6 id="h6">Πλακάκια Μπάνιου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-20%cf%8720/">20X20</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8750/">20X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%cf%84%ce%bf%ce%b9%cf%87%ce%bf%cf%85-20%cf%8760/">20X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8750/">25X50</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-25%cf%8775/">25X75</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8760/">30X60</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-30%cf%8790/">30X90</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-33%cf%8755/">33X55</a>
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%bc%cf%80%ce%b1%ce%bd%ce%b9%ce%bf%cf%85-40%cf%87120/">40X120</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU MPANIO (END) ----------->
</ul>
</div>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav2">
<ul class="navbar-nav ">
<!----------------- MEGA MENU KOYZINA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Κουζίνα</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton3">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Πλακάκια Κουζίνας</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%cf%80%ce%bb%ce%b1%ce%ba%ce%b1%ce%ba%ce%b9%ce%b1-%ce%ba%ce%bf%cf%85%ce%b6%ce%b9%ce%bd%ce%b1%cf%83/">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Ψηφίδες</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU KOYZINA (END) ----------->
<!----------------- EIDIKA (START) ----------->
<div>
<li class="nav-item " type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a id="navlink" class="nav-link hvr-underline-from-center" href="#">Ειδικά</a>
<div id="megamenu" class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton4">
<div class="container">
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Δάπεδο</h6>
<hr class="solid">
<a id="dropdownitem"class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#da">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Μπάνιο</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#to">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Κουζίνα</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item" href="https://www.dimtiles.gr/%CF%80%CE%BB%CE%B1%CE%BA%CE%B1%CE%BA%CE%B9%CE%B1-%CE%BA%CE%BF%CF%85%CE%B6%CE%B9%CE%BD%CE%B1%CF%83/#psi">Ψηφίδες</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<h6 id="h6">Τ. Ξύλου</h6>
<hr class="solid">
<a id="dropdownitem" class="dropdown-item hvr-underline-from-center" href="https://www.dimtiles.gr/%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%B1-%CF%83%CF%87%CE%B5%CE%B4%CE%B9%CE%B1/#woo">Όλα τα προϊόντα</a>
</div>
<div id="megamenucol" class="dropdown-row ">
<br>
</div>
</div>
</div>
</li>
</div>
<!----------------- MEGA MENU EIDIKA (END) ----------->
<li class="nav-item">
<a class="nav-link hvr-underline-from-center" href="#">Επικοινωνία</a>
</li>
</ul>
</div>
</nav>
<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>
</body>
</html>
The dropdown only works when href have # in that
I have recently gotten a bootstrap 4 theme. I have been changing some files to work with flask. However I'm not able to figure out why my "main-container" div is falling below the nav bar when I change the page size to a more full size desktop browser size?
In the original bootstrap file the index.html file had the nav bar and page content on a single page. For flask I have moved most of this between three files layout.html, index.html and _navbar.html
I would like this to be on the right side of the nav bar when this is stretched to full desktop size but im not able to figure out what to change.
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pipeline Project Management Bootstrap Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A project management Bootstrap theme by Medium Rare">
<link href="static/img/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
<link href="static/css/theme.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
{%include 'includes/_navbar.html'%}
{%block body%}
{%endblock%}
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/autosize.min.js"></script>
<script type="text/javascript" src="static/js/popper.min.js"></script>
<script type="text/javascript" src="static/js/prism.js"></script>
<script type="text/javascript" src="static/js/draggable.bundle.legacy.js"></script>
<script type="text/javascript" src="static/js/swap-animation.js"></script>
<script type="text/javascript" src="static/js/dropzone.min.js"></script>
<script type="text/javascript" src="static/js/list.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<script type="text/javascript" src="static/js/theme.js"></script>
</body>
<footer>
<p><center><small><small>© ME | ©ME </small></small></center></p>
</footer>
</html>
index.html
{%extends 'layout.html'%}
{%block body%}
<div class="main-container">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-11 col-xl-9">
<section class="py-4 py-lg-5">
<div class="mb-3 d-flex">
<img alt="Pipeline" src="static/img/logo-color.svg" class="avatar avatar-lg mr-1" />
<div>
<span class="badge badge-success">1.0</span>
</div>
</div>
<h1 class="display-4 mb-3">Headline</h1>
<p class="lead">
Headline text
</p>
<div class="d-flex">
<div class="dropdown mr-3">
Explore Pages
<div class="dropdown-menu">
<a class="dropdown-item" href="pages-app.html">App Pages</a>
<a class="dropdown-item" href="pages-utility.html">Utility Pages</a>
</div>
</div>
<div class="dropdown">
View Components
<div class="dropdown-menu">
<a class="dropdown-item" href="components-bootstrap.html">Bootstrap Components</a>
<a class="dropdown-item" href="components-pipeline.html">Pipeline Components</a>
</div>
</div>
</div>
</section>
<section class="py-4 py-lg-5">
<div class="carousel slide carousel-fade mb-5" data-ride="carousel">
<div class="carousel-inner overflow-visible">
<div class="carousel-item shadow-lg active">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-team.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-project.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-task.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-kanban-board.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-chat.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-user.png" class="img-fluid rounded border" />
</a>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<i class="material-icons text-primary mr-3 h1">supervised_user_circle</i>
<h2 class="h1 mb-0">Project Management Pages</h2>
</div>
<p class="lead">
Pipeline makes building project management interfaces simple with pages for teams, projects, tasks, kanban boards and more.
</p>
App PagesUtility Pages
</section>
</div>
</div>
</div>
</div>
{%endblock%}
_navbar.html
[![<div class="layout layout-nav-side">
<div class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="index.html">
<img alt="Pipeline" src="static/img/logo.svg" />
</a>
<div class="d-flex align-items-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-block d-lg-none ml-2">
<div class="dropdown">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu dropdown-menu-right">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse flex-column" id="navbar-collapse">
<ul class="navbar-nav d-lg-block">
<li class="nav-item">
<a class="nav-link" href="index.html">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2">Pages</a>
<div id="submenu-2" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="pages-app.html">App Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-utility.html">Utility Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-layouts.html">Layouts</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3">Components</a>
<div id="submenu-3" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="components-bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="components-pipeline.html">Pipeline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/index.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/changelog.html">Changelog</a>
</li>
</ul>
<hr>
<div class="d-none d-lg-block w-100">
<span class="text-small text-muted">Quick Links</span>
<ul class="nav nav-small flex-column mt-2">
<li class="nav-item">
Team Overview
</li>
<li class="nav-item">
Project
</li>
<li class="nav-item">
Single Task
</li>
<li class="nav-item">
Kanban Board
</li>
</ul>
<hr>
</div>
<div>
<form>
<div class="input-group input-group-dark input-group-round">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">search</i>
</span>
</div>
<input type="search" class="form-control form-control-dark" placeholder="Search" aria-label="Search app" aria-describedby="search-app">
</div>
</form>
<div class="dropdown mt-2">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" id="newContentButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Add New
</button>
<div class="dropdown-menu" aria-labelledby="newContentButton">
<a class="dropdown-item" href="#">Team</a>
<a class="dropdown-item" href="#">Project</a>
<a class="dropdown-item" href="#">Task</a>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block">
<div class="dropup">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
</div>
Divs by default have display: block which makes them positioned on top of one another.
In order to position them properly you could either:
Wrap them in a container div and use flexbox for positioning (Bootstrap row and columns),
Use floats (Bootstrap float classes)
Below is an example of using floats to position divs.
.container {
width: 500px;
}
.nav {
float: left;
width: 30%;
height: 200px;
background-color: red;
}
.content {
float: left;
width: 70%;
height: 200px;
background-color: blue;
}
.clear {
clear: both;
}
<div class="container">
<div class="nav">
</div>
<div class="content">
</div>
<div class="clear">
</div>
</div>
Good day to you!
I know that this is a common problem and have been solved many times but really I've tried every search solutions that search engine and stackoverflow returns to me but I really can't fix this one.
The problem is that the background image is cropped when the view is in smaller device.
I have tried setting the html and the body to 100% to no avail.
I have tried setting the background-size to 100% 100% to no avail.
I have tried this link CSS: Full Size background image but still to no avail.
Here's the css code:
body {
background-image: url(../img/bg2.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Josefin Sans Regular;
color: white;
}
html {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0,0,0,1),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
padding-top: 25%;
}
#carHead {
text-align: center;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 45%;
background-color: #f8f8f8;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgb(0,0,0.02)
}
.carousel-item {
padding: 20px;
}
and here's the body of the html code:
<body>
<!--head nav-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-desktop"></i>
< logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Search">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
<i class="fa fa-user" aria-hidden="true"></i> Login
</button>
</form>
</div>
</div>
</nav>
<!--end of head nav-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-12">
<div id="carHead">
<h1>Example of our works</h1>
</div>
</div>
</div>
<!-- featured item carousel -->
<div id="testcar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testcar" data-slide-to="0" class="active"></li>
<li data-target="#testcar" data-slide-to="1"></li>
<li data-target="#testcar" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/w1.jpg" height="350px" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 1</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/w2.jpg" height="350px" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 2</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/w3.jpg" height="350px" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 3</h5>
<p>Use/What for</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#testcar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testcar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end of carousel-->
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/1.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/2.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/3.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/1.jpg">
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</body>
finally the output:
Try using a min-height so it will not crop from the bottom of the background image. Check the sample code given below. I have given min-height:745px in the body css tag.
body {
background-image: url(https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Josefin Sans Regular;
color: white;
min-height: 725px;
}
html {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0,0,0,1),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
padding-top: 25%;
}
#carHead {
text-align: center;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 45%;
background-color: #f8f8f8;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgb(0,0,0.02)
}
.carousel-item {
padding: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<!--head nav-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-desktop"></i>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Search">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
<i class="fa fa-user" aria-hidden="true"></i> Login
</button>
</form>
</div>
</div>
</nav>
<!--end of head nav-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-12">
<div id="carHead">
<h1>Example of our works</h1>
</div>
</div>
</div>
<!-- featured item carousel -->
<div id="testcar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testcar" data-slide-to="0" class="active"></li>
<li data-target="#testcar" data-slide-to="1"></li>
<li data-target="#testcar" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 1</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 2</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 3</h5>
<p>Use/What for</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#testcar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testcar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end of carousel-->
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</body>
You can use the object-fit property (with growing support) to have the image resize in its container. Example below:
.banner-image {
overflow: hidden;
object-fit: contain;
height: 100%;
width: 100%;
max-height: 460px;
}
The solution I found out for this is removing the 100% set height for both the body and the html. The background displays fine in the mobile view but on tablet devices, the background image will scale on the content inside the body as long as you have a high resolution background image (e.g. 6k x 4K reso).
Does anyone have an idea how can I add black navbar below "some text" in navbar shown below? It doesn't matter how this navbar will look like I would like to have it just across the entire width of the screen below the string Some text. Any ideas?
<nav class="navbar navbar-expand-lg fixed-top navbar-transparent" color-on-scroll="500">
<div class="container">
<div class="navbar-translate">
<button class="navbar-toggler navbar-burger" type="button" data-toggle="collapse" data-target="#navbarToggler"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"
(click)="sidebarToggle()">
<span class="navbar-toggler-bar"></span>
<span class="navbar-toggler-bar"></span>
<span class="navbar-toggler-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarToggler">
<div class="outer">
<div class="middle">
<div class="inner">
<br><br><br>
<h6 align="center">Some text</h6>
<div class="black-bar" style="width: 100vw; height: 80px; background-color: white"></div>
</div>
</div>
</div>
<ul class="navbar-nav ml-auto">
<li class="nav-item" *ngIf="!isDocumentation() && !isMain()">
<a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom"
href="https://twitter.com/CreativeTim" target="_blank">
<i class="fa fa-twitter"></i>
<p class="d-lg-none">Twitter</p>
</a>
</li>
<li class="nav-item" *ngIf="!isDocumentation() && !isMain()">
<a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom"
href="https://www.facebook.com/CreativeTim" target="_blank">
<i class="fa fa-facebook-square"></i>
<p class="d-lg-none">Facebook</p>
</a>
</li>
<li class="nav-item" *ngIf="!isDocumentation() && !isMain()">
<a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom"
href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
<i class="fa fa-instagram"></i>
<p class="d-lg-none">Instagram</p>
</a>
</li>
<li class="nav-item" *ngIf="!isDocumentation() && !isMain()">
<a class="nav-link" rel="tooltip" title="Star on GitHub" data-placement="bottom"
href="https://www.github.com/CreativeTimOfficial/pk2-angular" target="_blank">
<i class="fa fa-github"></i>
<p class="d-lg-none">GitHub</p>
</a>
</li>
<li class="nav-item" *ngIf="!isDocumentation()">
<a href="http://pk2-angular.creative-tim.com/documentation/tutorial" class="nav-link" target="_blank"><i
class="nc-icon nc-book-bookmark"></i> Documentation</a>
</li>
<li class="nav-item" *ngIf="!isHome()">
<a [routerLink]="['/home']" *ngIf="!isDocumentation()" class="nav-link"><i class="nc-icon nc-layout-11"></i>Components</a>
<a [routerLink]="['/home']" *ngIf="isDocumentation()" class="nav-link">Back to Kit</a>
</li>
<li class="nav-item" *ngIf="isDocumentation()">
<a href="https://github.com/creativetimofficial/pk-free-angular/issues?ref=pk2-free-local" target="_blank"
class="nav-link">Have an issue</a>
</li>
</ul>
</div>
</div>
</nav>
It looks in this way after adding <div class="black-bar" style="width: 100vw; height: 80px; background-color: white"></div> after h6:
You could put a div underneath the < h6 > tag. Something like this..
<div class="black-bar" style="height:100px; background-color: black; position:absolute; left:0; right:0;"></div>
Hope this works for you!
If you're just needing a black line under the "some text", why not do something like:
h6 {
width: 100%;
text-align: center;
border-bottom: solid 80px black;
}