# Bootstrap 4
## Containers
```html
...
```
## Responsive breakpoints
```scss
// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }
```
We occasionally use media queries that go in the other direction (the given screen size or smaller):
```scss
// Extra small devices (portrait phones, less than 34em)
@media (max-width: 33.9em) { ... }
// Small devices (landscape phones, less than 48em)
@media (max-width: 47.9em) { ... }
// Medium devices (tablets, less than 62em)
@media (max-width: 61.9em) { ... }
// Large devices (desktops, less than 75em)
@media (max-width: 74.9em) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
```
## Display Heading
```html
Display 1
Display 2
Display 3
Display 4
```
## Responsive images
```html
```
## Image shapes
```html
```
## Aligning images
```html
```
OR
```html
```
## Table
```css
// table container
.table-responsive
// table
.table
.table-inverse
.table-striped
.table-bordered
.table-hover
.table-sm
.table-reflow
// thead
.thead-inverse
.thead-default
```
## Contextual classes
```html
...
...
...
...
...
| ... |
... |
... |
... |
... |
```