We Keep Coding

Collapsed navbar push elements outside of parent container when shown (Bootstrap 5)

Intro
I'm using Bootstrap 5 (bundled with webpack 5), with his grid system and the collapse function to create the home page to this site, that has 2 sidebars that collapse into a topbar.
When we get to a mobile format the navs collapse and the columns containing them stack up leaving the 3rd col with the logo at the bottom without overflowing the parent.
Look at my 100% accurate ms paint graphics to understand better
Issue
When we show the collapsed navs, the columns containing them push the 3rd col with the logo out of the row and the container-fluid containing it.
Question
How can i make the navs expanding without pushing the logo? (to clarify the logo needs to stay below the navs
ms paint 100% accurate graphics
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 order-0 my-auto">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand brand d-lg-none" href="#"
><b>ENV</b>Productions</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul
class="navbar-nav flex-column justify-content-between text-center text-lg-start"
>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SEVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-10 order-lg-1 order-last my-auto text-center">
<a class="navbar-brand brand d-none d-lg-block" href="#"
><b>ENV</b>Productions</a
>
<img
src="assets/img/BG_ENV_MONO-800px.png"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-1 order-lg-2 my-auto">
<nav class="navbar navbar-expand-lg">
<div
class="collapse navbar-collapse justify-content-end"
id="navbarResponsive"
>
<ul
class="navbar-nav flex-row flex-lg-column justify-content-around justify-content-lg-between"
>
<li class="nav-item text-center">
<a
href="https://www.instagram.com/env.productions/?hl=it"
target="”_blank”"
><i class="fa fa-instagram fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.youtube.com/channel/UCIloBELeZR4x8jmrhIQXQCw/featured"
target="”_blank”"
><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.facebook.com/env.productions/"
target="”_blank”"
><i class="fa fa-facebook-f fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.linkedin.com/company/env-productions/"
target="”_blank”"
><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>

I solved this by making the logo a background-image and merging the collapsible elements under the same parent with js.
There's probably a better solution though and maybe one that let you have the image at a block/inline level.

Submenu of a menu doesn't open

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link dropdown-toggle" dropdownToggle>
</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="btn dropdown-item" *ngFor="let language of languages" (click)="setLanguage(language)">
<span style="vertical-align: super;"></span>
</a>
</div>
</li>
<!-- utente con avatar -->
<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link float-right mt-1 pr-4" dropdownToggle>
<span class="float-left mt-1">
<i class="fa fa-user" style="font-size: 1.5rem;"></i>
<!-- prevedere user image -->
</span>
<span class="float-right mt-1 ml-1">
<div><b>user</b></div>
<div *ngIf="currentUser.roles && currentUser.roles.length == 1">desc</div>
<div *ngIf="currentUser.roles && currentUser.roles.length > 1">role</div>
</span>
</a>
<!-- menu -->
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<!-- logo confidi -->
<div class="dropdown-item text-center user-image">
<img [src]="userService.getUserPicture(currentUser?.image?.content)" class="img-fluid" alt="">
</div>
<!-- ultimo accesso -->
<div class="dropdown-item">
<div class="font-weight-bold">access </div>
<div>date</div>
</div>
<!-- matricola -->
<div class="dropdown-item">
<div class="font-weight-bold">numer </div>
<div>user</div>
</div>
<!-- ruoli -->
<div class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link dropdown-toggle font-weight-bold" dropdownToggle>roles</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="btn dropdown-item" *ngFor="let role of currentUser.roles; let i = index">
code - desc
</a>
</div>
</div>
<a class="dropdown-item logout-link" (click)="logout()">
<i class="fa fa-lock"></i> <span class="font-weight-bold">logout</span></a>
</div>
</li>
</ul>
</div>
</nav>
</header>
I have a dropdown-menu that contains multiple dropdown-item and an item that I want to be a submenu(that contains a list of item).
I add the submenu on my menu but when I try to open it does not open.
Here is the stackblitz
https://angular6-bootstrap4-navbar-j8ar1z.stackblitz.io
As you see there is a submenu called roles that doesn't open. How can I fix it?

The problem lies in your HTML - you cannot nest <li> tag inside of another <li> tag.
The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).
Source: MDN web docs
You can put <ul> inside of <li> though. It is actually a proper way to create a nested list.
Another thing is that you are trying to use nested dropdown and these seem to still be an experimental feature of ngx-bootstrap
Basic working example:
<!-- template.html !-->
<ul >
<li dropdown [autoClose]="false" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">Languages <span class="caret"></span></a>
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-nested">
<li role="menuitem" *ngFor="let lang of languages"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{lang}}</a></li>
</ul>
</li>
<li dropdown [autoClose]="false" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">User <span class="caret"></span></a>
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-nested">
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Settings</a></li>
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">Roles<span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem" *ngFor="let role of currentUser.roles"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{role}}</a></li>
</ul>
</li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Logout</a></li>
</ul>
</li>
</ul>
// Component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
public menu: {}[] = [];
languages = ['pl', 'en', 'de', 'es'];
currentUser = {roles: ['admin', 'inboxUser', 'developer']}
}
Example on Stackblitz

