divide page into one section in web design - html

I'm trying to make a sidebar that collapses when using a phone. But after the first three images the images on the next line start below the sidebar instead of beside it.
The top part is ok, but when scrolling down to the other images they don't arrange themselves beside the sidebar. it shows:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="row mt-5">
<div class="col-3 vertical-test">
<nav class="navbar navbar-expand-lg navbar-light">
<!-- <div class="container-fluid"> -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav flex-column p-2">
<li class="nav-item">
<a class="navbar-brand active" href="#">DIABLO DAILY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NEW ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BRANDS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
</ul>
</div>
<!-- </div> -->
</nav>
</div>
<div class="col-3">
<img class="img-fluid shadow" src="https://via.placeholder.com/120">
</div>
<div class="col-3">
<img class="img-fluid shadow" src="https://via.placeholder.com/120">
</div>
<div class="col-3">
<img class="img-fluid shadow" src="https://via.placeholder.com/120">
</div>
<!-- for the next line -->
<div class="col-3">
<img class="img-fluid" src="https://via.placeholder.com/120">
</div>
<div class="col-3">
<img class="img-fluid" src="https://via.placeholder.com/120">
</div>
<div class="col-3">
<img class="img-fluid" src="https://via.placeholder.com/120">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>


Here you go...
As the comment above suggests, you should put the sidebar in one column and put all the rest in the column next to it. I rearranged your code a little bit (e.g., changed col-3 into col-4) so that the output looks like the one that you posted, but at the same time your problem is fixed.
See the snippet below.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<div class='container-fluid'>
<div class='row mt-5'>
<div class='col-3 vertical-test'>
<nav class='navbar navbar-expand-lg navbar-light'>
<button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation'>
<span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='navbarNav'>
<ul class='navbar-nav flex-column p-2'>
<li class='nav-item'>
<a class='navbar-brand active' href='#'>DIABLO DAILY</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>NEW ITEMS</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>BRANDS</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>CURATED PIECES</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>CURATED PIECES</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>CURATED PIECES</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>CURATED PIECES</a>
</li>
</ul>
</div>
</nav>
</div>
<div class='col-9'>
<div class='row mb-5'>
<div class='col-4'>
<img class='img-fluid shadow' src='https://via.placeholder.com/120'>
</div>
<div class='col-4'>
<img class='img-fluid shadow' src='https://via.placeholder.com/120'>
</div>
<div class='col-4'>
<img class='img-fluid shadow' src='https://via.placeholder.com/120'>
</div>
</div>
<div class='row'>
<div class='col-4'>
<img class='img-fluid' src='https://via.placeholder.com/120'>
</div>
<div class='col-4'>
<img class='img-fluid' src='https://via.placeholder.com/120'>
</div>
<div class='col-4'>
<img class='img-fluid' src='https://via.placeholder.com/120'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Element in the page is completely disregarded

I want to add a search bar under the header, when I completed it and was moving on to the next element it completely disregards the search bar and adds the new elements on top of the search bar. I want the new element below the search bar. I am using HTML and Bootstrap. The search bar code is at the bottom between comments.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
</head>
<body>
<!--Begin Menu-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark p-0">
<div class="container">
<a href="index.html" class="navbar-brand">
Blogen
</a>
<button class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarCollapse"
class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a href="index.html"
class="nav-link">
Dashboard
</a>
</li>
<li class="nav-item">
<a href="posts.html"
class="nav-link active">
Posts
</a>
</li>
<li class="nav-item">
<a href="categories.html"
class="nav-link">
Categories
</a>
</li>
<li class="nav-item">
<a href="users.html"
class="nav-link">
Users
</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown px-2">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown">
<i class="bi bi-person-fill h5"></i>
Welcome Tarek
</a>
<div class="dropdown-menu">
<a href="profile.html" class="dropdown-item">
<i class="bi bi-person-circle h5"></i>
Profile
</a>
<a href="settings.html" class="dropdown-item">
<i class="bi bi-gear-fill h5"></i>
Settings
</a>
</div>
</li>
<li class="nav-item">
<a href="login.html"
class="nav-link">
<!--<i class="fa fa-user-times"></i>-->
<i class="bi bi-person-x-fill h5"></i>
Logout
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--End Menu----->
<!--Begin Search Bar-->
<div class="container">
<div class=" input-group py-4 position-absolute w-25 ">
<input type="search" class="form-control rounded" placeholder="Search Posts..." />
<button type="button" class="btn btn-primary">Search</button>
</div>
</div>
<!--End Search Bar-->
<script src="../Scripts/jquery-3.6.0.min.js"></script>
<script src="../Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>

How do I align the container at the top with my navigation bar in Bootstrap 5?

new to bootstrap! I am trying to align the navigation bar and the top title. The yellow area is wider than the navigation bar. I also need help setting the background image to span the whole website. If anyone can give me some suggestions, it would be appreciated!
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!doctype html>
<div class="container bg-warning">
<div class="row">
<div class="d-flex justify-content-center">
<p class="display-1">Thuan's Website</p>
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand" />
<img src="https://img.icons8.com/ios-glyphs/30/000000/redo.png" />Thuan
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Forums
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Games
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact
</a>
</li>
</ul>
</div>
</nav>
</div>

In order to get the title and navbar full width just put it oustside container class
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-center bg-warning">
<p class="display-1">Thuan's Website</p>
</div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand" />
<img src="https://img.icons8.com/ios-glyphs/30/000000/redo.png" />Thuan
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Forums
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Games
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>

two navbars in bootstrap alignment

I have two nav bars, one of the nav bar has a red background and the other nav bar has blue background with multiple anchor tags.
When I reduce the screen, the second nav bar is not displaying correctly when compared to before. Can anyone help me with your best solution?
Please find issue image,
Please find my code below,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" type="text/css" href="CSS/Header.css">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class=" navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active mt-auto mb-auto col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</Div>
</nav>
</header>
</body>
</html>

After I try this code without header.css and styles.css
No have problem with your code
I will shared snippet on here
Please give the Header.css and Styles.css in here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class=" navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active mt-auto mb-auto col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</Div>
</nav>
</header>
</body>
</html>

EDIT - By removing all my previous answer
You are facing this issue because there are too many items in your nav. So the width is too big.
You can consider updating the navbar-expand-sm class to navbar-expand-md in order to change the breakpoint on which you want the menu collapsing under the "burger menu".
Otherelse, you can hide menu texts when the screen is small, and add those texts into the title properties of your icons or its wrappers to see the "menu description" on hover.
Moreover, mt-auto mb-auto col classes for each <li></li> are not needed. In fact, margin / padding should be added only on the wrapper. And the navbar classes automatically arrange your items. The col onto your items are breaking the responsiveness of your nav wrapper.
Keep col but updating nav to navbar-expanded-md:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-md container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class="navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Removing col but Keeping nav to navbar-expanded-sm:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class="navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active">
<a class="nav-link navicon" href="Start.html">
<div class="text-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="text-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Consents.html">
<div class="text-center">
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Purpose.html">
<div class="text-center">
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Personal.html">
<div class="text-center">
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Assets.html">
<div class="text-center">
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Declarations.html">
<div class="text-center">
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Income.html">
<div class="text-center">
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Preview.html">
<div class="text-center">
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
On this second snippet, I added the class text-center to your icon wrappers.

Bootstrap 4 full page vertically aligned div not centering

I'm currently using Bootstrap 4 to make my online portfolio. The only issue I have right now is that I cannot align a div vertically. I'm also adding a .png image that should flow over the vertically centered div. The image pushes the whole div down. What do I need to use to fix this issue?
This is the result I'm looking for:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Berk's Online Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-black static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/150x75">
</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 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="#">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="min-vh-100">
<div class="row">
<div class="col-md-12" style="background-color: #F9DB0F;">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="display-1">HI</h1>
<h1 class="display-1">I'M BERK</h1>
<h5>A FULL STACK DEVELOPER AND UI/UX DESIGNER</h5>
</div>
<div class="col-md-6">
<img src="https://entourageapp.s3-us-west-2.amazonaws.com/uploads/images/160/large/manWalkingFrontSuit.png?1440865661" width="75%">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

this might help:
in style.css:
.bg {
background-color: #F9DB0F;
margin: 250px 0;
}
.div-center {
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px 0;
}
.my-pic {
position: absolute;
top: -200px
}
in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Berk's Online Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- style should be loaded after the bootstrap files -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-black static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/150x75">
</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 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="#">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="min-vh-100">
<div class="row">
<!-- I added a bg class -->
<div class="bg col-md-12">
<div class="container">
<div class="row">
<!-- I added a div-center class -->
<div class="center col-md-6">
<h1 class="display-1">HI</h1>
<h1 class="display-1">I'M BERK</h1>
<h5>A FULL STACK DEVELOPER AND UI/UX DESIGNER</h5>
</div>
<div class="col-md-6">
<!-- I added a my-pic class -->
<img class="my-pic"
src="https://entourageapp.s3-us-west-2.amazonaws.com/uploads/images/160/large/manWalkingFrontSuit.png?1440865661"
width="75%">
</div>
</div>
</div>
</div>
</div>
</div>
</body>

Bootstrap css main-container div falling below the side nav bar

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>