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 : Use the Bootstrap 4 h-100 class for height:100%; <div class="container-fluid h-100"> <div class="row justify-content-center h-100"> <div class="col-4 hidden-md-down" id="yellow"> XXXX </div> <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8"> Form Goes Here </div> </div> </div> https://www.codeply.com/go/zxd6oN1yWp You'll also need ensure any parent(s) are also 100% height (or have a defined height)... html,body { height: 100%; } Note: 100% height is not the same as "remaining" height. Related: Bootstrap 4: How to make the row stretch remaining height? Use bootstrap class vh-100 for exp: <div class="vh-100"> I have tried over a half-dozen solutions suggested on Stack Overflow, and the only thing that worked for me was this: <div class="row" style="display: flex; flex-w...

Answer : In bootstrap 4.1 you can use: .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: red !important; } .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: red !important; } .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before { border-left-color: red !important; } .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before { border-right-color: red !important; } The selector you are looking for is .tooltip.bs-tether-element-attached-left .tooltip-inner::before : .tooltip.bs-tether-element-attached-left .tooltip-inner::before { border-right-color: red; } If you want every tooltip arrow red - jsfiddle: .tooltip.bs-tether-element-attached-bottom .tooltip-inner::before { border-top-color: red; } .tooltip.bs-tether-element-attached-top .tooltip-inner::before { border-bottom-color: ...

Answer : With Bootstrap 4 .hidden-* classes were completely removed (yes, they were replaced by hidden-*-* but those classes are also gone from v4 alphas). Starting with v4-beta, you can combine .d-*-none and .d-*-block classes to achieve the same result. visible-* was removed as well; instead of using explicit .visible-* classes, make the element visible by not hiding it (again, use combinations of .d-none .d-md-block). Here is the working example: <div class="col d-none d-sm-block"> <span class="vcard"> … </span> </div> <div class="col d-none d-xl-block"> <div class="d-none d-md-block"> … </div> <div class="d-none d-sm-block"> … </div> </div> class="hidden-xs" becomes class="d-none d-sm-block" (or d-none d-sm-inline-block ) ... <span class="d-none d-sm-inline...

Answer : Updated 2018 If you want a responsive card-deck , use the visibility utils to force a wrap every X columns on different viewport width(breakpoints)... Bootstrap 4 responsive card-deck (v 4.1 ) Original answer for Bootstrap 4 alpha 2: You can use the grid col-*-* to get the different widths (instead of card-deck) and then set equal height to the cols using flexbox. .row > div[class*='col-'] { display: flex; flex:1 0 auto; } http://codeply.com/go/O0KdSG2YX2 (alpha 2) The problem is that w/o flexbox enabled the card-deck uses table-cell where it becomes very hard to control the width. As of Bootstrap 4 Alpha 6, flexbox is default so the additional CSS is not required for flexbox, and the h-100 class can be used to make the cards full height : http://www.codeply.com/go/gnOzxd4Spk Related question: Bootstrap 4 - Responsive cards in card-columns Here's a solution with Sass to configure the number of cards per line depending on break...

Answer : You need to use the various Bootstrap 4 centering methods... Use text-center for inline elements. Use justify-content-center for flexbox elements (ie; form-inline ) https://codeply.com/go/Am5LvvjTxC Also, to offset the column, the col-sm-* must be contained within a .row , and the .row must be in a container... <section id="cover"> <div id="cover-caption"> <div id="container" class="container"> <div class="row"> <div class="col-sm-10 offset-sm-1 text-center"> <h1 class="display-3">Welcome to Bootstrap 4</h1> <div class="info-form"> <form action="" class="form-inline justify-content-center"> <div class="form-group"> <label class=...

Answer : Yes, it's possible but you have to position the 2nd one accordingly. The height of the Navbar is ~56px. .fixed-top-2 { margin-top: 56px; } body { padding-top: 105px; } <nav class="navbar navbar-toggleable-sm bg-faded navbar-light fixed-top fixed-top-2"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1"> <span class="navbar-toggler-icon"></span> </button> <a href="/" class="navbar-brand">One</a> <div class="navbar-collapse collapse" id="navbar1"> <ul class="navbar-nav"> .. </ul> </div> </nav> <nav class="navbar navbar-toggleable-sm bg-inverse navbar-inverse fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="...