Twitter Bootstrap: Align nav-tabs to bottom of div - html

Question

I'm building a website, and for the first time i am using the twitter bootstrap.
I'm trying to align my menu to the bottom of my div.
But for some reason i can't figure out how to do it.
I did some research and tried using the box-align property.
but that didnt work.
This is my code:
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="img/logo.png" >
</div>
<div class="col-md-8">
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-home" style="color:#6d92a2"></span> Home</li>
<li><span class="glyphicon glyphicon-check" style="color:#6d92a2"></span> Missie en Visie</li>
<li><span class="glyphicon glyphicon-calendar" style="color:#6d92a2"></span> Activiteiten</li>
<li><span class="glyphicon glyphicon-user" style="color:#6d92a2"></span> Lidmaatschap</li>
<li><span class="glyphicon glyphicon-play-circle" style="color:#6d92a2"></span> Videozone</li>
<li><span class="glyphicon glyphicon-map-marker" style="color:#6d92a2"></span> Contact</li>
</ul>
</div> <!-- nav tabs -->
</div> <!-- row -->
Any advice?
EDIT: It seems I didn't specify my question enough, my bad. I'm not using the CDNs at the moment, the menu itself doesnt give any problems. As you can see in: link , the nav comes at the top of the div, but i want it aligned at the bottom of the div.

Answer 1

You have to give the parent element a specific height. I would recommend doing this by adding an extra class, e.g. extraClass, to your <div class="col-md-8"> like this:
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="img/logo.png" >
</div>
<div class="col-md-8 extraClass">
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-home" style="color:#6d92a2"></span> Home</li>
<li><span class="glyphicon glyphicon-check" style="color:#6d92a2"></span> Missie en Visie</li>
<li><span class="glyphicon glyphicon-calendar" style="color:#6d92a2"></span> Activiteiten</li>
<li><span class="glyphicon glyphicon-user" style="color:#6d92a2"></span> Lidmaatschap</li>
<li><span class="glyphicon glyphicon-play-circle" style="color:#6d92a2"></span> Videozone</li>
<li><span class="glyphicon glyphicon-map-marker" style="color:#6d92a2"></span> Contact</li>
</ul>
</div> <!-- nav tabs -->
</div> <!-- row -->
And the use this CSS:
.extraClass {
height: 122px;
position: relative;
}
.extraClass ul {
position: absolute;
bottom: 0;
}

Answer 2

In Bootstrap 4 you can use d-flex and align-items-end of the new flexbox utilities and place your logo right inside a <li> of your Nav <ul>:
Example with left-side logo:
<ul class="nav nav-tabs d-flex align-items-end">
<li class="nav-item mr-auto">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"
width="283" alt="Logo - Stack Overflow">
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Item 1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
</ul>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Example with right-side logo:
<ul class="nav nav-tabs d-flex align-items-end">
<li class="nav-item">
<a class="nav-link active" href="#">Item 1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item ml-auto">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"
width="283" alt="Logo - Stack Overflow">
</a>
</li>
</ul>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Answer 3

Try this
<ul class="nav nav-tabs navbar-bottom">