Added css-breakpoints.html

Abishek05 · Oct 27, 2019 · baad561 · baad561
1 parent 133460e
commit baad561
Showing 1 changed file with 83 additions and 0 deletions.
diff --git a/css-breakpoints.html b/css-breakpoints.html
@@ -0,0 +1,83 @@
+<!-- Bootstrap 4 starter template -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+    <title>Css Breakpoints</title>
+    <style>
+      /* Small devices (landscape phones) */
+      @media (min-width: 576px) {
+            body {
+                background: red;
+            }
+        }
+
+      /* Medium devices (tablets) */
+
+        @media (min-width: 768px) {
+            body {
+                background: blue
+            }
+        }
+
+       /* Large devices (desktops) */
+
+      @media (min-width: 992px) {
+          body {
+              background: green;
+          }
+      }
+
+      /* Extra large devices (large desktops) */
+
+        @media (min-width: 1200px) {
+            body {
+                background: yellow;
+            }
+        }
+
+        /* The given screen size or smaller */
+
+        /* Extra small devices (portrait phones)*/
+
+        @media (max-width: 575px) {
+            body {
+                background: coral;
+            }
+        }
+
+        /* Small devices (landscape phones)*/
+
+        @media (max-width: 767px) {}
+
+        /* Medium devices (tablets)*/
+
+        @media (max-width: 991px) {}
+
+        /* Large devices (desktops)*/
+
+        @media (max-width: 1199px) {}
+    </style>
+  </head>
+  <body>
+    <div class="container">
+
+    </div>
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
+            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
+            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+  </body>
+</html>