1// Extra small devices (portrait phones, less than 576px)
2// No media query for `xs` since this is the default in Bootstrap
3
4// Small devices (landscape phones, 576px and up)
5@media (min-width: 576px) { ... }
6
7// Medium devices (tablets, 768px and up)
8@media (min-width: 768px) { ... }
9
10// Large devices (desktops, 992px and up)
11@media (min-width: 992px) { ... }
12
13// Extra large devices (large desktops, 1200px and up)
14@media (min-width: 1200px) { ... }
1Containers
2Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
3While containers can be nested, most layouts do not require a nested container.
4
5Syntax:
6<div class="container">
7 <!-- Content here -->
8</div>
1// Extra small devices (portrait phones, less than 576px)
2// No media query since this is the default in Bootstrap
3
4// Small devices (landscape phones, 576px and up)
5@media (min-width: 576px) { ... }
6
7// Medium devices (tablets, 768px and up)
8@media (min-width: 768px) { ... }
9
10// Large devices (desktops, 992px and up)
11@media (min-width: 992px) { ... }
12
13// Extra large devices (large desktops, 1200px and up)
14@media (min-width: 1200px) { ... }
1Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.
2
3<div class="container">
4 <!-- Content here -->
5</div>