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

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>

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>

divide page into one section in web design

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>

Why profile hover menu is not working with bootstrap carousel?

Profile hover is not working properly.
same this is working on the other page but not on the home page I have a share code snippet to check.
and if I remove the bootstrap carousel then the same code is working perfectly.
I have attached code with bootstrap carousel so you can check by removing that.
not working URL : https://pcbmagic.com/
working URL : https://pcbmagic.com/member/dashboard/cart.php
<html>
<head>
<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.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pcbmagic.com/assets/style.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="bg-light">
<div class="row pl-4 pr-4 pt-2 pb-2" style="align-items: center; box-shadow: 1px 0.5px 9px 0px rgb(188 193 192);">
<div class="col-md-2" style="align-self: center;">
<img src="https://pcbmagic.com/logo_s.png" style="height:75px;">
</div>
<div class="col-md-7">
<nav class="navbar navbar-light navbar-expand-md nav-bg-custom main-menu-bar">
<!-- Brand -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="/"><!--<i class="fas fa-home"></i> -->Home</a>
</li>
<!--<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-calculator"></i> Instant Quote
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="pcb-order.php"><i class="fas fa-microchip"></i> PCB Laout</a>
<a class="dropdown-item" href="pcb-fabrication.php"><i class="fas fa-microchip"></i> PCB FABRICATION</a>
<a class="dropdown-item" href="#"><i class="fas fa-microchip"></i> PCB ASSEMBLY</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="stencil.php"><i class="fas fa-microchip"></i> STENCIL FABRICATION</a>
</div>
</li>-->
<li class="nav-item active">
<a class="nav-link" href="https://pcbmagic.com/pcb-quote.php"><!--<i class="fas fa-puzzle-piece"></i> -->PCB Assembly</a>
</li>
<!--<li class="nav-item active">-->
<!-- <a class="nav-link" href="/about-us.php">About us</a>-->
<!--</li>-->
<li class="nav-item active">
<a class="nav-link" href="/contact.php"><!--<i class="fas fa-address-book"></i>--> Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-md-3 pr-3" style="align-self: center;">
<div class="float-right header-op">
<a href="https://pcbmagic.com/member/dashboard/cart.php" class="btn btn-sm cart-a" style="z-index: 999999;color: white !important;margin-bottom: 5px;"><img src="https://pcbmagic.com/assets/img/cart.png" class="cart">
<span class="cart-number" id="cart_count">
2 </span>
</a>
<div class="dropdown-log">
<span>Hi,Vishal<i class="pl-2 fas fa-chevron-down"></i></span>
<div class="dropdown-log-content">
<div class="bg-dark py-2 mb-2">
<div class="p-img">
</div>
<h6 class="text-center text-light">Vishal Vishwakarma</h6>
<p class="text-center text-light" style="font-size:12px;">webadmin#championsemi.com</p>
</div>
<p>Dashboard</p>
<p>My Order</p>
<p>Production Status</p>
<p>Help Center</p>
<p>Logout</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<!--<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>-->
</ol>
<div class="carousel-inner" style="border: 1px solid #dedede;">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/s1.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/t2.png" alt="Second slide">
</div>
<!--<div class="carousel-item">
<img class="d-block w-100" src="https://pcbwayfile.s3-us-west-2.amazonaws.com/banner/21/03/25/1808173691783t.jpg" alt="Third slide">
</div>-->
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
</body>
</html>
<style>
#media screen and (max-width: 767px) {
.mobile-space {margin-top:35px;}
.carousel-inner img {height: 135px;}
.dropdown-log-content{z-index:999999;}
}
</style>
<section class="pt-5 ft-text-link" style="background:#1b1b1b;color:white;font-size:14px;box-shadow: 0px -3px 2px #1b1b1b;">
<div class="container-fluid pl-5 pr-5">
<div class="row">
<div class="col-md-3">
<h6>Business</h6>
<ul class="ft-list">
<li class="">Electronics / Semiconductors</li>
<li class="">Industrial Design Services</li>
<li class="">PCB/PCB-A</li>
<li class="">Display and Signage Systems</li>
<li class="">IoT Solutions</li>
<li class="">Medical Electronics</li>
</ul>
</div>
<div class="col-md-3">
<h6>Important Links</h6>
<ul class="ft-list">
<li class="">Careers # ChampionSemi</li>
<li class="">Ecosystem</li>
<li class="">For Investors</li>
<li class="">Legals</li>
<li class="">Contact us</li>
</ul>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3 newsletter">
<p class="text-center">Would you like to know what’s happening at the forefront of semiconductor and electronics at ChampionSemi? Sign up and receive the latest updates.</p>
<div class="mt-2" style="height:36px;">
<center><input class="m-width-100 m-mb-5 w-50" type="text" name="">
<a href="#" class="btn btn-o btn-sm m-width-100 w-50" style="font-size: 12px;
padding: 4px !important;">Subscribe Now</a></center>
</div>
</div>
</div>
<div class="row mobile-space">
<div class="col-md-3">
<p class="mb-1">Payment Methods</p>
<img style="height:23.5px;" src="https://pcbmagic.com/assets/img/payment-mode.png">
</div>
<div class="col-md-3">
<p class="mb-1">Delivery Services</p>
<img style="height:23.5px;" src="https://pcbmagic.com/assets/img/delivery-mode.png">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="container-fluid pl-4 pb-2 pr-4">
<hr style="background:#ffffff21;width:100% !important;margin-top: 10px;">
<div class="row">
<div class="col-md-6">
<!--<center class="m-display" style="display:none;"><img class="m-display-block" src="https://geocon.in/smartnet/logo-ft.png" style="height:27px;"></center> -->
<p class="pl-1 m-text-center"><!--<img class="m-hide" src="https://geocon.in/smartnet/logo-ft.png" style="height:27px;">--> PCBMagic © 2021 | Champion Semiconductor LLP | Terms of use | Privacy Policy </p>
</div>
<div class="col-md-6 ft-fa text-right follow-ft">
<p class="m-text-center">Follow us
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</p>
</div>
</div>
</div>
</section>

you have to add z-index property to your .dropdown-log-content class. as below
.dropdown-log-content
{
z-index: 9999999 !important;
}

"Learn more" button is not working in my html code

<!DOCTYPE.html>
<html>
<head>
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/heisenberg.svg" width="30" height="30" alt="">
</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.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Blog.html">Blog</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Content
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">soon..</a>
<a class="dropdown-item" href="#">soon..</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">soon..</a>
</div>
</li>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul>
</ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul>
</ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul class="navbar-nav mr-auto">
<li>
<a class="navbar-brand" href="https://github.com/heisenberg01010">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/social-media.svg" width="30" height="30" alt="">
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li>
<a class="navbar-brand" href="https://www.linkedin.com/in/jai-lodha-3b63b4197/">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/logos.svg" width="30" height="30" alt="">
</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li>
<a class="navbar-brand" href="https://www.instagram.com/mai_jai_/">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/brands-and-logotypes.svg" width="30" height="30" alt="">
</a>
</li>
</ul>
</ul>
</div>
</nav>
<div class="text-black shadow p-3 mb-5 bg-white rounded"><strong>Scroll across some beautiful snaps of The Hubble telescope!!</strong></div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/bubble nebula.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Bubble Nebula!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/Sombero galaxy.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Sombrero Galaxy!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://hubblesite.org/contents/media/images/2003/28/1415-Image.html" role="button">Learn more</a>
</div>
</div>
<div class="carousel-item">
<img src="/home/heisenberg/Documents/GitHub/Scifi.github.io/heic1501a.jpg" class="d-block w-100" alt="...">
<div class="jumbotron">
<h1 class="display-4">The Pillars Of Creation!</h1>
<hr class="my-4">
<a class="btn btn-dark btn-lg" href="https://www.nasa.gov/image-feature/the-pillars-of-creation" role="button">Learn more</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<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>
I have tried my best but the "Learn more" button is not working under
<div class= "jumbotron">. There are three such buttons working under the carousel. I am using bootstrap to build a site. I think some properties are overlapping. I have used jumbotron from here https://getbootstrap.com/docs/4.4/components/jumbotron/. I have used carousel from here https://getbootstrap.com/docs/4.4/components/carousel/. Earlier there was no problem. I don't know how this bug came.
Please suggest some changes.

So the Problem is with the bootstrap files, you don't have the files of bootstrap 4,
if you have add the all links and bootstrap link to the head of html then it will work.
I have modified the code somehow so you can have the idea. !!!
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script> -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.4/getting-started/introduction">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger
container.</p>
<a class="btn btn-primary btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
</div>
</body>
</html>

