In Bootstrap, with <ul class="nav nav-tabs">, one gets tabs with the bottom line extending nicely to the right, e.g.,
The tabs are moved to the right with either <ul class="nav nav-tabs navbar-right"> or <ul class="nav nav-tabs pull-right">, the bottom line does not extend to the left, e.g.,
How to fix this?
You can add classes to your li's as such:
CodePen Here
<ul class="nav nav-tabs">
<li class="pull-right">Item 1</li>
<li class="active pull-right">Item 2</li>
<li class="pull-right">Item 3</li>
</ul>
Related
I'm migrating a website from Bootstrap 3.7 to Bootstrap 4. In my site, I have a banner across the top that looks like this:
+-----------------------------------------------------------+
| Item 1 Item 2 Item A Item B [note] |
+-----------------------------------------------------------+
The items in the left are dynamic. The items on the right are dynamic. The [note] piece shows occasionally. I had this working correctly with Bootstrap 3.7. However, when migrating to Bootstrap 4, the content is all left aligned. You can see the result in this Bootply. The code looks like this:
<nav class="navbar">
<div class="d-inline-flex" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline justify-content-end">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
</ul>
<div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
</div>
</nav>
I don't understand why the items are all left-aligned instead of filling the width of the page. What am I missing?
As explained here float won't work in the navbar since it's now flexbox. Use ml-auto to push the items to the right.
<nav class="navbar">
<div class="d-inline-flex" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline ml-auto">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
</ul>
<div class="nav-item sub-nav-title float-md-right pr-0">[note]</div>
</div>
</nav>
https://www.codeply.com/go/CGBAvf8r1q
Or, you can use mr-auto on the first nav.
Could you put your [note] item in with your second unordered list and and use justify-content-between in your wrapping div element? It would look something like this...
<nav class="navbar">
<div class="d-inline-flex justify-content-between" style="width:100%;">
<ul class="nav navbar-nav d-inline-flex">
<li class="nav-item">
<ul class="list-inline-mb-0">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
</ul>
</li>
</ul>
<ul class="nav list-inline">
<li class="list-inline-item pt-0 pr-1 pb-0 pl-0">Aug.</li>
<li class="list-inline-item">29th</li>
<li class="list-inline-item">[note]</li>
</ul>
</div>
</nav>
I am trying to do a master page for my web page. I'm using HTML5 and Bootstrap framework. On the top of page there will be a bar that contains a dropdown menu and I would like to align this dropdown menu to the right.
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav" style="">
<li class="dropdown">
Departments<span class="caret"></span>
<ul class="dropdown-menu width-200">
<li class="dropdown-submenu">
<li>E</li>
<li>F</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
I tried
<style="float:right;">
but it didn't work and i think the reason is dropdown class is not allowing it to work. It worked with using
<style="padding-left:680px;">
but i guess it's not the right way of doing this, there must be a better way. Also what happens if I use "padding-left" and I want to add something to the left of this "li" element?
This is the screen output of the bar I am talking about.
The question is that how can I do that alignment?
Thanks
Best regards
You can use .pull-right class to ul element which is comes with bootstrap.
HTML Example
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
<ul class="nav navbar-nav navbar-right">
</ul>
To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Wrap your dropdown with <div align="right">...</div> this will ensure the text in the dropdown is all right aligned.
You can use the "navbar-right" class <ul class="nav navbar-nav navbar-right">.
I recommend you to look at the bootstrap documentation and check this link bootstrap navbar component
Basically my issue is that I'm trying to pull this to the right of the page and have no idea how this would be done;
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">1</li>
<li role="presentation">2</li>
<li role="presentation">3</li>
<li role="presentation">4</li>
<li role="presentation">5</li>
<li role="presentation">6</li>
! - This is the one that i need aligned to the right - !
<li role="presentation">Admin Panel</li>
</ul>
This is the sub-menu under the navigation bar I use the default bootstrap CSS.
Add the class "pull-right" i'm making a fiddle for you.
https://jsfiddle.net/7Lwa0mky/
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">1</li>
<li role="presentation">2</li>
<li role="presentation">3</li>
<li role="presentation">4</li>
<li role="presentation">5</li>
<li role="presentation">6</li>
<!--This is the one that i need aligned to the right -->
<li role="presentation" class="pull-right">Admin Panel</li>
Have you actually tried
<li role="presentation pull-right">Admin Panel</li>
:P
I want to have a foundation top-bar with one left and one right section.
The problem i am getting is when it collapses with a small screen i want the right nav (the one with the topbar) to still show and not collapse into the menu with the left nav section.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</nav>
I am using a Bootbusiness theme in my Twitter Bootstrap website, and I am trying to create the stacked tab navigaton, as seen in the documentation of Bootstrap but whenever I try do it only appears as a List without style. And not styled as stacked button.
Here is my code in the HTML
<div >
<ul class="nav nav-tabs nav-stacked">
<li class="active">List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
You need to have an anchor inside li to get the styles
Fiddle
<div>
<ul class="nav nav-tabs nav-stacked">
<li class="active">List Item </li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>