"bootstrap 4 layout"
Bootstrap 4.1.1 Snippet by tapan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"><head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700|Roboto:300,400,500,700&display=swap" rel="stylesheet"> <!--<link rel="stylesheet" href="./css/bootstrap.min.css"> --> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <link rel="stylesheet" href="./css/font-awesome.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col"> <div class="alert alert-success" role="alert"> 1/1 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> </div> <div class="row"> <div class="col"> <div class="alert alert-success" role="alert"> 1/2 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 2/2 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> </div> <div class="row"> <div class="col"> <div class="alert alert-success" role="alert"> 1/3 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 2/3 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 3/3 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> </div> <div class="row"> <div class="col"> <div class="alert alert-success" role="alert"> 1/4 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 2/4 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 3/4 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 4/4 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> </div> <div class="row"> <div class="col"> <div class="alert alert-success" role="alert"> 1/5 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 2/5 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 3/5 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 4/5 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 5/5 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> </div> <div class="row"> <div class="col"> <div class="alert alert-success" role="alert"> 1/7 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 2/7 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 3/7 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 4/7 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 5/7 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 6/7 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 7/7 A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div> </div> </div> <div class="row"> <div class="col"> <div class="alert alert-success" role="alert"> 8/8 A simple success alert with </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 8/8 A simple success alert with </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 8/8 A simple success alert with </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 8/8 A simple success alert with </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 8/8 A simple success alert with </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 8/8 A simple success alert with </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 8/8 A simple success alert with </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 8/8 A simple success alert with </div> </div> </div> <div class="row"> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> <div class="col"> <div class="alert alert-success" role="alert"> 12/12 </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- <script src="./js/jquery.min.js"></script> <script src="./js/popper.min.js"></script> <script src="./js/bootstrap.min.js"></script> <script src="./js/custom.js"></script> --> </body> </html>
// Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 767.98px) { ... } // Medium devices (tablets, less than 992px) @media (max-width: 991.98px) { ... } // Large devices (desktops, less than 1200px) @media (max-width: 1199.98px) { ... } // Extra large devices (large desktops) // No media query since the extra-large breakpoint has no upper bound on its width // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, 576px and up) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

Related: See More


Questions / Comments: