This is an old revision of the document!
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="col-md-4 col-sm-6"> <p style="margin-bottom:30px;">Text</p> <div class="row"> <div class="col-sm" align="center"> <a class="btn btn-secondary rounded-pill" style="width:150px;margin-bottom:20px;" href="#" role="button">Login</a> </div> <div class="col-sm" align="center"> <a class="btn btn-danger rounded-pill" style="width:150px" href="#" role="button">Sign Up</a> </div> </div> </div> <div class="col-md-8 col-sm-6 text-left"> <img src="img/bg_home.png" style="margin-bottom:20px;margin-top:20px; width:100%;" /> </div>