The problem is: You added the elements with jumbotron class inside of carousel items. And this caused to place the elements with jumbotron class to be placed under the carousel controls.
I suggest to change the bottom of the carousel controls.
To fix the problem, add this script:
<script>
const computedStyle = window.getComputedStyle(document.getElementsByClassName('jumbotron')[0]);
const bottomOfCarouselAction = +computedStyle.getPropertyValue('height').replace('px', '') + +computedStyle.getPropertyValue('margin-top').replace('px', '') + +computedStyle.getPropertyValue('margin-bottom').replace('px', '');
document.getElementsByClassName('carousel-control-prev')[0].style.bottom = bottomOfCarouselAction; //set the bottom property of carousel previous control to the top of the jumbotron.
document.getElementsByClassName('carousel-control-next')[0].style.bottom = bottomOfCarouselAction; //set the bottom property of carousel next control to the top of the jumbotron.
</script>

Having trouble positioning things in Bootstrap

I'm a beginner to Bootstrap and I'm not really getting the ideas of it 100% clearly yet. I am however kind-of in a rush to push out a content idea for who-ever I'm creating this. Could someone clear some things up for me and if something's changed, perhaps explain what really changed?
I've linked a picture down below to imgur with what the structure looks like now.
On request, i'm explaining the things that were in the picture as text now.
See the 'Language' dropdown? I'd like for that one to be in the top right corner when the devices are full-screen. But when the device is on smaller devices like SM or XS, then it should divert itself into the menu button's expanding menu.
i'd also like for the whole navbar to be centered on its own, as if moving a block of concrete with text on it to a different position.
It'd also be nice if it were possible to have the logo/banner thing up top resize along with the page size. For example: on mobile it would cut the side bars along the picture, and then have the picture scale down. Bootstrap should have this, but I don't know how to use it.
Thanks sincerely for the help.
PS: Don't comment on the messy code mess with containers, headers, etc. I know it's probably not correct. I'm figuring it out. Thanks for the concern though!
http://imgur.com/a/exA71
.bg-irie {
background-color: #E7DD96;
}
.bg-irie2 {
background-color: #41403E;
}
.header-advertisement {
height:320px;
}
<html>
<head>
<link rel="icon" type="image/png" href="/src/img/favicon.png" />
<link rel="stylesheet" href="/src/css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Irie Vibes Roots Festival - Home</title>
</head>
<body class="bg-irie">
<header class="text-center">
<div class="container-fullwidth bg-irie2">
<div class="header-advertisement ">
<img src="http://i.imgur.com/BUu5PPO.png">
</div>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-irie2">
<a class="navbar-brand" href="#">Irie Vibes</a>
<!--Menu button for small screens-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
</div>
</body>
<!--Loading scripts at the end of the page to prevent slowdowns-->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>

Try this..
Newly edited and i change the width of the language dropdown and make it as you said,
And position absolute to make the layer as Independent as per the z-index value
.bg-irie {
background-color: #E7DD96;
}
.bg-irie2 {
background-color: #41403E;
}
#navbarDropdownMenuLink, .dropdown-menu{
text-align: right;
width: 20%;
float: right;
color:#fff
}
#navbarNavDropdown{
text-align: center
}
.dropdown-menu{
position: absolute;
right: 0 !important;
}
.header-advertisement {
height:320px;
}
.navbar{
display: inline-block; !important
}
<html>
<head>
<link rel="icon" type="image/png" href="/src/img/favicon.png" />
<link rel="stylesheet" href="/src/css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Irie Vibes Roots Festival - Home</title>
<body class="bg-irie">
<header class="text-center">
<a class="nav-link dropdown-toggle pull-right" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</a>
<div class="dropdown-menu pull-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="container-fullwidth bg-irie2">
<div class="header-advertisement ">
<img src="http://i.imgur.com/BUu5PPO.png">
</div>
<div class="container"> <center>
<nav style="display: inline-block" class="navbar navbar-expand-lg navbar-light bg-irie2">
<a class="navbar-brand" href="#">Irie Vibes</a>
<!--Menu button for small screens-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
</li>
</ul>
</div>
</nav>
</center>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
</div>
</body>
<!--Loading scripts at the end of the page to prevent slowdowns-->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>

try this for the banner
Add an id to the image.
<img id="BUu" src="http://i.imgur.com/BUu5PPO.png">
</div>
Then, add this to your CSS
.header-advertisement {
/* height: 320px; */
width: 80%;
margin: auto;
}
#BUu {
width: 80%;
}