I am using Reactjs and I am trying to use this list group from Bootstrap 4. However, when I change the A tags to <Link> the code does not work anymore, and will not display anything. What is the best way to have it rendered in React using <Link>?
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
e.g.
<a class="list-group-item list-group-item-action active"... into <Link className="list-group-item... >
I have played around with this code, and after removing the data-toggle="list" the code worked with the <Link> tags!
Related
The vertical pills layout is exactly what I want for desktop devices, but for small screen sizes, I want it to be more compact. I need the tab-pane text to display under the nav-link - like under each individual nav-link, not below the whole group of nav-pills.
The following is the base example on the Bootstrap v5 documentation:
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
I tried moving the tab-pane elements directly under their perspective nav-links, but I couldn't get it to work.
Is this possible to do what I'm envisioning? Or alternatively, is there a better way to set this up?
Here is an example using Bootstrap 5's responsive grid classes and CSS media queries to achieve the desired behavior:
<div class="d-flex flex-column flex-md-row align-items-start">
<div class="nav flex-column nav-pills w-100 w-md-auto me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content w-100" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
<style>
#media (max-width: 767.98px) {
.nav-pills {
display: flex;
flex-wrap: wrap;
}
.tab-content {
display: flex;
flex-wrap: wrap;
}
.tab-pane {
width: 100%;
}
}
</style>`
This will display the nav-pills vertically on larger screens, and horizontally on smaller screens, with the tab-pane elements displayed directly underneath the corresponding nav-link.
I am trying to setup HTML bootstrap tabs, the most basic possible ones:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
But because of routerlink in angular, I get redirected to https://localhost:5001/#profile instead of the div I am trying to open. I don't want to turn off routerlink because it is the main form of navigation for my site. I just want this one navbar to not use it. I haven't been able to find any way around this... Hopeful for an html solution, but open to anything :)
Use routerLink instead of href.
See Angular RouterLink.
I have many tabs in my showDialog, when I set tab_2 as active, the content shows nothing which is strange.
<div class="portlet-body">
<div class="tabbable-blue" id="my_tabDialog" style="margin:0px;">
<ul class="nav nav-tabs nav-tabs-lg">
<li id="li_tab_1">
<a data-toggle="tab" href="#" data-target="#tab_1">
MyTab1
</a>
</li>
<li id="li_tab_2" class="active">
<a data-toggle="tab" href="#" data-target="#tab_2">
MyTab2
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab_1" class="tab-pane fade meter-tabs-height">
<div ng-include="'mytab1.html'"></div>
</div>
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
</div>
</div>
</div>
When I firstly come into the dialog, the dialog shows MyTab2 with no content at all.
However, when I click MyTab1 and then reclick MyTab2, the content appears.
How does this happen and how could I handle this problem?Thank you.
I have made a mistake in my code, just add class="active" could resolve it.
Replace
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
with
<div id="tab_2" class="tab-pane fade in meter-tabs-height active">
<div ng-include="'mytab2.html'"></div>
</div>
I have some genres and relevant Tv shows. Do I necessarily need to convert nav pills into react router Link tags? Or I can use the following bootstrap navigation that is already set up to show the tab content. Would using the later be considered as a bad practice?
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-action-tab" data-toggle="pill" href="#v-pills-action" role="tab" aria-controls="v-pills-action" aria-selected="true">action</a>
<a class="nav-link" id="v-pills-comedy-tab" data-toggle="pill" href="#v-pills-comedy" role="tab" aria-controls="v-pills-comedy" aria-selected="false">comedy</a>
<a class="nav-link" id="v-pills-thrill-tab" data-toggle="pill" href="#v-pills-thrill" role="tab" aria-controls="v-pills-thrill" aria-selected="false">thrill</a>
<a class="nav-link" id="v-pills-horror-tab" data-toggle="pill" href="#v-pills-horror" role="tab" aria-controls="v-pills-horror" aria-selected="false">horror</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-action" role="tabpanel" aria-labelledby="v-pills-action-tab">...</div>
<div class="tab-pane fade" id="v-pills-comedy" role="tabpanel" aria-labelledby="v-pills-comedy-tab">...</div>
<div class="tab-pane fade" id="v-pills-thrill" role="tabpanel" aria-labelledby="v-pills-thrill-tab">...</div>
<div class="tab-pane fade" id="v-pills-horror" role="tabpanel" aria-labelledby="v-pills-horror-tab">...</div>
</div>
</div>
</div>
I am trying to put a checkbox in a tab panel on the left side. But the checkbox cannot check or uncheck. Can anyone help me to solve this ? This is my code and the image on what I am trying to do.
<aside class="sm-side">
<div role="tabpanel">
<ul class="nav nav-pills brand-pills nav-stacked" role="tablist">
<li role="presentation" class="brand-nav active" >
<a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">
<input type="checkbox" id="eq1" >
<label for="eq1">Resource 1</label>
</a>
</li>
<li role="presentation" class="brand-nav">Resource 2</li>
<li role="presentation" class="brand-nav">Resource 3</li>
<li role="presentation" class="brand-nav">Resource 4</li>
</ul>
</div>
</aside>
<aside>
<div role="tabpanel" class="tab-pane active" id="tab1">
<p>Hello1</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<p>Hello 2</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
<p>Hello 3</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab4">
<p>Hello 4</p>
</div>
</aside>
Image of what I am trying to do