CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kickar
Kickar

Reputation: 163

Twitter Bootstrap: Align nav-tabs to bottom of div

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"><a href="#"><span class="glyphicon glyphicon-home" style="color:#6d92a2"></span> Home</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-check" style="color:#6d92a2"></span> Missie en Visie</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-calendar" style="color:#6d92a2"></span> Activiteiten</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user" style="color:#6d92a2"></span> Lidmaatschap</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-play-circle" style="color:#6d92a2"></span> Videozone</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-map-marker" style="color:#6d92a2"></span> Contact</a></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.

Upvotes: 5

Views: 10666

Answers (3)

Jpsy
Jpsy

Reputation: 20852

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">

Upvotes: 1

Sebsemillia
Sebsemillia

Reputation: 9476

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"><a href="#"><span class="glyphicon glyphicon-home" style="color:#6d92a2"></span> Home</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-check" style="color:#6d92a2"></span> Missie en Visie</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-calendar" style="color:#6d92a2"></span> Activiteiten</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user" style="color:#6d92a2"></span> Lidmaatschap</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-play-circle" style="color:#6d92a2"></span> Videozone</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-map-marker" style="color:#6d92a2"></span> Contact</a></li>
   </ul>

   </div> <!-- nav tabs -->

</div> <!-- row -->

And the use this CSS:

.extraClass {
    height: 122px; 
    position: relative;
}

.extraClass ul {
    position: absolute;
    bottom: 0;
}

Upvotes: 9

Dextere
Dextere

Reputation: 301

Try this

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

Upvotes: -2

Related Questions