On the main webpage, I am using tabs to display and organize images. After clicking on one of the images and opening up to the webpage for that image, I want to make it so clicking on one of the tabs from that webpage returns to the original main webpage and goes directly to that tab.
<ul class="nav nav-pills mb-3 sticky-top shadow-sm p-2 bg-body rounded" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-all-tab" data-bs-toggle="pill" data-bs-target="#all-tab-pane" type="button" role="tab" aria-controls="all-tab" aria-selected="true">All</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-second-tab" data-bs-toggle="pill" data-bs-target="#second-pane" type="button" role="tab" aria-controls="second-tab" aria-selected="false">Watercolor</button>
</li>
I thought that by changing the data-bs-target on the individual page to mainpage.php#second-pane it would take me to that specific content. I then tried adding an anchor tag linking it to a href = "mainpage.php#second-pane" as the parent element outside the list item and button, but that only takes me to the tab I have set to active on mainpage.php and not the tab I am trying to go to. I have also tried using section and linking it to its ID but that also does not work.
https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
Related
I'm struggling to position button which is nav container to the right side of the screen. All other nav-items need to be on the center so i`m using justify content center.
I have tried to use:
margin-left:auto on the button, but it moves other links on the left side.
remove justify-content-center on nav and add flex-shrink:1 with margin-left: auto on the button.
move button outside nav flex group, but then button appears on the next row.
Screenshot of the nav container and button what need to position on the right side:
HTML:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Places</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<button type="button" class="btn btn-primary">Primary</button>
</ul>
You were almost on the right track.
You would need to take the button out of the list, and then declare the entire enclosing nav for the list and button to be a flex with center. That would more or less result in the same thing you have now, but it will have the list and the button as separate items. Then you'd take the list and make it grow as much as it can to the end using the class flex-grow-1 or flex-fill. That will push the button to the extreme right still being on the same row.
Here's the fiddle: JSFiddle
I have been trying to link html pages created on bootstrap without success. The buttons don't even click out so it's not like I get taken to another page with an error message. Just nothing. But today I observed something that might help someone more savvy than me identify the problem.
So, I'm trying to link other pages on the index.html (as an example, the services page).
Instead of taking me to "https://chozeqfarms.dashnexpages.net/services/" it looks like it wants to take me to https://chozeqfarms.dashnexpages.net/index/services.html, which I observe when hovering over the service button.
My code snippet for the navigation bar is below, and the href looks regular to my untrained eyes. But I must be doing something wrong, please what could be wrong and how do I fix it?
<div class="row navbar-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 navbar-container mynav">
Chozeq Farms
<nav class="navbar navbar-full">
<div class="collapse navbar-toggleable-md" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="trainings.html">Trainings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
☰
</button>
</div>
</div>
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
<ul class="nav nav-pills flex-column nav-justified">
<div id="sidebar-item" *ngFor="let item of sidebarItems">
<li class="nav-item" routerLink="{{item.url}}">
<a class="nav-link" routerLink="{{item.url}}" [routerLinkActive]="['active']"><fa-icon [icon]="item.icon" class="fa_icon ml-n3 m-2"></fa-icon>
<span class="item_title">{{ item.title | uppercase }}</span>
</a>
</li>
<hr>
</div>
</ul>
I have 4 items in sidebarItems list and it generates 4 nav-links. When the first one is active the other three don't work and when one of the other three is active the first one doesn't work.
First active, second doesn't work
Third active, second works
Third active, first doesn't work
You need to remove the div inside the ul tag and move you *ngForm on the li
<ul class="nav nav-pills flex-column nav-justified">
<li class="nav-item" *ngFor="let item of sidebarItems">
<a class="nav-link" routerLink="{{item.url}}" routerLinkActive="active">
<span class="item_title">{{ item.title | uppercase }}</span>
</a>
</li>
</ul>
Forked and working stackblitz at https://stackblitz.com/edit/angular-9oexwb
Edit: Your solution works on a wide enough monitor because your styles are wrt the window width. You need to work a lot on your styles but a quick fix would be to change the padding to margin for #dashboard[_ngcontent-xsb-c0] as 200px. Stackblitz updated.
Here is a jsfiddle of some tabs I have in bootstrap that I have added an 'x' button to. I already have all my js working fine to actually close tabs with the button.. I'm a little weak with css though still. How can I move the button 'x' to the top right of the tab?? Below is my code(using default bootstrap css for all of this)
<nav class="navbar navbar-default">
<ul class="nav nav-tabs nav-justified">
<li id="shellstab" class="active"><a role="tab" data-toggle="tab" href="#shells" aria-expanded="true">Shell<button class="close closeTab" type="button" >×</button></a>
<li id="wikitab"><a role="tab" data-toggle="tab" href="#wiki" aria-expanded="true">Wiki<button class="close closeTab" type="button">×</button></a>
<li id="querytab"><a role="tab" data-toggle="tab" href="#query" aria-expanded="true">Query<button class="close closeTab" type="button">×</button></a>
</ul>
</nav>
I would recommend to create a external css file.
But... put this in the "X" Button
style="position: absolute; top:0; right:0;"
Look at this jsFiddle: