bootstrap breakpoints
// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
bootstrap breakpoints
// Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
bootstrap grid
<!----------------------- BOOTSTRAP GRID SYSTEM ------------------------> This code will create 4 boxes placed side by side, which will be dynamically positioned, according to the size of the screen. We define the following behavior: <!-- Desktop Display: we have 4 columns per row (each occupies 3 units out of 12) --> class = "col-lg-3" <!-- display large with 12/3 = 4 columns --> <!-- Tablet Display: we have 3 columns per row (each occupies 4 units out of 12) --> class = "col-md-4" <!-- display medium with 12/4 = 3 columns --> <!-- Mobile Display: we have 2 columns per row (each occupies the 6 units of 12) --> class = "col-sm-6" <!-- display small with 12/6 = 2 columns --> <!-- CODE --> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red; border:1px solid black;"> One of four columns </div> <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border:1px solid black;"> One of four columns </div> <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green; border:1px solid black;"> One of four columns </div> <div class="col-lg-3 col-md-4 col-sm-6" style="border:1px solid black;"> One of four columns </div> </div>
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
