Bootstrap의 Utilities

자주 쓸 것 같은 utilities만 모아보았다.

Display

d-inline   inline-block을 선언하는 class

d-block   block을 선언하는 class

 

Flex

d-flex  flex를 선언하는 class

flex-row   가로로 늘어지는 flex

flex-column   세로로 늘어지는 flex

 

Sizing

w-25,h-25(50,75,100)   width와 height를 25% (50,75,100)로 조정하는 class

 

Spacing

m-(0부터5까지가능)   margin을 주는 class 

p-(0부터5까지가능)   padding을 주는 class 

top은 t

bottom은 b

left는 s (start)

right는 e (end) 으로 mt-3, mb-3 이렇게 특정 위치만 부여할 수도 있음

 

Breakpoints

sm   576px

md   768px

lg   992px

xl   1200px

 

반응형 레이아웃 쉽게 만들기

<div class="container">
	<div class="row">
		<div class="col-6"></div>
		<div class="col-6"></div>
	</div>
</div>

위처럼 container 안에 row class를 주고 col-숫자를 부여해서 칸을 나눌 수 있다. col에 들어가는 숫자는 총 합이 12여야 한다. 부여한 숫자만큼 전체 12에서 가진다고 생각하면 쉽다.

<div class="container">
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>
</div>

이렇게 col-sm-3처럼 sm자리에 lg,xl 처럼 breakpoint 를 줄 수 있다. 그러면 sm사이즈 이상일 때만 6만큼 차지하게 해주세요가 된다. 그러곤 sm사이즈보다 작아지면 세로로 정렬된다.

 

만약, 1200px 이상일 땐 4만큼 768px 이상일 땐 6칸 그 이하일 땐 세로로 정렬되게 해주세요. 이럴땐

<div class="container">
        <div class="row">
            <div class="col-xl-4 col-md-6"></div>
            <div class="col-xl-4 col-md-6"></div>
        </div>
</div>

이렇게 사용해주면 된다.

 

만약 어느 크기 이상일 때 이렇다가 작아지면 순서도 바뀌게 하려면

<div class="container">
        <div class="row">
            <div class="col-4 order-md-2">1</div>
            <div class="col-4 order-md-3">2</div>
            <div class="col-4 order-md-1">3</div>
        </div>
    </div>

이렇게 하면 md(768px)이상일 땐 3 1 2 이고,

그 밑으로 내려가면 1 2 3 순으로 바뀐다.