Synchronize multiple nav-tabs with multiple nav-bars in Boostrap 4 - html

I'm building a tool to help some co-workers examine and compare information.
I want this information to be shown in the same manner for each order is shown and since there are a lot of "groups" of information for each order I have built nav-tabs to switch between each information group.
I would however like the nav tab selector-bar for all selectors to be updated, not just the one the user clicked.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA'>Tab A</a>
</li>
<li><a data-toggle='tab' href='.TabB'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA1' class='tab-pane fade in active TabA'>
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='TabB1' class='tab-pane fade TabB'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='TabC1' class='tab-pane fade TabC'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA'>Tab A</a>
</li>
<li><a data-toggle='tab' href='.TabB'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA2' class='tab-pane fade in active TabA'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='TabB2' class='tab-pane fade TabB'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='TabC2' class='tab-pane fade TabC'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>
So if you click on any of the selector bar "buttons" the info tab for both changes correctly, but the selector of the one I didn't click won't change. Is there any way to solve this?


You need to change your href value and the tab in each class. Difficult to explain: check my solution
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA1'>Tab A</a> <!--CHANGE HREF-->
</li>
<li><a data-toggle='tab' href='.TabB1'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC1'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA1' class='tab-pane fade in active TabA1'> <!--PUT SAME VALUE AS IN HREF-->
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='TabB1' class='tab-pane fade TabB1'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='TabC1' class='tab-pane fade TabC1'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA2'>Tab A</a>
</li>
<li><a data-toggle='tab' href='.TabB2'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC2'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA2' class='tab-pane fade in active TabA2'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='TabB2' class='tab-pane fade TabB2'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='TabC2' class='tab-pane fade TabC2'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>

Related

How do I make the ul responsive with boostrap5 inside the div?

Hello I'm trying to make my code responsive I'm making a solitaire game, and I need to make it responsive, this is my codefor the HTML:
<body>
<div id="tablero" class="container mt-3">
<div class="row">
<ul class="contenedorColumnas list-group list-group-horizontal">
<li class="contenedorCartas1 list-group-item">
<ul id="columna1" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas2 list-group-item">
<ul id="columna2" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas3 list-group-item">
<ul id="columna3" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas4 list-group-item">
<ul id="columna4" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas5 list-group-item">
<ul id="columna5" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas6 list-group-item">
<ul id="columna6" class="columDisplay list-group" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas7 list-group-item">
<ul id="columna7" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
</ul>
<div id="mazos" class="col-sm">
<div id="mazo_Entrada"></div>
<div id="almacen"></div>
<div id="almacen2"></div>
<div id="almacen3"></div>
<div id="almacen4"></div>
</div>
</div>
</div>
<script src="js/solitario.js"></script>
And for some reasson when I open the html nothing is responsive, and even worts everything looks messsy

Did you import bootstrap css into your html?
try to add this in your header
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

Dropdown not showing up using Materialize

I have materialize.min.css included already and everything else on the page is working.
But when I try the dropdown nothing seems to happen. Any help would be appreciated.
The dropdown I am trying to show is dropdown1. First li in nav-content. I tried as you can see to put the dropdown below origin but it did not help.
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav class="nav-extended">
<div class="nav-wrapper">
ASite
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
<li><a class="waves-effect waves-light btn">Register</a></li>
<li><a class="waves-effect waves-light btn">Login</a></li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab"><a class='dropdown-button' href='#' data-activates='dropdown1' data-beloworigin='true'>Drop Me!</a></li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab">Disabled Tab</li>
<li class="tab">Test 4</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>

You must need to include .js file also before ending tag of body. Copy following tag and place it before end tag of body.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Logo and Navbar links on same line

