I have tried the following code,
<ul class="nav nav-tabs">
<li class="nav-item" id="web1Tab"><a class="nav-link active" data-toggle="tab" id="w1" href="link_to_website_1">Website1</a></li>
<li class="nav-item" id="web2Tab"><a class="nav-link" data-toggle="tab" id="w2" href="link_to_website_2">Website2</a></li>
</ul>
It did look just like as I expected, however href doesn't work. On the other hand, if I remove the data-toggle="tab" part then href's work properly but active tab doesn't change. I guess that, href in this case only supports inner linking? I am not sure. The code looks very simple but I was unable solve it.
Can you try surrounding your entire list item with a href?
<ul class="nav nav-tabs">
<a style="display:block" href="your_url1_here">
<li class="nav-item" id="web1Tab">Website1</li>
</a>
<a style="display:block" href="your_url2_here">
<li class="nav-item" id="web2Tab">Website2</li>
</a>
</ul>
Related
Can I make all Bootstrap classes in the main DIV instead of assigning them to each DIV or INPUT, for instance, this is the normal Bootstrap navbar, I'm assuming if possible to collect all the classes in the DIV, I've heard about it but didn't find it anywhere. Thanks
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item active"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="contactus.html">Contact</a></li>
</ul>
</div>
I'm not sure if you're asking specifically about bootstrap, i.e., whether or not those two classes can be used together or if you're just asking in general?
You can apply as many classes to an element as you want, just separate class names with space
<div class="active dropdown-toggle custom-class"></div>
but only a single id:
<div id = "btn1 btn"> <!-- this is wrong --> </div>
So I am a beginner in angular and I have to simply make a navbar.I have my bootstrap loaded in the .json file and it looks like this:-
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
whereas my code looks like this:-
<ul class=" nav navbar-nav navbar-right">
<ul class="dropdown-menu">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
</ul>
</div>
</div>
</nav>
`
Output is :-
my save data and fetch data are not appearing on right.what is the reason?
Just replace "navbar-right" with "ml-auto".
But still things are wrong with your code apart from "navbar-right".
It should be -
<ul class="navbar-nav ml-auto">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
I am familiar with the tutorial you are working with, so I guess you are creating a dropdown menu, this should be the complete code for it-
<ul class = "navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
Manage
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
These existing questions might help -
Bootstrap NavBar with left, center or right aligned items
ml-auto is not pushing navbar links to the right
I have the following bootstrap nav tabs:
<div class="container">
<ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
<li class="nav-item" id="projectDetailsTab">
<a class="nav-link">Project Details</a>
</li>
<li class="nav-item" id="projectStatusTab">
<a class=nav-link>Status</a>
</li>
<li class="nav-item" id="projectDocumentsTab">
<a class=nav-link>Documents</a>
</li>
</ul>
</div>
I removed all of the href tags for brevity and to make it easier to read.
My problem is that the tabs are displaying like this:
By default, the tabs should be on the left side of the page, correct? What is causing this issue?
My goal is to get the tabs to align to the left side of the page, something like this:
Based on the code you've provided it would appear that your container is the problem. The container element applies a fixed width to everything within it, centering itself to the viewport.
The code that you have provided doesn't suggest that this component is required, but given that you've provided a minimal example you may expect unforeseen issues with its removal.
As mister #Robert already wrote, the align left problem caused by .container div. Although lets write your code more correct. You misses .active class in first li a. And a href attribute you will need anyway. Minimal it should be href='#' for the correct work of Bootstrap tabs.
<div class="any-class-not-container">
<ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
<li class="nav-item" id="projectDetailsTab">
<a class="nav-link active" href="#">Project Details</a>
</li>
<li class="nav-item" id="projectStatusTab">
<a class="nav-link" href="#">Status</a>
</li>
<li class="nav-item" id="projectDocumentsTab">
<a class="nav-link" href="#">Documents</a>
</li>
</ul>
</div>
More about Nav tabs in Bootstrap 4 you can read here https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
I'm working on a page in a Node Web app with a subnav that looks like this:
Here's the vanilla HTML for it:
<div class="col-md-8">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Comments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
Is there a way for me to create live links (e.g. Comments) on those tabs without having to render a whole separate route and EJS template? To me, a process like that would be more efficient and DRY than creating separate templates for each link in the subnav.
Any help would be greatly appreciated. Thanks!
I have a tab list, like the following:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="info_generali-tab" data-toggle="tab" href="#info_generali" role="tab" aria-controls="info_generali" aria-selected="true">Informazioni principali </a>
</li>
<li class="nav-item">
<a class="nav-link" id="moduli_lavorazione-tab" data-toggle="tab" href="#moduli_lavorazione" role="tab" aria-controls="moduli_lavorazione" aria-selected="false">Moduli Lavorazione</a>
</li>
Actually, if I click on a single tab, the url does not change. But If, ad example, I want to redirect the second tab (when click on) to the following link: /prova_uno ???
Correct your existing code will not change address, it will show a named anchor "#info_generali" or "#moduli_lavorazione".
If you want one of those tabs to not switch to a tab but instead load a new page then remove the data-toggle and set the target href to the page you wish to open:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="info_generali-tab" data-toggle="tab" href="#info_generali" role="tab" aria-controls="info_generali" aria-selected="true">Informazioni principali </a>
</li> <!-- This one will display the tab-->
<li class="nav-item">
<a class="nav-link" id="moduli_lavorazione-tab" href="/prova_uno" role="tab" aria-controls="moduli_lavorazione" aria-selected="false">Moduli Lavorazione</a>
</li> <!-- This one will navigate to URL /prova_uno -->
</ul>
So to recap, to make one of your tab formatted navigation links open a new page instead of display a tab:
Remove the data-toggle
Set the URL in href