Change the name of the dropdown menu by selected link name - html

First of all, I will paste my whole html code here:
{% extends "base.html" %}
{% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Postgresqlabfragen -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<ul>
<li> <strong>Verfügbare Abfragen:</strong> </li>
</ul>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{url_for('server.epex')}}">
EPEX
</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{url_for('server.post')}}">
Show Partner
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">EPEX Strompreise</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
</div>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Aktueller Stand
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="loadNewGraph(1)">Aktueller Stand</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(1)">Letzte Woche</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(2)">Maximum</a></li>
</ul>
</div>
</div>
</div>
<img id="graph" src="" width="900" height="600" >
<!-- <script src="{{ url_for('static', filename='EPEX_dashboard.js') }}"></script>-->
<script>
function loadNewGraph(id){
let req_url = '/postgresql/epex/get_graph/'
//if (window.location.href.includes("partner")){
// req_url = '/postgresql/partner/get_graph/'
//}
// ajax call to url get_graph, cf.: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
const xhttp = new XMLHttpRequest();
xhttp.open("GET", req_url + id, true);
xhttp.send();
xhttp.onload = function(e){
imgurl = document.getElementById('graph')
imgurl.src = '/static/Bilder/new_plot.png' + "?ts=" + Date.now()
}
}
loadNewGraph(0)
</script>
</body>
{% endblock %}
My problem is that I want to change the button name "Aktueller Stand" with the selected one.
In this case I have 3 possible selections:
'Aktueller Stand
Letzte Woche
Maximum'
But clicking on them still leaves in the window "Aktueller Stand". I didnt find a satysfying solution on the internet. Can you help me out guys?
Here is a photo of my linked Bootstrap Dropdownmenu:
https://ibb.co/gbKk53Z "dropdown menu"


Add an id to your button to use it in js. I said lnkButton, you can name anything.
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="lnkButton">
Add a text input to your function as the click options text :
function loadNewGraph(id, text){
...
Use this input to change the button text at the very bottom of your function
...
document.getElementById("lnkButton").innerText = text;
}
Add text input values into your link as their button text :
<li><a class="dropdown-item" onclick="loadNewGraph(0, 'Aktueller Stand')">Aktueller Stand</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(1, 'Letzte Woche')">Letzte Woche</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(2, 'Maximum')">Maximum</a></li>
Finally add the first button text as the initial value when you call your function:
loadNewGraph(0, 'Aktueller Stand');


You can pass the content of the clicked option as second parameter like this
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Aktueller Stand
</button>
<ul class="dropdown-menu">
<li>
<!-- The keyword this refer to the a tag -->
<a class="dropdown-item" onclick="loadNewGraph(this, 0)">Aktueller Stand</a>
</li>
<li>
<a class="dropdown-item" onclick="loadNewGraph(this, 1)">Letzte Woche</a>
</li>
<li>
<a class="dropdown-item" onclick="loadNewGraph(this, 2)">Maximum</a>
</li>
</ul>
</div>
<img id="graph" src="" width="900" height="600" />
<script>
// Your dropdown button you can give an id for more specificity
let dropdownBtn = document.querySelector(".dropdown button");
function loadNewGraph(el, id) {
// Update label depending on what you click
dropdownBtn.innerText = el.innerText;
//.....
}
// Default option
loadNewGraph(dropdownBtn, 0);
</script>


Thank you Batu.Khan and the rest of community :-).
I post here my solution leaned on the answer of Batu.kha, which is now working wonderful.
{% extends "base.html" %}
{% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Postgresqlabfragen -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<ul>
<li> <strong>Verfügbare Abfragen:</strong> </li>
</ul>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{url_for('server.epex')}}">
EPEX
</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{url_for('server.post')}}">
Show Partner
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">EPEX Strompreise</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
</div>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="lnkButton">
Aktueller Stand
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="loadNewGraph(0,'Aktueller Stand')">Aktueller Stand</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(1, 'Letzte Woche')">Letzte Woche</a></li>
<li><a class="dropdown-item" onclick="loadNewGraph(2, 'Maximum')">Maximum</a></li>
</ul>
</div>
</div>
</div>
<img id="graph" src="" width="900" height="600" >
<!-- <script src="{{ url_for('static', filename='EPEX_dashboard.js') }}"></script>-->
<script>
function loadNewGraph(id,text){
let req_url = '/postgresql/epex/get_graph/'
//if (window.location.href.includes("partner")){
// req_url = '/postgresql/partner/get_graph/'
//}
// ajax call to url get_graph, cf.: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
const xhttp = new XMLHttpRequest();
xhttp.open("GET", req_url + id, true);
xhttp.send();
xhttp.onload = function(e){
imgurl = document.getElementById('graph')
imgurl.src = '/static/Bilder/new_plot.png' + "?ts=" + Date.now()
}
document.getElementById("lnkButton").innerText = text;
}
loadNewGraph(0, 'Aktueller Stand')
</script>
</body>
{% endblock %}

