Twitter Bootstrap: Align Nav-Tabs to Bottom of Div

Twitter Bootstrap: Align nav-tabs to bottom of div

You have to give the parent element a specific height. I would recommend doing this by adding an extra class, e.g. extraClass, to your <div class="col-md-8"> like this:

<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="img/logo.png" >
</div>

<div class="col-md-8 extraClass">
<ul class="nav nav-tabs">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home" style="color:#6d92a2"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-check" style="color:#6d92a2"></span> Missie en Visie</a></li>
<li><a href="#"><span class="glyphicon glyphicon-calendar" style="color:#6d92a2"></span> Activiteiten</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user" style="color:#6d92a2"></span> Lidmaatschap</a></li>
<li><a href="#"><span class="glyphicon glyphicon-play-circle" style="color:#6d92a2"></span> Videozone</a></li>
<li><a href="#"><span class="glyphicon glyphicon-map-marker" style="color:#6d92a2"></span> Contact</a></li>
</ul>

</div> <!-- nav tabs -->

</div> <!-- row -->

And the use this CSS:

.extraClass {
height: 122px;
position: relative;
}

.extraClass ul {
position: absolute;
bottom: 0;
}

bootstrap align form/selects with nav tabs

Just use float-xs-right..

                <li class="nav-item float-xs-right">
<div class="form-inline">
<select class="form-control form-control-sm">
<option>Option 1</option>
</select>
<select class="form-control form-control-sm">
<option>Option 2</option>
</select>
</div>
</li>

http://www.codeply.com/go/juUSEhgnKQ

Also, note that float-xs-right has changed to float-right in the latest Alpha 6.

Bootstrap nav tabs at bottom of web page do not stay at bottom for small resolution screens

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>

Twitter Bootstrap Tabs Upside Down

Use the following CSS to get what you expected. I added border to .tab-content class to get the content highlighted.

.tab-content {
padding:10px;
border:1px solid #ddd;
border-bottom:0px;
}
.nav-tabs {
border-bottom: 0px;
border-top: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom:0;
margin-top:-1px;
}

.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid transparent;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-top-color: transparent;
}

The HTML structure should be like this:

<div class="tabbable">
<div class="tab-content">
<div id="tab1" class="tab-pane active">
tab1 content</div>
<div id="tab2" class="tab-pane">
tab2 content</div>
<div id="tab3" class="tab-pane">
tab3 content</div>
<div id="tab4" class="tab-pane">
tab4 content</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
<li><a href="#tab2" data-toggle="tab">tab2</a></li>
<li><a href="#tab3" data-toggle="tab">tab3</a></li>
<li><a href="#tab4" data-toggle="tab">tab4</a></li>
</ul>
</div>

Bootply example.

Bootstrap align tab-content accordingly

You could use keyword row at your form-groups, and it will fit in border, you can read more about grids on bootstrap. Append a class row to every form-group of content like this:

<div class="row form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Assword</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>

Example:

.nav-tabs > li {    float:none;    display:inline-block;    zoom:1;}
.nav-tabs { text-align:center;}.nav-tabs { border-bottom: none;}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {border-bottom:5px solid green;}
.halter{margin:5px;padding:5px;border:1px solid gray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container-fluid"> <div class="row"> <div class="col-xs-12">

<div class="halter"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div>

<div>
<!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"><li><a id="hideshow" href="#" role="tab" data-toggle="tab">hide/show</a></li> <li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Default</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Placeholder</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Required</a></li> </ul>
<!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <div class="form-group row"> <label for="inputPassword3" class="col-sm-2 control-label">Assword</label> <div class="col-sm-10"> <input type="password" class="form-control" placeholder="Password"> </div> </div> </div>
<div role="tabpanel" class="tab-pane" id="profile"> <div class="form-group row"> <label for="inputPassword3" class="col-sm-2 control-label">Bassword</label> <div class="col-sm-10"> <input type="password" class="form-control" placeholder="Password"> </div> </div> </div>
<div role="tabpanel" class="tab-pane" id="messages"> <div class="form-group row"> <label for="inputPassword3" class="col-sm-2 control-label">Cassword</label> <div class="col-sm-10"> <input type="password" class="form-control" placeholder="Password"> </div></div> </div> </div> </div>
</div> </div> <div class="col-xs-8"> <form class="form-horizontal"> <div id="l2">
</div> </form> </div> </div></div>

How to align Bootstrap 4 navbar items to bottom

Add align-items-end to the navbar-nav to align the items to the bottom...

<ul class="navbar-nav align-items-end ml-auto">
<li class="nav-item" >
</li>
</ul>

And, remove the custom line-height...

.navbar-nav > li > a 
{
padding: 0;
margin: 0;
background: red;
vertical-align: bottom;
}

Update on Codeply: https://www.codeply.com/go/usR58ejrtg



Related Topics



Leave a reply



Submit