Bootstrap - Grid, Typography

BS 의 grid 시스템은 flexbox + 12 column 을 사용한다.

다음과 같이 5종류의 class 제공
screen width  별로 다음과 같다

.col- (extra small devices - 576px 미만)
.col-sm- (small devices - 576px 이상)
.col-md- (medium devices - 768px 이상)
.col-lg- (large devices - 992px 이상)
.col-xl- (xlarge devices - 1200px 이상)
.col-xxl- (xxlarge devices - 1400px 이상)


* BS grid 의 기본 구조

방법1]
우선은 <div class="row"> 를 만들고 그 안에 넣고자 하는 컬럼들을 넣는다  

.col-*-*  클래스들을 넣는다.
첫번째 * 는 screen width : sm, md, lg, xl, xxl 
두번째 * 는 컬럼개수  : 1 ~ 12

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

방법2]
걍 아래와 같이 하면 BS4 에서 알아서 균등 배분 함
아래와 같은 경우 1/3 = 33.3% 씩 차지
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>


더 읽어보기 Grid System
https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php   

 

---

BS의 글,문단 기본 스타일
font-size : 1rem (디폴트는 16px)
line-height : 1.5
font-family → "Helvetica Neue", Helvetica, Arial, sans-serif.

<p> : 
margin-top: 0  
margin-bottom: 1rem (16px 디폴트).