I’m not sure if you simply want a layout with 1 fixed side, or for the side to be fixed until it reaches the footer (like Trulia). Here’s a simple layout with fixed left side (Split 50 50). body, html { height: 100%; } #left { position: fixed; top: 0; bottom: 0; } To make … Read more
Use the new Bootstrap 4 spacing utilities. For example mb-3 adds margin-bottom of 1rem. No extra CSS is needed. http://www.codeply.com/go/ECnbgvs9Ez <div class=”container”> <div class=”row”> <div class=”col-md-4 mb-3″> col 1 </div> <div class=”col-md-4 mb-3″> col 2 </div> <div class=”col-md-4 mb-3″> col 3 </div> <div class=”col-md-4 mb-3″> col 4 </div> <div class=”col-md-4 mb-3″> col 5 </div> <div … Read more
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=”https://stackoverflow.com/” class=”navbar-brand”>One</a> <div class=”navbar-collapse collapse” id=”navbar1″> <ul class=”navbar-nav”> .. … Read more
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 … Read more
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 … Read more
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 … Read more
You can use the flex-xs-middle class like this.. Bootstrap 4 Alpha 5 <div class=”container-fluid”> <div class=”row”> <div class=”col-xs-6″> <div class=”circle-medium backgrounds”></div> </div> <div class=”col-xs-6 flex-xs-middle”> <div class=”name”>Supplier</div> </div> </div> <div class=”row”> <div class=”col-xs-6″> <div class=”circle-medium backgrounds”></div> </div> <div class=”col-xs-6 flex-xs-middle”> <div class=”name”>Supplier</div> </div> </div> </div> http://www.codeply.com/go/PNNaNCB4T5 (Using the Bootstrap 4 flexbox enabled CSS) Bootstrap 4 … Read more
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 … Read more
col-xs-* have been dropped in Bootstrap 4 in favor of col-*. Replace col-xs-12 with col-12 and it will work as expected. Also note col-xs-offset-{n} were replaced by offset-{n} in v4.