반응형 디자인(모바일, 태블릿, PC 등 사이즈가 다양한 단말에 맞게 화면 반응)
12분할을 하여 col-sm-4, col-sm-8과 같이 화면을 2분활 할 수 있다. sm으로 지정하면 sm이상 크기 단말에서는 2분활하고, 그 보다 작은 단말에서는 분활하지 않는다.
| None (auto) | 540px | 720px | 960px | 1140px |
| .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 12분할 | ||||
<div class="col-sm-3 col-4">
<div class="col-sm-3 col-4">
<div class="col-sm-3 col-4">
<div class="col-sm-3 col-4">위와 같이 작성하면, 540px이상에서는 4개로 나뉘고, 그 이하에서는 3개로 나뉜다.
flex 개념
flex박스 하위의 요소들(예를들어 div 등)을 flex박스 안에 배치한다. d-flex-row하면 가로로 여러개, d-flex-column하면 세로로 여러개 배치하는 형태. flex의 정렬 속성은 justfy-content로 지정한다.
justfy-content 의 정렬속성에는 start(시작위치부터 배치), end(끝부터 배치), center, between(요소사이에 여백배분), aroud(여백배분), evenly(모두 같은 여백)
<div class="d-flex justify-content-center">반응형