I'm trying to get the logo and the nav bar links on the same line. The logo will appear by itself when it resizes to mobile.
This is the current:
Currently on two lines.
This is the html behind it:
<!-- header Area Start-->
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-12">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-10 text-right col-md-9 col-12">
<div class="responsive_menu"></div>
<div class="mainmenu-area">
<ul id="nav">
<li>Home <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Rocket Home </li>
<li>Gradient Home </li>
</ul>
</li>
<li>Domain</li>
<li>Hosting <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Hosting </li>
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
</ul>
</li>
<li>Pages <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
<li>Service</li>
<li>Blog Details</li>
<li>404 Page</li>
<li>Coming Soon</li>
</ul>
</li>
<li>Blog</li>
<li>Support</li>
</ul>
</div>
<div class="search">
<span class="search-trigger"><i class="fa fa-search"></i></span>
<div class="search-box">
<form action="#">
<input type="text" name="s" placeholder="Search..">
<div class="submit-btn">
<input type="submit" value="Go">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- header Area end-->
Any suggestions on what I can do to make them all on one line?

Maximum size of the column in bootstrap is 12. Bootstrap adds padding and margin by default, so try using col-lg-8 and see what happens.
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-8 text-right col-md-9">
<div class="responsive_menu"></div>
<div class="mainmenu-area">

section id & class definition overwrites container height

Good morning folks, this is only my 2nd question on here, so please bear with me and my minimums:
I just wrote up this lengthy message of how I put the ID and class commands in a section instead of a container, and why the section all the sudden overwrote my css height style. I then figured why not replace the # with a . in the CSS file, and voila, it worked again.
However, i know have a new problem. I have a fixed-top bootstrap navigation bar, and when i click on section #2, named Intro, the page scrolls down only a few pixels to display the first line of text. What i had intended was for the site to display the entire intro container. Any suggestions?
I hope this makes sense:
<body id="page-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container" id="navigation">
<div class="row">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#intro">Intro</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Welcome to TestZat</h1>
Lorem....
</div>
</div>
</div>
</section>
<section id="login" class="login-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Finde das Login script hier</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container" id="contact-section">
<div class="row">
<div class="col-md-10 col-md-push-1" id="contact">
Section content TBD
</div>
</div>
</div>
</section>

Now it will work fine...just remove id from container.
<body id="page-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div id="navigation">
<div class="row">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#intro">Intro</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Welcome to TestZat</h1>
Lorem....
</div>
</div>
</div>
</section>
<section id="login" class="login-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-push-1">
<h1>Finde das Login script hier</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container" id="contact-section">
<div class="row">
<div class="col-md-10 col-md-push-1" id="contact">
Section content TBD
</div>
</div>
</div>
</section>

how can create mega menu in responsive design with bootstrap like an example

I want to design a menu like [www.digikala.com/] but in responsive design or with bootstrap . I can't find any example or template . can you show me some template to design a menu like "digikal" menu. and what's name of this menu.

Extend your bootstrap with Yamm3 megamenu
Here is link to widget
http://geedmo.github.io/yamm3/
And use it like this
<nav class="navbar yamm navbar-default " role="navigation">
...
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
...
</li>
</ul>
</li>
</ul>
...
</nav>
Here is working fiddle
http://jsfiddle.net/DTcHh/1698/

Try this link:
This provides full and full responsive templates
https://wrapbootstrap.com/

I designed my mega menu without hire someone. you can see it here mega menu in three levels
<div class="jumbotron">
<div class="container-fluid">
<!-- Grid demo navbar -->
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid"
class="navbar-toggle">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
buy100
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav" >
<li class="dropdown yamm-fw">
main menu<b class="caret"></b>
<ul class=" navbar-nav dropdown-menu" >
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">
menu1<b class="caret"></b>
<ul class="dropdown-menu" >
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--With Offsets
-->
<li class="dropdown yamm-fw">
menu2<b class="caret"></b>
<ul class="dropdown-menu" >
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--Aside Menu
-->
<li class="dropdown yamm-fw">
menu3<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--Nesting Menu
-->
<li class="dropdown yamm-fw">
menu4<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
<li class="dropdown yamm-fw"> lk,,,,</li>
</ul>
</div>
</div>
</div>
</div>