I have a bootstrap tabs, and some of them have very long text, and it creates ugly space between tabs and content. How can I set the other tabs to have the same size as the biggest one?
<div class="tabs">
<ul class="nav nav-tabs nav-justified">
<li>
<a href="#" class="text-center">
<i class="fa fa-wifi"/> Not that long</a>
</li>
<li>
<a href="#" class="text-center">
<i class="fa fa-map-marker"/> Something really really really long</a>
</li>
<li>
<a href="#" class="text-center">
<i class="fa fa-map-marker"/> Not that long</a>
</li>
<li class="active">
<a href="#" class="text-center">
<i class="fa fa-star"/> Not that long</a>
</li>
</ul>
<div class="tab-content"></div>
</div>
Found a solution!
<style>
.nav-tabs{
display: flex;
}
.nav-tabs li {
display: flex;
flex: 1;
}
.nav-tabs li a {
flex: 1;
}
</style>
You can either make them all taller or you can shorten the name of the tab that's too long. Tab names shouldn't really be very long anyways.
If you can't use flexbox (which is not supported by older browsers), your only choice is to set all the tabs as tall as the tallest one explicitly with a pixel height. Flexbox is a great and sadly not yet fully usable solution to this kind of problem. Without it, there's no flexible way to accomplish this.
Related
The problem is the drop-down behavior (here's the codepen to the problematic html, the original layout was taken from here).
<header class="pb-3">
<nav class="navbar navbar-expand-md navbar-light bg-white border-bottom">
<div class="d-flex w-100 navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li>
<div style="width: 100px; height: 100px">
<a href="#">
<img src="../static/store_logo.png" alt="logo" />
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-none d-md-block fw500" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Product categories
</a>
<ul class="dropdown-menu rounded-0 border-0">
<a href="#">
<li>Foo</li>
</a>
<a href="#">
<li>Bar</li>
</a>
<a href="#">
<li>Baz</li>
</a>
</ul>
</li>
</ul>
</div>
</nav>
</header>
In the original source the problem is hidden by the fact that a logo image/placeholder inside the nav > .navbar ul is tiny. When I used a larger image, it becomes manifest (I used a div with fixed 100 by 100 px to mimic it in the pen).
The problem is the behavior of a drop-down in the same nav. The list of items in .dropdown-menu (ul) doesn't attach to the bottom of the .dropdown-toggle element - instead it's attached to the bottom of the .navbar-nav ul. Which, naturally, is affected by the size of the li containing the image/placeholder.
Being a css noob, I don't know what is the real cause of the problem. Is it a conflict
beyween some of the bootstrap classes? I even tried adding a z-index to the .dropdown-menu ul, to no avail. Basic dropdown example in the Bootstrap docs doesn't seem to require any additional tweaks - but there's no navs/navbars involved in there (not to mention a dozen other parent elements).
Thank you all for your time!
Please add this custom css and check agian.
body .navbar-expand-md .navbar-nav .dropdown-menu {
top: 30px !important;
}
less hacky solution would be:
.navbar-expand-md .navbar-nav .dropdown-menu {
position: static;
}
====== UPDATE ============
well this solution has an issue of it's own - the entire content of the .navbar is shifting because of the 'static' dropdown menu; the accepted answer doesn't have that problem. CSS dark magic =)
base on my question, Basically I want to make my webpage like below:
The red box means that the div that can scrollable and the div size is according to the content size. Meanwhile, The main background (that man)and the navbar is fixed and no scrollable.
Below is my current code:
<body id="header">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: black;">
<a class="navbar-brand" style = "font-weight: 600; font-family: Arial, Helvetica, sans-serif;" href="#">Dr. Lim Wee Chai</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" style = "font-weight: 600; font-family: Arial;" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Philosophies & Values</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Lifestyle</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Top Glove</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Future Vision</a>
</li>
<li class="nav-item">
<a class="nav-link" style = "font-weight: 500;" href="#">Videos</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
Can anyone help me to solve this?
In CSS3, the flex properties can be usefull to achieve this. Bootstrap 4 makes great use of this in the flex utility classes. To assemble this setup, the simplest form I've found so far:
<div class="container d-flex h-100">
<div class="my-component d-flex mx-auto align-self-center flex-column">
<!-- some scrollable content -->
</div>
</div>
This is demonstrated in this fiddle.
To explain all these classes let's break it down:
Make sure html, body have height: 100%;. This is required to generate a full height body. In turn the browser can now use this height to vertically center content
.container or .container-fluid with .d-flex and .h-100 will make use of this body height to also stretch over the height of the screen.
.my-component now has a height: 50vh and width: 50vw; which is viewport height and -width and makes this component responsive. Also overflow-y: auto; to make it scrollable. Feel free to adjust this to your liking with media queries and so on.
It has also .d-flex to enable .mx-auto (horizontal center), .align-self-center (vertical center) and .flex-column to align the content properly
None of these utility classes can be omitted as they all work together.
Hopefully this is like you requested as the content of your "wrapper" isn't clear from the question.
This is similar to other questions posted, but a bit more specific.
My goal is to create a split navbar using CSS (pure or using bootstrap), with login and signup buttons aligned to the right and other buttons to the left. On XL screens, I have the login and signup buttons change from inline-block to block display, which makes them take up two lines each. Each consists of a font awesome icon and text. With this simple change, I'm having a lot of trouble with vertically aligning the other buttons. The block buttons are centered vertically in the navbar, but the others are too high.
All flexbox-based solutions have had the side effect of removing the right-alignment of the login and signup buttons. This includes any bootstrap classes like d-flex, adding any align properties to the css file..
I could redesign the navbar to have the right-aligned items in a secondary navbar as in the solution here: bootstrap navbar floating left and right but I am pretty curious about solving / understanding this issue (and being able to implement this in the simplest way possible).
Here's how I have the html structure:
<div class="container-fluid">
<div class="row no-gutters flex-row">
<ul class="">
<li class=""> Map</li>
...
<li class="dropdown">
...
</li>
<li class="nav navbar-right " id="signup-btn">
<span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span>
</li>
<li class="nav navbar-right " id="login-btn">
<span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span>
</li>
</ul>
</div>
</div>
Custom CSS for these elements:
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: .9rem .9rem;
}
#login-btn{
float: right; !important;
}
#signup-btn {
float: right; !important;
}
#navbar li {
vertical-align: center;
}
What this looks like:
If I try some of the flex solutions posted eg, here Bootstrap NavBar with left, center or right aligned items, can't split the navbar any more:
use "text-right" class for container div - in bootstrap
If I correctly understood your task you can do like this:
Split nav into 2 blocks and move them with
.nav {
justify-content: space-between;
}
Set blocks' height equal 100% of the parent
Use 'align-items: center' inside of them
.nav__list, .nav__buttons {
height: 100%;
display: flex;
align-items: center;
}
I've created pen. I think it'll help you.
https://codepen.io/dimaaan21/pen/WNvbEvM
The other question does provide the guidance needed to achieve left and right Navbar items with text & icons.
Just use 2 navbar-nav's and justify-content-between...
<nav class="navbar navbar-dark navbar-expand justify-content-between">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item text-center">
<span class="fa fa-map"></span><span class="d-none d-sm-inline d-xl-block px-1">Map</span>
</li>
<li class="nav-item dropdown text-center">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-list"></span><span class="d-xl-block d-none"></span><span class="d-none d-sm-inline px-1">Dropdown</span> </a>
...
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item text-center" id="signup-btn">
<span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block px-1">Sign Up</span>
</li>
<li class="nav-item text-center" id="login-btn">
<span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block px-1">Log In</span>
</li>
</ul>
</div>
</nav>
https://codeply.com/go/kTGlK9Axdk/left-right
this is a bad way to solve the problem. It's better to use flexbox instead of float.
for example:
<div class="parent-box">
<div>
Map
...
</div>
<div>
<span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span>
<span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span>
</div>
</div>
.parent-box {
display: flex;
align-items: center;
justify-content: space-between;
}
I work with bootstrap 3+. i have this code for list inline with icon :
<ul class="list-inline">
<li>
<h2><i class="fa fa-book fa-2x"></i> test link</h2>
</li>
<li>
<h2><i class="fa fa-book fa-2x"></i> test link</h2>
</li>
</ul>
this worked but icon not in middle vertical align. how do fix this problem ?!
DEMO : FIDDLE
.fa {
vertical-align: middle;
}
demo - http://jsfiddle.net/z52bL7L6/1/
i am making a list of items with the <li> tag and different FontAwesome icon for each list item in twitter bootstrap. i tried to make the list test center vertically, but cant this way
<ul class="middle">
<li>
<a href="#">
<i class="icon-cog icon-2x"></i>
very long multiline item one</a>
</li>
<li>
<a href="#">
<i class="icon-pencil icon-2x"></i>
very long multiline item two
</a>
</li>
</ul>
which produced
this is what i want to achieve
How can i achieve this?
Is this what you are looking at
http://jsbin.com/iFaWoYa/1/
ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}
<ul class="middle">
<li>
<i class="icon-cog icon-2x"></i> very long multiline item one
</li>
<li>
<i class="icon-pencil icon-2x"></i> very long multiline item two
</li>
</ul>
You may set "position:relative" to <a> tag and "position:absolute" for <i>. Then add "padding-left: <size of your icon>" to <a> and "display: block" or "display: inline-block" because without "position" it would not work. And maybe "top: 0" and "left:0" to icon for right positioning;
Try using pull-left on the icon:
<li>
<a href="#">
<i class="icon-cog icon-2x pull-left"></i>
very long multiline item one</a>
</li>
Demo: http://bootply.com/86079