im starting a project using bootstrap and i've been having a little bit of trouble trying to figure out a way to make this image cover the inteire width of my container
any ideias??
appreciate the help!!!
here's my code
hey guys,
im starting a project using bootstrap and i've been having a little bit of trouble trying to figure out a way to make this image cover the inteire width of my container
any ideias??
appreciate the help!!!
here's my code
:root {
--DarkerGray: #1b1d1d;
--Gray: #3F4545;
--MediumGray: #464a4a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--LighterGray: #eceaea;
--White: white;
--OrangeSelect: rgb(255, 166, 0);
}
html, body {
user-select: none;
}
.navbar {
background-color: var(--DarkBlue);
}
.nav-item {
cursor: pointer;
font-weight: 550;
}
.dropdown-item {
cursor: pointer;
font-weight: 550;
}
.dropdown-item:hover {
background-color: var(--OrangeSelect);
}
#containerIMG {
width: 100%;
height: 500px;
object-fit: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-expand-lg navbar-dark ">
<a class="navbar-brand" href="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CARDÁPIO
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"> PRATOS </a>
<a class="dropdown-item" href="#"> LANCHES </a>
<a class="dropdown-item" href="#"> SOPAS </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
BEBIDAS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"> ÁGUAS </a>
<a class="dropdown-item" href="#"> SUCOS </a>
<a class="dropdown-item" href="#"> REFRIGERANTES </a>
<a class="dropdown-item" href="#"> CERVEJAS </a>
<a class="dropdown-item" href="#"> VINHOS </a>
<a class="dropdown-item" href="#"> APERITIVOS </a>
<a class="dropdown-item" href="#"> DRINKS </a>
</li>
<li class="nav-item">
<a class="nav-link text-white">RESERVAR MESA <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> PESQUISAR </a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> MINHA CONTA </a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> MEUS PEDIDOS</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid bg-dark">
<img src="https://t.ctcdn.com.br/essK16aBUDd_65hp5umT3aMn_i8=/400x400/smart/filters:format(webp)/i606944.png" id="containerIMG">
</div>
</body>
You have to delete the padding of the .container-fluid class, you can add p-0 to the class in your HTML
:root {
--DarkerGray: #1b1d1d;
--Gray: #3F4545;
--MediumGray: #464a4a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--LighterGray: #eceaea;
--White: white;
--OrangeSelect: rgb(255, 166, 0);
}
html, body {
user-select: none;
}
.navbar {
background-color: var(--DarkBlue);
}
.nav-item {
cursor: pointer;
font-weight: 550;
}
.dropdown-item {
cursor: pointer;
font-weight: 550;
}
.dropdown-item:hover {
background-color: var(--OrangeSelect);
}
#containerIMG {
width: 100%;
height: 500px;
object-fit: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-expand-lg navbar-dark ">
<a class="navbar-brand" href="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CARDÁPIO
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"> PRATOS </a>
<a class="dropdown-item" href="#"> LANCHES </a>
<a class="dropdown-item" href="#"> SOPAS </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
BEBIDAS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"> ÁGUAS </a>
<a class="dropdown-item" href="#"> SUCOS </a>
<a class="dropdown-item" href="#"> REFRIGERANTES </a>
<a class="dropdown-item" href="#"> CERVEJAS </a>
<a class="dropdown-item" href="#"> VINHOS </a>
<a class="dropdown-item" href="#"> APERITIVOS </a>
<a class="dropdown-item" href="#"> DRINKS </a>
</li>
<li class="nav-item">
<a class="nav-link text-white">RESERVAR MESA <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> PESQUISAR </a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> MINHA CONTA </a>
</li>
<li class="nav-item">
<a class="nav-link text-white"> MEUS PEDIDOS</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid p-0 bg-dark">
<img src="https://t.ctcdn.com.br/essK16aBUDd_65hp5umT3aMn_i8=/400x400/smart/filters:format(webp)/i606944.png" id="containerIMG">
</div
</body>
Related
I have a nav menu, which I got from bootstrap v-4, but I have some problems, a dropdown will appear when I click 2 times, this happens after refreshing the page. I tried to delete the other dropdown menus, but the results are still the same
<nav class="navbar navbar-expand-lg navbar-light navbar-header fixed-top bt-warning p-2" id="navbar">
<div class="container">
<a class="navbar-brand mt-1" href="#">
<img src="" width="40" height="40" class="d-inline-block align-top" alt="">
<p class="t-titlepage d-inline-block mt-1">Perpustakaanku</p>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse n-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-weight-bold" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user"></i> Akun
</a>
<div class="dropdown-menu dropdown-menu-right alert-warning" aria-labelledby="navbarDropdown1">
<a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Login <i class="fas fa-sign-in-alt"></i></a>
<a class="dropdown-item d-flex justify-content-between align-items-center" href="#">Register <i class="fas fa-file-alt"></i></a>
</div>
</li>
</ul>
</div>
</div>
I am only a beginner in bootstrap and have a hard time figuring out how to change the css to my liking. I have a dropdown menu in my header and was able to change the colours. However, when the dropwdownmenu is selected, the font colour stays the same? How do I change this? I tried following:
.dropdown-toggle:active, .open .dropdown-toggle {
background:#ffffff !important;
color:#7dc623 !important;
}
but that doesn't change anything.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
</div>
</li>
</ul>
</div>
</nav>
See the background is green, but the text is black, but should be white.
see screenshot
Removing .open from the code did the trick:
.dropdown-toggle:active, .dropdown-toggle {
background:#ffffff !important;
color:#7dc623 !important;
}
Applying your CSS properties on directly on a tag may cause certain issues, it would be advisable to use a span between the a tag for your text.
ie:
.navbar{
background-color: #FFFF99 !important;
}
.text_in_span{
color: #7dc623 !important;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><span class="text_in_span">Link 1</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="text_in_span">Link 2</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="text_in_span">Dropdown</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#"><span class="text_in_span">Link 3</span></a>
<a class="dropdown-item" href="#"><span class="text_in_span">Link 4</span></a>
</div>
</li>
</ul>
</div>
</nav>
I guess that should do the trick, cheers.
Navber code:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<a class="navbar-brand" href="#">
<img src="images\logo1.png" width="200" height="80" class="d-inline-block align-top" alt="">
</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="navbar-nav dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Behandelingen
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="sportmassage.html">Sportmassage</a>
<a class="dropdown-item" href="#">Massagetherapie</a>
<a class="dropdown-item" href="#">Ontspanningsmassage</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Afspraak maken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarieven</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Bootstrap code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Dropdown menu inside the navbar doesn't open, anyone an idea on how to fix this?
Not very experienced with bootstrap and don't now what the problem is.
Your button don't call your div
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
your "aria-labelledby" does not match the button id "id="dropdownMenuButton""
it's in the bootstrap documentation
Try this for Bootstrap 4 dropdown navbar
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #fdfeff;">
<a class="navbar-brand" href="#">
<img src="images\logo1.png" width="200" height="80" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navCollapse"
aria-controls="navCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="navbar-nav dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdown01"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Behandelingen
</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="sportmassage.html">Sportmassage</a>
<a class="dropdown-item" href="#">Massagetherapie</a>
<a class="dropdown-item" href="#">Ontspanningsmassage</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Afspraak maken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarieven</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Nevermind I solved the issue, stupid mistake by not adding jquery
I made a navbar with bootstrap and the dropdown menu has a white line at the top and bottom. I want the whole dropdown to be the same color but can't seem to figure out how to get rid of the white lines. BTW I'm a beginner coder and this navbar was straight copied and pasted from getboostrap so if anything is looking wrong please let me know thank you!
Here is a picture of the dropdown
Here's my HTML:
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color:#3d3d3d">
<a class="navbar-brand" href="https://marginedge.com/" target="_blank">
<img src="navbarLogo.png" width="200">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Flow <span class="sr-only">(current)
</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EDI Tracker</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">D.C. Sales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Zendesk</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Client Facing
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Isabella</a>
<a class="dropdown-item" href="#">Eggspectation</a>
<a class="dropdown-item" href="#">Ford's</a>
<a class="dropdown-item" href="#">Hard Rock</a>
<a class="dropdown-item" href="#">Wendy's</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Demos</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Analyst
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">IR Error Report</a>
<a class="dropdown-item" href="#">Rec Error Report</a>
<a class="dropdown-item" href="#">Quarterly Team Evaluations</a>
<a class="dropdown-item" href="#">Data Fixer for Analysts</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Redash</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Central Data Health Check</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-lg-2" type="search" size="40" placeholder="Search Redash Reports..." aria-label="Search">
<button type="button" class="btn btn-outline-primary btn-lg">Search</button>
</form>
</div>
and here's is the CSS:
body{
padding: 0;
margin: 0;
}
nav {
width: 100%;
}
nav ul li{
padding: 5px 10px;
font-size: 20px;
}
.dropdown-menu a{
font-size: 15px;
color: #d6d6d6;
background-color: #3d3d3d;
}
Addp-0 class on .dropdown-menu. It will remove he padding causing the white space
body {
padding: 0;
margin: 0;
}
nav {
width: 100%;
}
nav ul li {
padding: 5px 10px;
font-size: 20px;
}
.dropdown-menu a {
font-size: 15px;
color: #d6d6d6;
background-color: #3d3d3d;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color:#3d3d3d">
<a class="navbar-brand" href="https://marginedge.com/" target="_blank">
<img src="navbarLogo.png" width="200">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Flow <span class="sr-only">(current)
</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EDI Tracker</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">D.C. Sales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Zendesk</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Client Facing
</a>
<div class="dropdown-menu p-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Isabella</a>
<a class="dropdown-item" href="#">Eggspectation</a>
<a class="dropdown-item" href="#">Ford's</a>
<a class="dropdown-item" href="#">Hard Rock</a>
<a class="dropdown-item" href="#">Wendy's</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Demos</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Analyst
</a>
<div class="dropdown-menu p-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">IR Error Report</a>
<a class="dropdown-item" href="#">Rec Error Report</a>
<a class="dropdown-item" href="#">Quarterly Team Evaluations</a>
<a class="dropdown-item" href="#">Data Fixer for Analysts</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Redash</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Central Data Health Check</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-lg-2" type="search" size="40" placeholder="Search Redash Reports..." aria-label="Search">
<button type="button" class="btn btn-outline-primary btn-lg">Search</button>
</form>
</div>
I have a website that I am developing utilizing the Bootstrap 4 framework. I am trying to create a navbar with the navbar-brand in the center. I was able to place the navbar-brand in the center with a navbar-nav on each side of the navbar-brand. Please find below the code that I utilized. My issue is that the navbar-brand is vertically aligned in the center of the navbar.
How can I align the navbar-brand to the bottom of the navbar and have the excess stick out at the top of the navbar without adjusting the margins?
#hdrContainer {
background-color: #0a3782;
}
.container {
background-color: inherit;
}
#tblHeader {
width: 100%;
/*font-size: .8125rem;*/
font-size: 1rem;
text-align: right;
color: #ffffff;
font-weight: bold;
}
#tblHeader tr {
height: 50px;
}
.breadcrumb {
background-color: inherit;
margin-bottom: initial;
font-weight: bold;
}
.breadcrumb .active {
color: inherit;
}
#socialbrand {
text-align: right;
}
#mainNavbar {
background-color: gray;
}
#mainNavbar .container .navbar {
position: relative;
z-index: 0;
max-height: 40px;
}
.navbar-brand {
position: relative;
z-index: 1;
margin-right: initial;
}
.form-control {
width: 200px;
}
.btn-outline-navy {
color: #f6b40e;
background-color: transparent;
background-image: none;
border-color: #f6b40e;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="hdrContainer" class="container-fluid">
<div class="container">
<table id="tblHeader">
<tbody>
<tr>
<td>
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Commander, Naval Surface Force, US Pacific</li>
</ol>
</nav>
</td>
<td id="socialbrand" style="display: block; padding: .75rem 1rem;">Follow Us |
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-flickr" aria-hidden="true"></i>
<i class="fa fa-wordpress" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td colspan="2">
<nav class="navbar navbar-light">
<form class="form-inline">
<input class="form-control form-control-sm ml-auto mr-sm-2 float-right" placeholder="Search" aria-label="Search" type="search">
<button class="btn btn-sm btn-outline-navy my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="mainNavbar" class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!-- Just an image -->
<a class="navbar-brand mr-auto ml-auto" href="#">
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="75" height="75">
</a>
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
The solution below makes use of the various flexbox utility classes available in Bootstrap, described in detail in the docs.
The .navbar-brand got wrapped into <div id="logo"> in order to set it's positioning to absolute, and it's bottom position to 0. That pushes down the logo container to the bottom of the navbar.
Additionally, I've added the .d-none .d-lg-block classes in order to hide the logo when the menu is collapsed.
Available as a CodePen as well.
/* Pushing logo to bottom */
#logo {
position: absolute;
bottom: 0;
}
/* Basic styling to resemble to source */
.navbar {
background-color: gray;
}
#header {
height: 100px;
color: white;
background-color: #0a3782;
display: flex;
justify-content: center;
align-items: center;
}
<div id="header">[header placeholder]</div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<div id="logo" class="d-none d-lg-block">
<a class="navbar-brand m-0" href="#">
<img src="http://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="75" height="75" alt="">
</a>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Item 1</a>
<a class="nav-item nav-link" href="#">Item 2</a>
<a class="nav-item nav-link" href="#">Item 3</a>
<a class="nav-item nav-link" href="#">Item 4</a>
</div>
</div>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>