Newbe Dev Stack

Answer : You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it's child elements stack vertically. <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <div class="container"> <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></a></h1> <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse"> <ul class="...

Answer : Bootstrap 4 has many different ways to align navbar items. float-right won't work because the navbar is now flexbox . You can use mr-auto for auto right margin on the 1st (left) navbar-nav . Alternatively , ml-auto could be used on the 2nd (right) navbar-nav , or if you just have a single navbar-nav . <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <sp...

Answer : Solution Use nested flex containers. Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align . Avoid absolute positioning. Just stick with flexbox all the way through. Apply display: flex to the flex item ( .item ), making it a flex container. This automatically sets align-items: stretch , which tells the child ( .item-inner ) to expand the full height of the parent. Important: Remove specified heights from flex items for this method to work. If a child has a height specified (e.g. height: 100% ), then it will ignore the align-items: stretch coming from the parent. For the stretch default to work, the child's height must compute to auto (full explanation). Try this (no changes to HTML): .container { display: flex; flex-direction: column; height: 20em; border: 5px solid black } .item { display: flex; /* new; nested flex container */ flex: 1; border-bottom: 1px solid white; ...