Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Responsive Layout ====== * responsive column ration, defined from small screen to large: * xs (phones), sm (tablets), md (desktops), and lg (larger desktops) * example of Left Text Right Image layout<code html> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-4 "> <p style="margin-bottom:30px;">Text</p> <div class="row"> <div class="col-6" align="center"> <a class="btn btn-secondary rounded-pill" style="width:150px;margin-bottom:20px;" href="#" role="button">Login</a> </div> <div class="col-6" align="center"> <a class="btn btn-danger rounded-pill" style="width:150px" href="#" role="button">Signup</a> </div> </div> </div> <div class="col-sm-12 col-md-12 col-lg-8 text-left d-flex flex-wrap align-items-center"> <img src="img/bg_home.png" style="margin-bottom:20px;margin-top:20px; width:100%;" /> </div> </div> </div> </code> * notes: * col-12 means each column will stack on each other until large screen, then will do 4 to 8 ratio layout * d-flex flex-wrap align-items-center: make its content vertically align * align="center": make its content horizontal align * col-6: always make 2 item side by side in their parent container * display on certain screen size: * ref: https://getbootstrap.com/docs/4.0/utilities/display/ * https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp * example <code> new one use .d-sm-none .d-md-block that is old code .hidden - force hidden .invisible - force invisible - 768px - 992px - 1200px - .hidden-md .hidden-lg - for hidden in large screen .hidden-sm .hidden-xs - for hidden in small screen </code> devwiki/bootstrap.txt Last modified: 2021/07/11 19:40by ying