It’s happening because col-* must be placed directly inside row. Read the Bootstrap docs.. “Content should be placed within columns, and only columns may be immediate children of rows.” This is especially important in Bootstrap 4 because the columns will simply stack/wrap vertically if not placed directly inside a .row. Also read: How the Bootstrap … 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.
Well that all depends… Are you creating a project for someone who’s paying you that you need to be sure it works. – Use stable. Are you simply experimenting and tinkering with code and not afraid to make small/big changes later and know Bootstrap already? Use alpha. If your completely new to Bootstrap and never … Read more