Trigger click is not working using bootstrap 4 tabs

I'm using bootstrap 4 tabs as pages, there is a issue because i want to display tabs/pages content on body click but when i'm using body click then trigger click is not working on prev and next buttons otherwise its working fine, how can i fix it?
My Code:-
$('.pageStepsTabs').hide();
/* customPageSteps begin here */
$('#customPageStepBtns').on('click', '.btnNext', function () {
$('.pageStepsTabs li > .active').parent('li').next('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
$('#customPageStepBtns').on('click', '.btnPrev', function () {
$('.pageStepsTabs li > .active').parent('li').prev('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
/* customPageSteps ends here */
/* dynamicPages begin here */
var allPages =`
<div class="tab-pane active" id="page1">page 1</div>
<div class="tab-pane fade" id="page2">page 2</div>
<div class="tab-pane fade" id="page3">page 3</div>
`
$('body').on('click', function () {
$('#dynamicPages').html(allPages)
});
/* dybamicPages ends here */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs pageStepsTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#page1">page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page2">page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page3">page 3</a>
</li>
</ul>
<div id="dynamicPages" class="tab-content">
</div>
<!-- page buttons -->
<div id="customPageStepBtns">
<div class="row m-0 mt-4 mb-4">
<div class="col-md-12">
<div class="float-left">
<button type="button" class="btn btn-primary btn-sm btnPrev"><i class="fa fa-chevron-left"></i> Prev</button>
</div>
<div class="float-right">
<button type="button" class="btn btn-primary btn-sm btnNext">Next <i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>

Add e.stopPropagation(); on both button next and prev click function.
This will prevent the click function propagation to the body.
Check the snippet
$('.pageStepsTabs').hide();
/* customPageSteps begin here */
$('#customPageStepBtns').on('click', '.btnNext', function(e) {
e.stopPropagation();
$('.pageStepsTabs li > .active').parent('li').next('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
$('#customPageStepBtns').on('click', '.btnPrev', function(e) {
e.stopPropagation();
$('.pageStepsTabs li > .active').parent('li').prev('li').find('a').trigger('click');
$('.mobile-page-menu-list').hide();
});
/* customPageSteps ends here */
/* dynamicPages begin here */
var allPages = `
<div class="tab-pane active" id="page1">page 1</div>
<div class="tab-pane fade" id="page2">page 2</div>
<div class="tab-pane fade" id="page3">page 3</div>
`
$('body').on('click', function() {
$('#dynamicPages').html(allPages)
});
/* dybamicPages ends here */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs pageStepsTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#page1">page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page2">page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page3">page 3</a>
</li>
</ul>
<div id="dynamicPages" class="tab-content">
</div>
<!-- page buttons -->
<div id="customPageStepBtns">
<div class="row m-0 mt-4 mb-4">
<div class="col-md-12">
<div class="float-left">
<button type="button" class="btn btn-primary btn-sm btnPrev"><i class="fa fa-chevron-left"></i>
Prev</button>
</div>
<div class="float-right">
<button type="button" class="btn btn-primary btn-sm btnNext">Next <i
class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>

Bootstrap 4 Tabs inside drop-down menu

I am using boostrap 4 drop down menu with tabs inside. Here is the codepin
I found this link useful to stop click event propagation so that the drop down menu does not close on click inside itAvoid dropdown menu close on click inside
But clicking on tabs does not work.
code pin:boostrap 4 tabs inside drop down menu
is there any solution or another approach so that tabs work inside drop down menu
HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<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 id="navbarDropdownMenuLink" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" class="nav-link active" role="tab" href="#pane-A" data-toggle="tab">
–A–
</a>
</li>
<li class="nav-item">
<a id="tab-B" class="nav-link" role="tab" href="#pane-B" data-toggle="tab">
–B–
</a>
</li>
<li class="nav-item">
<a id="tab-C" class="nav-link" role="tab" href="#pane-C" data-toggle="tab">
–C–
</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div id="heading-A" class="card-header" role="tab">
<h5 class="mb-0">
<a href="#collapse-A" data-toggle="collapse" data-parent="#content" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
[Tab content A]
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div id="heading-B" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-B" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
[Tab content B]
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div id="heading-C" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-C" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
<div class="card-body">
[Tab content C]
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
Is there possible solution ?

The simplest way is to wrap it inside a form since the form will prevent the Dropdown from closing on click...
<nav>
...
<li class="nav-item dropdown">
<form>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
....
</div>
</form>
</li>
...
</nav>
https://www.codeply.com/go/GzekeuWnSg
The other method is using jQuery to like this:
$('.dropdown-menu .nav-tabs .nav-link').on("click.bs.dropdown", function (e) {
$(this).tab('show');
e.stopPropagation();
});
https://www.codeply.com/go/iEDxVGTzAZ

expand grid system column when i click in a icon bootstrap

I have an google maps in a tab with bootstrap, but the map become to small, so i want to change a bootstrap grid system when i click on fa icon, i want the first column torns to col-md-8, and the second column torn to col-md-4.
thx,
here my code:
<h2 class="block-title">Mapas Brasil</h1>
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs nav-cptec">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu1" role="tabpanel">
<div id="map-canvas"></div>
</div>
<div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
<div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
</div>
<div class="col-md-6">
<ul class="nav nav-tabs nav-justified nav-cptec">
<li class="nav-item">
<a class="d-flex align-items-center nav-link active" data-toggle="tab" href="#menu-1" role="tab">Anánalise Sinótica</a>
</li>
<li class="nav-item">
<a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-2" role="tab">Imagens de Satélite</a>
</li>
<li class="nav-item">
<a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-3" role="tab">Vale do Paraíba</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu-1" role="tabpanel">
<img src="/images/sinotica.png" alt="" class="img-fluid">
</div>
<div class="tab-pane" id="menu-2" role="tabpanel">Satélite</div>
<div class="tab-pane" id="menu-3" role="tabpanel">Vale</div>
</div>
<img src="http://i.imgur.com/mE72FHG.png" alt="Faça sua analise sinótica" class="img-fluid top5" width="100%">
</div>
</div>

$('#abrir').click(function() {
$('#teste').removeClass('col-md-6').addClass('col-md-8 open');
$('#teste2').removeClass('col-md-6').addClass('col-md-4');
});
$('body').click(function(e){
//Detect if click is outside #abrir AND is "open"
if($(e.currentTarget).closest('#abrir').length==0 && $('#abrir').hasClass('open')){
$('#teste').addClass('col-md-6').removeClass('col-md-8 open');
$('#teste2').addClass('col-md-6').removeClass('col-md-4');
}
});
This should do the trick. What you want is to reverse what you do on the click element. Put an event on the body, to listen for every click and inside this handler, see if the clicked element is inside or outside the targeted element to make sure we trigger accordingly.
You'll have to make sure that all click handlers on your page do not prevent event bubbling (it shouldn't, as it is bad practice) or else the click outside the element will not always be seen...

i added this code and change the column to col-md-6 to col-md-4, but when i click out, dont turn back.
javascript its the same that you gave to me
my code:
<div class="row">
<div id="teste" class="col-md-6">
<ul class="nav nav-tabs nav-cptec">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu1" role="tabpanel">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true" id="abrir"></i>
<div id="map-canvas"></div>
</div>
<div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
<div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
</div>
</div>