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
Why Does CSS Not Support Negative Padding
Svg Lineargradient Hidden If Svg Is Hidden in Seperate Class
Difference Between "Visibility:Collapse" and "Display:None"
404 Page Not Found - Go Rendering CSS File
Use Multiple @Font-Face Rules in CSS
Which Dom Elements Can Be Child of Tr
Method to Convert HTML5 Canvas to Svg
How to Tell Browsers to Honor The Jpeg Exif Orientation
Add Border to Div Increase Div Width
Apache Giving 403 Forbidden Errors
Bootstrap Navbar Link Color Won't Change
How to Use Access-Control-Allow-Origin? Does It Just Go in Between The HTML Head Tags
Word Wrapping for Button with Specified Width in IE7
Linethrough/Strikethrough a Whole HTML Table Row
HTML5 I Tag Validity with Icons