For Bootstrap 4, the breakpoints have changed. You should override the navbar CSS like this if you want it to be vertical on small screens: @media(max-width: 544px) { .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem; } .navbar .navbar-nav { float:none !important; } .navbar .collapse.in, .navbar .collapsing { clear:both; } } Demo http://codeply.com/go/Ar1H2G4JVH Note: The @media … Read more
Centering Navbar items is simpler in Bootstrap 4, and doesn’t require additional markup. <nav class=”navbar navbar-expand-md navbar-light bg-faded”> <ul class=”navbar-nav mx-auto”> <li class=”nav-item active text-center”> <a class=”nav-link” href=”#”>Home <span class=”sr-only”>(current)</span></a> </li> <li class=”nav-item text-center”> <a class=”nav-link” href=”#”>Features</a> </li> <li class=”nav-item text-center”> <a class=”nav-link” href=”#”>Pricing</a> </li> <li class=”nav-item dropdown text-center”> <a class=”nav-link dropdown-toggle” href=”http://example.com” id=”navbarDropdownMenuLink” data-toggle=”dropdown” … Read more
In the stable Bootstrap 4.0.0 release, this is done using the sticky-top class… Demo <div class=”container”> <nav class=”navbar navbar-light bg-light navbar-expand”> <a class=”navbar-brand” href=”#”>Header</a> … </nav> <div class=”row”> <div class=”col-8 content”> Content </div> <div class=”col-4″> <div class=”sticky-top”> <h4>Sticky menu</h4> … </div> </div> </div> <div class=”footer”> … </div> </div> This works even in the height of … 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
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
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
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
This happens because of the way adjacent flexbox items position relative to each other. One option is to use the flexbox utils, and a full width placeholder element on right. The navbar-brand is also set to full-width using w-100 util class. <nav class=”navbar navbar-toggleable navbar-inverse bg-primary justify-content-center”> <button class=”navbar-toggler navbar-toggler-right” type=”button” data-toggle=”collapse” data-target=”#navbarCenter”> <span class=”navbar-toggler-icon”></span> … 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