Differences

This shows you the differences between two versions of the page.

--- devwiki:bootstrap [2021/06/10 17:08] – created ying
+++ devwiki:bootstrap [2021/07/11 19:40] (current) – ying
@@ Line 2: / Line 2: @@
   * responsive column ration, defined from small screen to large:
-    * xs (phones), sm (tablets), md (desktops), and lg (larger desktops) <code>
+    * xs (phones), sm (tablets), md (desktops), and lg (larger desktops)
-<div class="col-md-4 col-sm-6">
+    * example of Left Text Right Image layout<code html>
-    <p style="margin-bottom:30px;">Text</p>
+<div class="container">
     <div class="row">
-        <div class="col-sm" align="center">
+        <div class="col-sm-12 col-md-12 col-lg-4 ">
-          <a class="btn btn-secondary rounded-pill" style="width:150px;margin-bottom:20px;" href="#" role="button">Login</a>
+            <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" align="center">
+        <div class="col-sm-12 col-md-12 col-lg-8 text-left d-flex flex-wrap align-items-center">
-          <a class="btn btn-danger rounded-pill" style="width:150px" href="#" role="button">Sign Up</a>
+            <img src="img/bg_home.png" style="margin-bottom:20px;margin-top:20px; width:100%;" />
         </div>
-    </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>
 </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>