Twitter Bootstrap: Align nav-tabs to bottom of div

Related searches

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.

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;
}

Components � Twitter Bootstrap, You need to resolve the alignment manually or with custom javascript. Dropdown menus can also be toggled from the bottom up by adding a single class to To make tabs tabbable, wrap the .nav-tabs in another div with class . tabbable . Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left. Changing between them is easy and only requires changing very little markup. Tabbable example

In Bootstrap 4 you can use d-flex and align-items-end of the new flexbox untilities 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">

Navbar components, Add .pull-right to a .dropdown-menu to right align the dropdown menu. Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left. Learn how to use Bootstrap navbar component to create responsive navigation bar or header which can be fixed to top or bottom of the page quickly and easily.

Try this

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

Components � Twitter Bootstrap 2.1.1 Documentation, Add .pull-right to a .dropdown-menu to right align the dropdown menu. Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left. The .ml-auto class in Bootstrap can be used to align navbar items to the right. The .ml-auto class automatically aligns elements to the right. In this article, we will align the navbar to the right in two different ways, below both the approaches are discussed with proper example.

Bootstrap 4 Cheat Sheet, ul.nav; nav.nav; nav justify-content-*; nav flex-column; nav-tabs; nav-pills; nav-fill; nav- align-*; clearfix; fixed-top; fixed-bottom; sticky-top; float-*-left; float-*-right; float-*-none Please send feedback via email or Twitter. <div class="card"> < div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> <a� Option 3 – Bootstrap Width Utility. In this example, I am using Bootstrap’s width utility class of .w-50 to make the div 50% wide all the time. Then I added a utility class of .mx-auto that sets the margin left and right to auto centering it horizontally inside the .row container.

Bootstrap All CSS Classes, Complete list of all Bootstrap classes with description and examples: .active, Adds a gray background color to the active link in a default navbar. .carousel- indicators, Adds little dots/indicators at the bottom of each slide (which .form- inline, Makes a <form> left-aligned with inline-block controls (This only applies to forms� Check out the smart bootstrap tips to vertical align in bootstrap 3 top, bottom, center with example. Get complete bootstrap tutorials on tutorialsplane.com

How to Right Align Button Using Bootstrap. For right alignment of button using bootstrap, you have to use the class .text-right on a HTML div tag for Bootstrap button right alignment. See the below example for Bootstrap align right method inside the div element.

Comments
  • Does bootstrap CDNs works properly? Check whether the script and css links are loaded properly?
  • Your menu seems to be perfectly aligned in the div. What exactly do you mean? You want the navigation items not centered but at the bottom of the menu?
  • I am not getting what exactly you want.
  • 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.
  • "position: absolute;bottom: 0;width: 100%;" worked for me. Thanks.
  • Thank you sharpshadow. Had to add the width: 100% as well.
  • navbar-bottom isn't a class in Bootstrap as of v3.3.2