I am trying to use Boostrap nav tabs positioned at bottom of html page and content at the top see code. I want the tabs to stay at the same level as the footer. Which I am not able to get right, they seem to appear just above the footer. Also the tabs keep moving up and down depending on the monitor resolution. I want this work on laptop and desktop screens. HTML markup is as below
https://jsfiddle.net/iranew/1945yof2/
Can anyone please help me achieve this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
</style>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
position: absolute;
box-shadow: 1px 1px 5px #bbb;
z-index: 0;
}
.first{
z-index: 1;
}
ul{
position: absolute;
bottom: 0;
}
li{
position: relative;
list-style: none;
float: left;
padding: 24px 0px;
}
a{
padding: 24px 50px;
font-family: sans-serif;
text-decoration: none;
color: #222;
background-color: #ddd;
border: solid 1px #bbb;
}
.nav-tabs>li>a {
border-bottom-left-radius: 4px;
border-bottom-right-radius:44px;
border-top-left-radius:0;
border-left-top-radius:0
}
.nav>li>a {
padding: 10px 35px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover
{
border: 1px solid #ddd;
border-top-color: transparent;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
</style>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<div class="tab-content" style="width:100%;height:80vh; border:1px solid black">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div>
<ul class="nav nav-tabs nav-tabs-bottom sticky-footer " style="float:left">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<footer class="sticky-footer bg-white" id="footer">
<div class="container my-auto" style="max-width:100%; ">
<div class="copyright text-left font-weight-bold" style="float:right;">
<span class="float-right" style="padding-right:50px">@footer</span>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>Here is the code. Hope it will help you. If any changes then let me know.
https://jsfiddle.net/5y2j09kx/5/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
box-shadow: 1px 1px 5px #bbb;
z-index: 0;
}
.first {
z-index: 1;
}
ul li {
display: inline-block;
}
li {
position: relative;
list-style: none;
}
a {
padding: 24px 50px;
font-family: sans-serif;
text-decoration: none;
color: #222;
background-color: #ddd;
border: solid 1px #bbb;
}
.nav-tabs>li>a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 44px;
border-top-left-radius: 0;
border-left-top-radius: 0
}
.nav>li>a {
padding: 10px 35px;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
border: 1px solid #ddd;
border-top-color: transparent;
}
.tab-wrap {
border: 1px solid black
}
#footer {
/* position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; */
}
.footer-navbar {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<div class="tab-wrap">
<div class="tab-content" style="width:100%;height:80vh;">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class="footer-navbar">
<ul class="nav nav-tabs nav-tabs-bottom sticky-footer">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<footer class="sticky-footer bg-white" id="footer">
<div class="container my-auto" style="max-width:100%; ">
<div class="copyright text-left font-weight-bold" style="float:right;">
<span class="float-right" style="padding-right:50px">@footer</span>
</div>
</div>
</footer>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>