Related

Navbar class is not active on click using jquery

I want to active nav-bar menu when clicked from nav bar, i am using the following code, to active nav menu when clicked, but it is not working for me.
i am using bootstrap classes for add nav-bar into my webpage.
please help me to find where i am mistaken?
$(document).ready(function() {
$(".mr-auto .nav-item").bind("click", function(event) {
event.preventDefault();
var clickedItem = $(this);
$(".mr-auto .nav-item").each(function() {
$(this).removeClass("active");
});
clickedItem.addClass("active");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="main-header" class="header header1">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="./">
<img src="images/site-logo.png" alt="Site-logo">
</a>
<div id="toggle-icon" class="icon-btn">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu-nav" class="navigation-menu">
<div class="navbar-collap" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="careers">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio">Portfolio</a>
</li>
<li class="nav-item contact-link">
<a class="nav-link" href="contact">Contact-us</a>
</li>
</ul>
<div class="button">
<a class="btn btn1" id="cont" href="contact.php">contact us <i class="icon-feature-6"></i></a>
</div>
</div>
</div>
</nav>
</header>

The .active class does not highlight the nav-link.
Solution 1
add css:
.mr-auto .nav-item.active a{background: blue;color:#fff}
Solution 2
Try this:
$(document).ready(function() {
$(".mr-auto .nav-item a").bind("click", function(event) {
event.preventDefault();
var clickedItem = $(this);
$(".mr-auto .nav-item a.active").removeClass("active btn-primary");
clickedItem.addClass("active btn-primary");
});
});

Create a Bootstrap select with options on an icon span

I've created a blade with a signboard (screenshot).
The signboard has a foreach containing each created column with its name, color and assigned cards.
For sorting these cards I have added an icon next to each column title.
I'd like to be able to open a select and see it's options when clicking on the sort-icon.
I've tried to add a hidden select element and used .selectpicker('toggle') to try and toggle it when clicking on the element, but without any success.
The foreach loop is shown in the code below, where $statuses are the columns's values given form the controller.
<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
<div class="row">
<div class="col-10">
<h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
<span class="small material-icons" style="display: inline">sort</span>
</div>
<div class="col-2">
<small class="totalCandidates mt-0 float-right"></small>
</div>
</div>
</div>
To summarize my question: Is there any way that I could use an icon instead of a bulky select box to show my sortable options?
I'd really appreciate any support or solutions.
If it's not possible in any way I would like to hear this too so I could look for other options.
Kind regards and my thanks in advance.
EDIT
My updated card header after Bernhard Beatus's answer:
<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
<div class="row">
<div class="col-10">
<ul class="nav nav-pills">
<h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
<li class="nav-item dropdown pl-1">
<a data-toggle="dropdown" href="#"><span class="small material-icons">sort</span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Name</a>
<a class="dropdown-item" href="#">Status</a>
<a class="dropdown-item" href="#">Position</a>
<a class="dropdown-item" href="#">Creation date</a>
</div>
</li>
</ul>
</div>
<div class="col-2">
<small class="totalCandidates mt-0 float-right"></small>
</div>
</div>
</div>
This will now open a dropdown-menu, so unfortunally still no select box, but it'll have to do.

So now there is an Icon.
I created a fiddle for you: https://jsfiddle.net/bogatyr77/1xfwjq6c/2/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="col pl-1 pr-1">
<div class="card bg-transparent h-100">
<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
<div class="row">
<div class="col-10">
<ul class="nav nav-pills">
<h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-filter"></i></a>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
<span class="small material-icons" style="display: inline"></span>
</div>
<div class="col-2">
<small class="totalCandidates mt-0 float-right"></small>
</div>
</div>
</div>
{{-- uses jQuery to show corresponding cards --}}
<div class="card-body kanbanColumn" data-status='{{ $status->id }}'></div>
</div>
</div>
<div id="candidateModal"></div>

Dropdown with data toggle keeps two options selected

I have a dropdown menu with contains a data toggle for tabs. I have the problem that once I selected an item, the item stays selected and stays blue.
Any ways to fix this?
Code:
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>

Make a id="dropdown-menu" next to class="dropdown-menu". This would be more convenient. reference line -20.
Make a Javascript that will add .active class in your clicked area/HTML. For example if you click on
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
that will add .active class in there
<button class="dropdown-item class" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
And it will remove .active class from the previous position. This .active class is a Bootstrap class. It will render CSS style from Bootstrap.
Code below-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<title>HTML5, CSS3 and JavaScript demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div id="dropdown-menu" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>
<script>
var header = document.getElementById("dropdown-menu");
var btns = header.getElementsByClassName("dropdown-item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
document.getElementById("overall").innerHTML = this.innerText;
});
}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

HTML navigation list shows multiple items as selected

I am working on a website, the navigation list of the website is in the picture. If I go to the page number 1, other pages are also shown as selected. But if I go to the page number 2 there is no problem.
Here is the code for navigation list. The list items shown as selected have different file names. How a list item now that it is selected ?
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="../index.php">
<i class="ti-dashboard menu-icon"></i>
<span class="menu-title">Ana Sayfa</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#kullanicilar" aria-expanded="false"
aria-controls="kullanicilar">
<i class="ti-id-badge menu-icon"></i>
<span class="menu-title">Kullanıcılar</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="kullanicilar">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="kullanicilari-listele.php">Kullanıcılar</a></li>
<li class="nav-item"><a class="nav-link" href="kullanici-olustur.php">Kullanıcı
Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="kullanici-istatistikleri-listele.php">Kullanıcı
İstatistikleri</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#workouts" aria-expanded="false"
aria-controls="workouts">
<i class="ti-gallery menu-icon"></i>
<span class="menu-title">Antrenmanlar</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="workouts">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="antrenmanlari-listele.php">Antrenmanlar</a></li>
<li class="nav-item"><a class="nav-link" href="antrenman-olustur.php">Antrenman Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="egzersizleri-listele.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="tekil-egzersiz-olustur.php">Tekil</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#pilates" aria-expanded="false"
aria-controls="pilates">
<i class="ti-timer menu-icon"></i>
<span class="menu-title">Pilates</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="pilates">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="pilates-egzersiz-setleri.php">Egzersiz Setleri</a></li>
<li class="nav-item"><a class="nav-link" href="pilates-egzersiz-seti-olustur.php">Egzersiz Seti Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="pilates-tekil-egzersizleri.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="pilates-tekil-egzersiz-olustur.php">Tekil</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#yoga" aria-expanded="false"
aria-controls="yoga">
<i class="ti-eye menu-icon"></i>
<span class="menu-title">Yoga</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="yoga">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="yoga-egzersiz-setleri.php">Egzersiz Setleri</a></li>
<li class="nav-item"><a class="nav-link" href="yoga-egzersiz-seti-olustur.php">Egzersiz Seti Oluştur</a></li>
<li class="nav-item"><a class="nav-link" href="yoga-tekil-egzersizleri.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="yoga-tekil-egzersiz-olustur.php">Tekil Egzersiz Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#streching" aria-expanded="false"
aria-controls="streching">
<i class="ti-hand-open menu-icon"></i>
<span class="menu-title">Streching</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="streching">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="streching-egzersiz-setleri.php">Egzersiz Setleri</a></li>
<li class="nav-item"><a class="nav-link" href="streching-egzersiz-seti-olustur.php">Yeni Egzersiz Seti</a></li>
<li class="nav-item"><a class="nav-link" href="kstreching-tekil-egzersizleri.php">Tekil Egzersizler</a></li>
<li class="nav-item"><a class="nav-link" href="streching-tekil-egzersiz-olustur.php">Yeni Egzersiz</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#sporKategorileri" aria-expanded="false"
aria-controls="sporKategorileri">
<i class="ti-star menu-icon"></i>
<span class="menu-title">Kategoriler</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="sporKategorileri">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="kategorileri-listele.php">Kategoriler</a></li>
<li class="nav-item"><a class="nav-link" href="kategori-olustur.php">Yeni Kategori Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#egzersizEkipmanlari" aria-expanded="false"
aria-controls="egzersizEkipmanlari">
<i class="ti-basketball menu-icon"></i>
<span class="menu-title">Egzersiz</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="egzersizEkipmanlari">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link"
href="egzersiz-ekipmanlari-listele.php">Ekipmanlar</a></li>
<li class="nav-item"><a class="nav-link" href="egzersiz-ekipmani-olustur.php">Yeni Ekipman
Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#vucutBolgeleri" aria-expanded="false"
aria-controls="vucutBolgeleri">
<i class="ti-heart menu-icon"></i>
<span class="menu-title">Vücut Bölgeleri</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="vucutBolgeleri">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link"
href="vucut-bolgeleri-listele.php">Vücut Bölgeleri</a></li>
<li class="nav-item"><a class="nav-link" href="vucut-bolgesi-olustur.php">Vücut Bölgesi
Oluştur</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#urunler" aria-expanded="false"
aria-controls="urunler">
<i class="ti-package menu-icon"></i>
<span class="menu-title">Ürünler</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="urunler">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="urunleri-listele.php">Ürünler</a></li>
<li class="nav-item"><a class="nav-link" href="urun-olustur.php">Yeni Ürün Oluştur</a>
</li>
<li class="nav-item"><a class="nav-link" href="urun-istatistikleri-listele.php">Ürün
İstatistikleri</a></li>
</ul>
</div>
</li>
</ul>
</nav>
'''
This is the page number 1
<?php
ob_start();
session_start();
if (!isset($_SESSION["login"])) {
header("Location: ../login.php");
} else {
include "veritabani/baglanti.php";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Online Gym Fitness Mobil Uygulama Yönetim Paneli</title>
<!-- plugins:css -->
<link rel="stylesheet" href="../vendors/ti-icons/css/themify-icons.css">
<link rel="stylesheet" href="../vendors/base/vendor.bundle.base.css">
<!-- endinject -->
<!-- inject:css -->
<link rel="stylesheet" href="../css/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="../images/favicon.png"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="../js/repeater.js" type="text/javascript"></script>
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
<div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
<a class="navbar-brand brand-logo mr-xl-5" href="../index.php"><img src="../images/logo.png" class="mr-2"
alt="logo"/></a>
<a class="navbar-brand brand-logo-mini" href="../index.php"><img src="../images/logo-mini.png" alt="logo"/></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="ti-view-list"></span>
</button>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
<img src="../images/faces/user.png" alt="profile"/>
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
<a class="dropdown-item" href="veritabani/logout.php">
<i class="ti-power-off text-primary"></i>
Logout
</a>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
data-toggle="offcanvas">
<span class="ti-view-list"></span>
</button>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../partials/_sidebar.html -->
<?php
include "navbar.html";
?>
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-lg-9 grid-margin">
<div class="card">
<div class="card-body">
<h4 class="card-title">Yeni Tekil Egzersiz</h4>
<p class="card-description">
Yeni Tekil Egzersiz Oluşturma Formu
</p>
<form method="post" name="egzersizOlusturmaFormu" id="egzersizOlusturmaFormu"
class="forms-sample">
<div class="form-group">
<label for="egzersizBasligi">Egzersiz Başlığı</label>
<input type="text" class="form-control" id="egzersizBasligi"
name="egzersizBasligi"
required="required"
>
</div>
<div class="form-group">
<label for="egzersizAltBaslik">Egzersiz Alt Başlık</label>
<input type="text" class="form-control" id="egzersizAltBaslik"
name="egzersizAltBaslik"
required="required"
>
</div>
<div class="form-group">
<label for="egzersizAciklama">Egzersiz Açıklama</label>
<input type="text" class="form-control" name="egzersizAciklama"
id="egzersizAciklama"
required="required">
</div>
<div class="form-group">
<label for="egzersizPremium">Premium içerik mi ?</label>
<select class="form-control form-control"
name="egzersizPremium" id="egzersizPremium">
<option value="1">Evet</option>
<option value="0">Hayır</option>
</select>
</div>
<div class="form-group">
<label for="egzersizVideoUrl">Video Embed Url</label>
<input type="text" class="form-control"
name="egzersizVideoUrl" id="egzersizVideoUrl"
required="required">
</div>
<div class="form-group">
<label for="egzersizPopularite">Popülarite Skoru</label>
<input type="text" class="form-control"
name="egzersizPopularite" id="egzersizPopularite">
</div>
<div class="form-group">
<label for="egzersizEkipmanKategorisi">Ekipman Kategorisi</label>
<select class="form-control form-control" name="egzersizEkipmanKategorisi"
id="egzersizEkipmanKategorisi">
<?php
$sorgu = "SELECT name,id FROM equipments ORDER BY name DESC";
$sorguSonucu = mysqli_query($baglanti, $sorgu) or trigger_error("Hata: " . mysqli_error(), E_USER_ERROR);
if ($sorguSonucu) {
while ($equipment = mysqli_fetch_assoc($sorguSonucu)) {
echo "<option value='" . $equipment['id'] . "'>" . $equipment["name"] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="egzersizSporKategorisi">Kategori</label>
<select class="form-control form-control" name="egzersizSporKategorisi"
id="egzersizSporKategorisi">
<?php
$sorgu = "SELECT name,id FROM categories ORDER BY name DESC";
$sorguSonucu = mysqli_query($baglanti, $sorgu) or trigger_error("Hata: " . mysqli_error(), E_USER_ERROR);
if ($sorguSonucu) {
while ($sport = mysqli_fetch_assoc($sorguSonucu)) {
echo "<option value='" . $sport['id'] . "'>" . $sport['name'] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="egzersizVucutBolgesi">Vücut Bölgesi</label>
<select class="form-control form-control" name="egzersizVucutBolgesi"
id="egzersizVucutBolgesi">
<?php
$bodyPartsSql = "SELECT name,id FROM body_parts ORDER BY name DESC";
$bodyParts = mysqli_query($baglanti, $bodyPartsSql) or trigger_error("Hata: " . mysqli_error(), E_USER_ERROR);
if ($bodyParts) {
while ($part = mysqli_fetch_assoc($bodyParts)) {
echo "<option value='" . $part['id'] . "'>" . $part['name'] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="egzersizZorlukDerecesi">Egzersiz Zorluk Derecesi</label>
<select class="form-control form-control"
name="egzersizZorlukDerecesi" id="egzersizZorlukDerecesi">
<option value="1">Çok Kolay</option>
<option value="2">Kolay</option>
<option value="3">Orta</option>
<option value="4">Zor</option>
<option value="5">Çok Zor</option>
</select>
</div>
<div class="form-group">
<label for="egzersizOrtalamaSure">Egzersiz Ortalama Süresi (Dakika)</label>
<input type="text" class="form-control form-control"
name="egzersizOrtalamaSure" id="egzersizOrtalamaSure"
required="required">
</div>
<div class="form-group">
<label for="egzersizSetTipi">Setler Tekrarlı mı Süreli mi ?</label>
<select class="form-control form-control"
name="egzersizSetTipi" id="egzersizSetTipi">
<option value="1">Tekrarlı</option>
<option value="2">Süreli</option>
</select>
</div>
<div id="repeater">
<div class="repeater-heading" align="right">
<button type="button" class="btn btn-primary repeater-add-btn">Set Ekle
</button>
</div>
<div class="items" data-group="exercise_sets">
<div class="item-content">
<div class="row">
<div class="form-group" style="margin-left: 15px">
<label>Tekrar Sayısı/Süresi (Saniye) </label>
<input type="text" class="form-control"
required="required"
data-skip-name="true"
data-name="tekrarSayilari[]"
>
</div>
<div class="form-group" style="margin-left: 20px">
<label>Dinlenme Süresi (Saniye)</label>
<input type="text" class="form-control"
required="required"
data-skip-name="true"
data-name="dinlenmeSureleri[]"
>
</div>
<div class="col-lg-2" style="margin-top:30px;" align="center">
<button id="remove-btn"
onclick="$(this).parents('.items').remove()"
class="btn btn-danger">Sil
</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label>Tanıtım Görseli Yükle</label>
<input type="file" name="egzersizTanitimGorseli"
id="egzersizTanitimGorseli"
class="file-upload-default">
<div class="input-group col-xs-12">
<input type="text" class="form-control file-upload-info"
required="required"
disabled="">
<span class="input-group-append">
<button class="file-upload-browse btn btn-primary" type="button">Görsel Seç</button>
</span>
</div>
<img id="gorsel_preview">
</div>
<div style="margin-top: 20px">
<button type="submit" class="btn btn-primary mr-2">ONAYLA</button>
<button type="reset" class="btn btn-light">İPTAL</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
<!-- container-scroller -->
<!-- plugins:js -->
<script src="../vendors/base/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="../js/off-canvas.js"></script>
<script src="../js/hoverable-collapse.js"></script>
<script src="../js/template.js"></script>
<script src="../js/todolist.js"></script>
<script src="../js/file-upload.js"></script>
<script src="../js/repeater.js"></script>
<script src="../js/jquery.validate.js"></script>
<script type="text/javascript">
$('#egzersizOlusturmaFormu').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: 'veritabani/egzersiz-kayit.php', // Verileri Post Ettiğimiz dosya adı
type: 'POST', // Form Metodumuz
data: new FormData(this), // Form ile gelen verilerimiz
contentType: false,
processData: false,
beforeSend: function () {
// Form Post edildikten sonra yapılacak işlem
// $('#result').html('<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%;"><span class="sr-only">Lütfen Bekleyiniz....</span></div></div>');
},
success: function (data) {
// veritabani/etkinlik-ekle.php dosyamıza verilerin gönderildikten sonra işlem başarılı ise upload.php ile gelen sonuç değerini yazdıracağımız satır
alert(data);
$('#egzersizOlusturmaFormu')[0].reset(); // İşlem başarılı olduktan sonra formu sıfırlar
}
});
});
</script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#gorsel_preview').attr('src', e.target.result).attr('style', 'margin-bottom: 25px; margin-top: 25px; height: 150px; width: 150px');
};
reader.readAsDataURL(input.files[0]);
}
}
$("#egzersizTanitimGorseli").change(function () {
readURL(this);
});
</script>
<script>
$(document).ready(function () {
$('#repeater').createRepeater();
});
</script>
<!-- endinject -->
</body>
</html>

Bootstrap 4: Not being able to vertically -and responsively- center an image

I'm working on an Angular 6 app and at this moment I'm trying to center an image on home screen but no matter which solution I try (from the ones I've found here) it always shows immediately next to top navbar and not vertically centered.
I tried all solutions found in this next post in app.component.html with no luck, always get the more or less the same result as can be seen in the picture:
Vertical Align Center in Bootstrap 4
Please, help me in centering vertically home image (or text or whatever I choose to put) without affecting the rest of pages that use the app.component.html template.
index.html:
<!doctype html>
<html lang="en">
<head>
<title>WFRH</title>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app>Loading...</app>
</body>
</html>
app.component.html:
<app-nav></app-nav>
<div class="jumbotron">
<div class="container d-flex h-100" style="border: 1px solid red">
<div class="row justify-content-center align-self-center text-center">
<div class="col-sm-12">
<!-- <router-outlet></router-outlet> -->
I'm centered...
</div>
</div>
</div>
</div>
<app-footer></app-footer>
home.component.html:
<img src="../../../assets/cirsa_home.png" class="img-fluid" />
nav.component.html:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark pb-0">
<div class="container pb-1">
<!-- Brand -->
<a class="navbar-brand" href="{{xxxApp.xxxWebsiteUrl}}" target="_blank">
<img src="../../../assets/app_logo.png" />
</a>
<!-- Menu Toggler -->
<button style="margin-left: 10px;" class="navbar-toggler order-last order-sm-0" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse order-last order-sm-0" id="collapsibleNavbar" *ngIf="(isLoggedIn | async)">
<ul class="navbar-nav pull-left">
<li class="nav-item text-left hover-inverse">
<a class="nav-link text-light" href="#">
<i class="fa fa-home"></i>
<label [translate]="'wfrh_nav_home' | translate">Inicio</label>
</a>
</li>
<li class="nav-item text-left dropdown hover-inverse">
<a class="nav-link dropdown-toggle text-light" href="#" id="navbardrop" data-toggle="dropdown">
<i class="fa fa-edit"></i>
<label [translate]="'wfrh_nav_requests' | translate">Solicitudes</label>
</a>
<div class="dropdown-menu bg-dark border-0 hover-inverse">
<a [routerLink]="['/vacancy-form']" class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_fillvacancy' | translate">APC Cubrir vacante</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_leave' | translate">APC Excedencia</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_lactation' | translate">APC Lactancia</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_maternity' | translate">APC Maternidad</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_newcreationdailycasinos' | translate">APC Nueva Creación Diarios Casinos</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_newcreation' | translate">APC Nueva Creación</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_substitution' | translate">APC Sustitución IT</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_holidays' | translate">APC Vacaciones</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_changeofconditions' | translate">CDC Cambio Condiciones</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_evaluationsheet' | translate">HEV Hoja Evaluación</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_balanceandsettlement' | translate">PSF Saldo y Finiquito</label>
</a>
</div>
</li>
<li class="nav-item text-left hover-inverse">
<a [routerLink]="['/login']" class="nav-link text-light">
<i class="fa fa-sign-out"></i>
<label [translate]="'wfrh_nav_logoff' | translate">Cerrar sesión</label>
</a>
</li>
</ul>
</div>
<!-- Email send tester -->
<!-- <button class="btn-primary" (click)="emailMe()">Send Test Email To Me</button> -->
<!-- User menu -->
<!-- <div class="dropdown d-flex flex-grow-1" style="margin-right: 10px;" *ngIf="(isLoggedIn | async)">
<button type="button" class="btn btn-success dropdown-toggle ml-auto" data-toggle="dropdown" id="userDropdown">
{{userName | async}}
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<div class="dropdown-divider"></div>
<a [routerLink]="['/login']" class="dropdown-item">Logout</a>
</div>
</div> -->
<!-- Language Selector -->
<select class="selectpicker ml-auto" data-width="65px" id="langSelect" data-style="btn-primary" #langSelect
(change)="languageChange(langSelect.value)">
<option class="flag-icon flag-icon-squared flag-icon-{{xxxApp.countryInfo[i].ISO3166_2Letter}}" style="margin-bottom: 5px; width: 65px;"
*ngFor="let lang of xxxApp.translate.getLangs(); let i = index" [value]="lang" [selected]="lang === xxxApp.translate.currentLang">
<span class="flag-icon flag-icon-squared flag-icon-{{xxxApp.countryInfo[i].ISO3166_2Letter}}"></span>
</option>
</select>
</div>
</nav>
<nav class="navbar navbar-expand-md bg-dark navbar-dark pt-0 pb-0">
<div class="container pt-0 pb-1">
<small class="username">
{{userName | async}}
</small>
</div>
</nav>
styles.css:
#import "~bootstrap/dist/css/bootstrap.min.css";
#import "~font-awesome/css/font-awesome.css";
html, body {
height: 100%;
}

You probably missunderstood the solution given in the vertical align post.
To be able to align vertically an item depending on its parent, you have to set the parent's height (that is why you see body height:100% in their example) but if, like in your html, you have many different parents, not only the parent has to have the 100% height prop, but also the children props
CSS Example :
#import "~bootstrap/dist/css/bootstrap.min.css";
#import "~font-awesome/css/font-awesome.css";
html, body, div {
height: 100%;
}
HTML Example :
<body>
<div>
<image>the centered element</image>
</div>
</body>

After researching and doing a lot of trial and error I came up with a solution that works. I hope it is useful for anyone else with this issue.
My app main template consists on an horizontal navbar header => content => horizontal navbar footer and I set a fixed height footer of 40 px so then I use a negative margin of 40px for home image so it is centered respect content div and not the whole screen (I don't like this approach very much -I mean, using negative margins- but it works):
app.component.html (the main structure):
<div class="main">
<div class="row header m-0 p-0">
<div class="col-12 m-0 p-0">
<app-nav></app-nav>
</div>
</div>
<div class="row content m-0 p-0">
<router-outlet></router-outlet>
</div>
<div class="row footer">
<app-footer></app-footer>
</div>
</div>
home.component.html:
<div style="margin-top: -40px !important;" class="pl-5 pr-5">
<img src="../../../assets/img_home.png" class="img-fluid" />
</div>
styles.css:
html, body {
height: 100%;
}
.main {
display: flex;
flex-flow: column;
height: 100%;
}
.main .row.header {
flex: 0 1 auto;
}
.main .row.content {
flex: 1 1 auto;
}
.main .row.footer {
flex: 0 1 auto;
}
And so is how the home screen looks: