I am using below code for BootStrap 4 tab.
<ul class="nav nav-tabs font-weight-bold">
<li class="nav-item">
<a class="nav-link active" href="#details" data-toggle="tab">Page Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content" data-toggle="tab">Page Content</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="details">Page Details</div>
<div role="tabpanel" class="tab-pane fade" id="content">Page Content</div>
</div>
How can I make it responsive so that I can see this tabs even in 100px height and 100px width ?
use this
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
latest bootstrap 4.+ update of navs, works on every screensize
Will shrink to horizontal view if u go below 300px
link for latest bootstrap version
https://getbootstrap.com/
Related
I want to make a fixed navbar on top with one row, not just two. the code I have is:
<div class="col-md-3">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link text-white" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="teaching.html">Teaching</a>
</li>
</ul>
</div>
Now I want to make one row. Is there any clean way to do this??
Add list-group-horizontal class to ul tag.
<div class="col-md-3">
<ul class="navbar-nav mb-2 mb-lg-0 list-group-horizontal">
<li class="nav-item">
<a class="nav-link text-white" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="teaching.html">Teaching</a>
</li>
</ul>
</div>
You may see the list should have some spaces between them.
https://getbootstrap.com/docs/5.0/components/list-group/#horizontal
Is there away that i can use only html to center these nave links without having to do a css code?
nav link are align left, would want to bring them center of the webpage.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<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" role="presentation">
<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" role="presentation">
<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>
You can just add .justify-content-center to the .nav to center those nav links, since the .nav is already displayed as a flexbox:
<ul class="nav nav-tabs justify-content-center">
...
</ul>
...
demo: https://jsfiddle.net/davidliang2008/g1fn7smr/2/
I want to redirect template component. I go to another template component but I don't find the way
<template>
<div class="section-wrapper mg-t-20">
<label class="section-title">Gestion De Datos</label>
<!-- <p class="mg-b-20 mg-sm-b-40">Below is an example of a pill navigation in both light and dark.</p> -->
<div class="pd-10 bd">
<ul class="nav nav-pills flex-column flex-md-row" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Reporte</a></li>
<li class="nav-item" >
<a class="nav-link" data-toggle="tab" href="REDIRECT TO ANOTHER VUE COMPONENT PAGE" role="tab">Agregar Cliente</a>
</li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Asignar</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Cambiar Estado</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Importar</a></li>
<!-- <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li> -->
</ul>
</div><!-- pd-10 -->
</div><!-- section-Datos -->
</template>
Image of source code vue.js
I am new to bootstrap and want to have nav pills in my navigation bar to switch the content of the page (like tabs). Without the navbar it is working, but i would like to have it in my navbar.
This is my code so far:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<span class="navbar-brand mb-0 h1">ioBroker</span>
<ul class="navbar-nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
</nav>
<main role="main" class="container-full">
<div class="container-full">
<div class="tab-content">
<div class="tab-pane fade show active" id="content-1" aria-labelledby="tab-1" role="tabpanel">Content 1</div>
<div class="tab-pane fade" id="content-2" aria-labelledby="tab-2" role="tabpanel">Content 2</div>
</div>
</div>
</main>
The issue i have, is that i can't switch back to an already opened "tab". I fi remove the "data-toggle" property, it works for the buttons, but not for the content switching.
Add the nav class to the nav-pills, and the content switching will work as expected for Tabs...
<ul class="navbar-nav nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
Demo: https://www.codeply.com/go/Xr6tLFbqKj
I need to link my another webpage to my pictures nav menu.
Ex: if I click my pictures menu , it opens google.com.
Framework: bootstrap 4
div class="row row2">
<div class="col-md-12">
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My music</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My files</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My videos</a>
</li>
</ul>
</div>
</div>
This will work :)
<div class="row row2">
<div class="col-md-12">
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="http://google.com">My pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My music</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My files</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My videos</a>
</li>
</ul>
</div>
</div>
This is the correct code for my question. i solve this with your help. thankyou
Html
<div class="row row2">
<div class="col-md-12">
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" href="about_me.html">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="my_pictures.html">My pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="my_music.html">My music</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="my_files.html">My files</a>
</li>
<li class="nav-item">
<a class="nav-link" href="my_videos.html">My videos</a>
</li>
</ul>
</div>
</div>
CSS
.active {
background-color: #39a0c9 !important;
color: #fff !important;
}