Display dropdown menu in the exact right side of textbox in bootstrap - html

I have an accordion where it has a flex-row textbox and it has icons on its right.
I need to add the menu positioned as shown in the image below
My code is here
<html>
<head>
<style>
.accordion {
margin: 30px;
}
.accordion-button.collapsed {
border-bottom: #ccc 1px solid
}
.accordion-body {
border-left: #673ab744 1px solid;
border-bottom: #673ab744 1px solid;
border-right: #673ab744 1px solid
}
.accordion-button {
display: inline!important
}
.flx-row {
display: flex;
justify-content: space-between;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<div class="flx-row">
<div>
<input type="textbox" value="Accordion Item #1">
</div>
<div>
<div class="btn-group">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button>
<ul class="dropdown-menu dropdown-menu-lg-end" style="">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
</div>
</div>
<br><span>Desc goes here</span><br><span>Desc goes here</span>
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<script type="text/javascript">
$(".wdelete").off().on('click', function(event) {
if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev().val()}?`) == true) {
$(this).closest('.accordion-item').remove();
}
event.preventDefault();
event.stopPropagation();
});
</script>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</body>
</html>


I think you're looking accordion like this
here's full code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.card-header-custom{
display: flex;
justify-content:space-between;
}
</style>
</head>
<body>
<div class="container mt-3">
<div id="accordion">
<div class="card">
<div class="card-header card-header-custom">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
Accordion Item #1
</a>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
More
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
Accordion Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
Accordion Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Dropdown menu not floating in a flex row

I have an accordion where it has a flex-row textbox and it has icons on its right.
I need to add the menu positioned as shown in the image below
My code is here
<html>
<head>
<style>
.accordion {
margin: 30px;
}
.accordion-button.collapsed {
border-bottom: #ccc 1px solid
}
.accordion-body {
border-left: #673ab744 1px solid;
border-bottom: #673ab744 1px solid;
border-right: #673ab744 1px solid
}
.accordion-button {
display: inline!important
}
.flx-row {
display: flex;
justify-content: space-between;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<div class="flx-row">
<div>
<input type="textbox" value="Accordion Item #1">
</div>
<div>
<div class="btn-group">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button>
<ul class="dropdown-menu dropdown-menu-lg-end" style="">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
<span class="wcopy material-symbols-outlined text-primary">content_copy</span>
<span class="wdelete material-symbols-outlined text-primary">delete</span>
</div>
</div>
<br><span>Desc goes here</span><br><span>Desc goes here</span>
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<script type="text/javascript">
$(".wdelete").off().on('click', function(event) {
if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev().val()}?`) == true) {
$(this).closest('.accordion-item').remove();
}
event.preventDefault();
event.stopPropagation();
});
</script>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</body>
</html>

