devwiki:bootstrap

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
  • devwiki/bootstrap.txt
  • Last modified: 2021/07/11 19:40
  • by ying