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
<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>
- 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:
- example
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