provides a responsive fixed width container

container-fluid

provides a full width container, spanning the entire width of the viewport

col-sm-4

col: 열(column)을 설정한다는 의미
sm: 작은 화면 이상(≥576px)에서 적용
4: 한 줄(row)을 12등분했을 때, 그 중 4칸을 차지한다는 뜻
col-sm-8
col: 열(column)을 설정한다는 의미
sm: 작은 화면 이상(≥576px)에서 적용
8: 한 줄(row)을 12등분했을 때, 그 중 8칸을 차지한다는 뜻
Container Example 2

||Extra small
<576px|Small
≥576px|Medium
≥768px|Large
≥992px|Extra Large
≥1200px|XXL
≥1400px| |-|-|-|-|-|-|-| |max-width|100%|540px|720px|960px|1140px|1320px|

Grid Example 1

row and col

```html !– 고정 된 크기 3개의 컬럼 –>

3 Columns

Lorem ipsum dolor sit amet.

Column 1

Column 2

Column 3

### [Grid](https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php)
<table class="table grid">
<tbody><tr>
  <td>span 1</td>
  <td>span 1</td>  
  <td>span 1</td>
  <td>span 1</td>
  <td>span 1</td>  
  <td>span 1</td>
  <td>span 1</td>
  <td>span 1</td>  
  <td>span 1</td>
  <td>span 1</td>
  <td>span 1</td>  
  <td>span 1</td>
</tr>
<tr>
  <td colspan="4">&nbsp;span 4</td>
  <td colspan="4">&nbsp;span 4</td>  
  <td colspan="4">&nbsp;span 4</td>
</tr>
<tr>
  <td colspan="4">span 4</td>
  <td colspan="8">span 8</td>  
</tr>
<tr>
  <td colspan="6">span 6</td>
  <td colspan="6">span 6</td>  
</tr>
<tr>
  <td colspan="12">span 12</td>
</tr>
</tbody></table>

## [Typography](https://www.w3schools.com/bootstrap5/bootstrap_typography.php)
```html
<!-- Headings -->
<!-- h1~h6 & Bolder font-weight -->
<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p> 

<!-- Display Headings -->
<!-- Larger font-size & Lighter font-weight -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Colors

Table

.table

.table-striped

.table-bordered

.table-hover

.table-dark

Images

.rounded

Adds rounded corners to an image

.rounded-circle

Shapes the image to a circle

.img-thumbnail

Shapes the image to a thumbnail (bordered)

.float-start

Float an image to the left

.float-end

Float an image to the right

.img-fluid

Responsive Images

Jumbotron

This site is open source. Improve this page.

gukbi

Bootstrap

Container Example 1

container