Listen you may not refer to your problem's answer
Note if your question was anything else plz let me know
Just have a container div then tell your div that has two children
One is left(your items and options)
And right hand your inputs such dropdown list and that delete icon
So just forget about the flex-row class.
Put your entire code shown in the question in a div with the style of =
display:flex;
Then
Have two (div)s
First
div (your items #item ...) with syle of =
flex:80%;
And div (drop down list and delete icon ...) with style of =
flex:20%;
So:
<div class='father-of-two-children'>
<div class='left-hand-div'>
My options ...#items..
</div>
<div class='right-hand-div'>
delete icon ...dropdown list...
It is based on your periority of
your items and inputs.they will
appear in order.
</div>
</div>
<style>
.father-of-two-children{
display:flex;
}
.left-hand-div{
flex:80%;
}
.right-hand-div{
flex:20%;
}
</style>

The code I presented for you previously (as below) works perfectly fine. You can list any element you wish to be flex aligned in the row.
The issue you are having is the code you are using is not semantically correct. For example: you have buttons nested within buttons. A button should be the final interactable element in a hierarchy. I recommend you change the accordion interaction to simple a div.
Once you have refactored your code, you should be able to align items easily within a 2-dimensional flex array using align-items.
You may wish to try and get a better understanding of flex before moving forward.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
.pad {
padding: 10px;
}
.flx-row {
display: flex;
justify-content: space-between;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0">
<div class="flx-row pad">
<div>
<input type="textbox" value="Accordion Item #1" />
</div>
<div class="btn-group">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button>
<ul class="dropdown-menu dropdown-menu-lg-end" style="">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
</div>
<div>
<span class="wcopy material-symbols-outlined text-primary">content_copy</span>
<span class="wdelete material-symbols-outlined text-primary">delete</span>
</div>
</div>

Take your 'Span Tags' for Icon Inside div of class 'btn-group' then icons will automatically come next to the drop down
<div class="btn-group">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-
toggle="dropdown" aria-expanded="false"> More </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Export</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item tdelete" href="#">Delete</a></li>
</ul>
<span class="wcopy material-symbols-outlined text-
primary">content_copy</span>
<span class="wdelete material-symbols-outlined text-
primary">delete</span>
</div>

NavBar always overlap the Main Content

This is my Main Content (which is basically a table with some data). As you can see it goes under the TopNav and SideNav. Below is the code of my php file. I tried everything but still it doesnt get fixed .
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<?php include 'navbar.php';?>
<?php include 'header.php';?>
</head>
<body>
<div class="mainContainer">
<section class="main_content_right">
<div class="container">
<div class="row">
<div class="col-md-12">
<?php
if(isset($_SESSION['status']) && $_SESSION['status'] !='')
{
echo '
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Hey!</strong> '.$_SESSION['status'].'
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
';
unset($_SESSION['status']);
}
?>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></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>
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-firestore.js"></script>
</body>
This is my sideNav :
<body class="sb-nav-fixed">
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav">
<div class="sb-sidenav-menu-heading"></div>
<a class="nav-link" href="home.php">
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
Dashboard
</a>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse"
data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
Layouts
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne"
data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="layout-static.html">Static Navigation</a>
<a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a>
</nav>
</div>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages"
aria-expanded="false" aria-controls="collapsePages">
<div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
Pages
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="collapsePages" aria-labelledby="headingTwo"
data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse"
data-bs-target="#pagesCollapseAuth" aria-expanded="false"
aria-controls="pagesCollapseAuth">
Authentication
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne"
data-bs-parent="#sidenavAccordionPages">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="login.html">Login</a>
<a class="nav-link" href="register.html">Register</a>
<a class="nav-link" href="password.html">Forgot Password</a>
</nav>
</div>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse"
data-bs-target="#pagesCollapseError" aria-expanded="false"
aria-controls="pagesCollapseError">
Error
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne"
data-bs-parent="#sidenavAccordionPages">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="401.html">401 Page</a>
<a class="nav-link" href="404.html">404 Page</a>
<a class="nav-link" href="500.html">500 Page</a>
</nav>
</div>
</nav>
</div>
<div class="sb-sidenav-menu-heading">Addons</div>
<a class="nav-link" href="charts.html">
<div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
Charts
</a>
<a class="nav-link" href="tables.html">
<div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
Tables
</a>
</div>
</div>
<div class="sb-sidenav-footer">
<div class="small">Copyright ©
<a href="https://codecanyon.net/user/zibrangni/portfolio" > Zibrangni</a>
</div>
</div>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></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://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
</body>
I tried using the Bootstrap class : class="main_content_right" , and also class="mainContainer" but got no luck !
What am I missing , Please let me know ? I am new to Web dev

I am not experienced in Bootstrap but it seems like the issue is that you have set the navbar to position: fixed and now it is coming on top of the other content. If I was in a similar situation I would most likely add a margin to the main content. E.g. if the navbar is 100px on the left and 40px on the top, just add that margin to the main content and you should be good to go!

Bootstrap - footer still at the end of page

I want to have a footer still at the end of the page.
Teoretically, it's working, but if I shrink the width of browser, the footer will go a little bit higher from the real end of the page.
That means, that I have some free background space under the footer - I don't want that.
Fullscreen of my page - no problem with footer
Shrinked page almost to half - problem with footer
Mobile shrinked - no problem
Here is the html code:
body
{
background-color: black;
}
.navbar
{
background-color: black;
}
.nav-pills .active
{
/* FARBA AKTÍVNEHO TABU V NAVIGÁCII A JEHO ZAOBLENIE */
background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%);
border-radius: 2%;
}
.row.first-row {
margin-top: 1em;
margin-right: 4em;
margin-left: 4em;
}
h4.white
{
color: white;
}
#tl
/* TLAČIDLÁ "What I will learn?" */
{
margin-bottom: 1em;
margin-top: 0.5em;
}
/* info SÚ INFORMÁCIE O AUTOROVI V BIELOM PÁSE */
.info
{
margin-top: 3em;
padding-top: 2em;
padding-bottom: 2em;
margin-bottom: 130px;
}
.info p
{
padding-top: 0.2em;
}
footer
{
}
#media screen and (max-width: 768px)
{
div.col-md-4
{
margin-bottom: 1em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CONFT</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.2/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.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style/style_index.css">
<link rel="shortcut icon" href="images/logo_tab_icon.png" type="image/x-icon">
<script>
$(function ()
{
$('[data-toggle="popover"]').popover()
})
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="logo" style="width:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CCNA 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CCNA 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="popover" title="CCNA 3"
data-content="This course is already in progress. Stay tuned.">CCNA 3</a>
</li>
</ul>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/gradient_bg.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-1">Welcome to CONFT</h1>
<p>Drill your knowledge on your way to get CCNA certification.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/abstract_network.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-2">Your job is on demand</h1>
<p>Networking field still need more and more skilled people. Join them!</p>
</div>
</div>
<div class="carousel-item">
<img src="images/programming.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-2">Programming in networking</h1>
<p>If you know programming, you can apply a job in this field too - because of need of automation.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row first-row">
<div class="col-md-4">
<div class="col-md-12 text-center" style="border-radius: 5px; background: linear-gradient(to bottom,#ffbb59 0%, #ff654d 100%">
<h1 class="text-center display-4 text-white" style="color: black;">CCNA 1</h1>
<h4 class="white text-center">Introduction to Networks</h4>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-light btn-lg" id="tl" data-toggle="modal" data-target="#myModal1">What will I learn?</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">CCNA 1 v7.0</h4>
</div>
<div class="modal-body">
<p>The first course in the CCNA curriculum introduces the architectures, models, protocols, and networking elements that connect users,
devices, applications and data through the Internet and across modern computer networks – including IP addressing and Ethernet fundamentals.
</p>
<a class="btn btn-dark" href="#" role="button">Start learning now!</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="col-md-12 text-center" style="border-radius: 5px; background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%">
<h1 class="text-center display-4 text-white" style="color: black;">CCNA 2</h1>
<h4 class="white text-center">Switching, Routing, and Wireless Essentials</h4>
<button type="button" class="btn btn-outline-light btn-lg" id="tl" data-toggle="modal" data-target="#myModal2">What will I learn?</button>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">CCNA 2 v7.0</h4>
</div>
<div class="modal-body">
<p>The second course in the CCNA curriculum focuses on switching technologies and router operations that support small-to-medium business networks
and includes wireless local area networks (WLAN) and security concepts. Students learn key switching and routing concepts.
They can perform basic network configuration and troubleshooting, identify and mitigate LAN security threats, and configure and secure a basic WLAN.
</p>
<a class="btn btn-dark" href="#" role="button">Start learning now!</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="col-md-12 text-center" style="border-radius: 5px; background: linear-gradient(to bottom, #ffbb59 0%, #ff654d 100%">
<h1 class="text-center display-4 text-white" style="color: black;">CCNA 3</h1>
<h4 class="white text-center">Enterprise Networking and Security</h4>
<button type="button" class="btn btn-outline-light btn-lg" id="tl" data-toggle="modal" data-target="#myModal3">What will I learn?</button>
<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">CCNA 3 v7.0</h4>
</div>
<div class="modal-body">
<p>The third course in the CCNA curriculum describes the architectures and considerations related to designing, securing, operating,
and troubleshooting enterprise networks. This course covers wide area network (WAN) technologies and quality of service (QoS) mechanisms
used for secure remote access along with the introduction of software-defined networking, virtualization, and automation concepts
that support the digitalization of networks. Students gain skills to configure and troubleshoot enterprise networks,
and learn to identify and protect against cybersecurity threats. They are introduced to network management tools
and learn key concepts of software-defined networking, including controller-based architectures and how
application programming interfaces (APIs) enable network automation.
</p>
<a class="btn btn-dark" href="#" role="button">Start learning now!</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 text-center info" style="background-color: white;">
<p>Hi! I'm René the creator of this site. I appreciate you visit my site. If you want to know more about me, click here.</p>
</div>
<footer class="bg-primary text-white text-center text-lg-start">
<!-- Copyright -->
<div class="text-center p-3" style="background: linear-gradient(to bottom,#ffbb59 0%, #ff654d 100%">
© 2021 Copyright: René Martin Kuda, SPŠT Spišská Nová Ves, 3.D
</div>
<!-- Copyright -->
</footer>
</body>
</html>

Move static positioned element left by arbitrary amount of pixels

I'm using a Bootstrap 4 navbar and added a left-border of a different color for design purposes.
This has the unforunate side-effect of causing the container of the navbar to not be lined up with the container of the main content.
I'm trying to offset the inner container 80px to compensate for the border, but when I try adjusting the position it obviously messes up the rest of the layout.
<!DOCTYPE html>
<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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.navbar {
border-left: 80px solid red;
}
.navbar .container {
left: 80px; /* something like this */
}
</style>
</head>
<body>
<div class="content-wrapper">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand"
href="/">Site</a>
<button class="navbar-toggler collapsed"
type="button"
data-toggle="collapse"
data-target="#mainMenu"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div class="collapse navbar-collapse"
id="mainMenu">
<div class="form-inline ml-auto">
<label class="sr-only"
for="search-text">Search</label>
<div class="input-group mr-2 mb-2 mb-sm-0">
<input type="text"
class="form-control"
id="search-text"
placeholder="search...">
<div class="input-group-append">
<a href="/search/"
type="button"
id="search-button"
class="btn btn-light">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<a href="/account/login"
class="btn btn-outline-light">log in</a>
<a href="/account/signup"
class="btn btn-info ml-2">sign up</a>
</div>
</div>
</div>
</nav>
<div class="container">
<ol class="breadcrumb my-4">
<li class="breadcrumb-item active">Bread crumbs</li>
</ol>
<h1>and some content</h1>
</div>
</body>
</html>
CodePen

You can add padding-right: 80px; to .navbar to push it back.

Not sure if I understood correctly but you can try:
.navbar {
border-left: 80px solid red;
}
.navbar .container {
left: 80px; /* something like this */
margin-left:0px !important
}

how to display the image on the full background for a perticular div?

how do i display the image on the .middle div to the full screen, i get a little white space at the end of the image in the right.i am using bootstrap 3 and css and html The image in the middle div is not taking the entire space it happens when i use the row class.I have included the css and html code.
#content{
text-align: center;
padding-top: 25%;
}
.middle {
background-image: url(https://images.unsplash.com/photo-1415369629372-26f2fe60c467);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 700px;
font-family:Lato;
color: white;
}
html{
height: 100%;
}
h1{
font-weight: 700;
font-size: 5em;
}
hr{
width: 400px;
border-top:1px solid #f8f8f8;
border-bottom: :1px solid rgba(0,0,0,0.2);
}
a{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Purfect match</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="glyphicon glyphicon-fire"></span> Purfect Match
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Pets For You</li>
<li>Blog</li>
<li>Careers</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign in <i class="fas fa-user-plus"></i></li>
<li>Log in <i class="fas fa-user"></i></li>
</ul>
</div>
</div>
</nav>
<div class="middle">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Perffect match</h1>
<h3>The Only Human-feline dating app</h3>
<hr>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<a>About</a>
<a>Contact</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
<div class="col-lg-4">
<a>Services</a>
<a>conformation</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

The issue doens't come from your background-image, but from your last <div class="row">
You MUST put the bootstrap row inside an element with class container or container-fluid
Try to replace your last block with :
<div class="container">
<div class="row">
<div class="col-lg-4">
<a>About</a>
<a>Contact</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
<div class="col-lg-4">
<a>Services</a>
<a>conformation</a>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started</button>
</div>
</div>
</div>