거터
거터 (Gutters)
거터는 컬럼 사이의 패딩으로, Bootstrap 그리드 시스템에서 콘텐츠를 반응형으로 간격을 두고 정렬하는 데 사용해요.
출처: 문서
본문
동작 원리 (How they work)
- 거터는 가로 패딩으로 만들어지는 컬럼 콘텐츠 사이의 간격이에요. 각 컬럼에
padding-right와padding-left를 설정하고, 각 row의 시작과 끝에서 이를 상쇄하기 위해 음수 마진을 사용해서 콘텐츠를 정렬해요. - 거터는 기본적으로 1.5rem(24px) 넓이로 시작해요. 이 덕분에 그리드를 패딩·마진 간격 스케일과 맞출 수 있어요.
- 거터는 반응형으로 조정할 수 있어요. 브레이크포인트별 거터 클래스를 사용해서 가로 거터, 세로 거터, 전체 거터를 수정할 수 있어요.
가로 거터 (Horizontal gutters)
.gx-* 클래스로 가로 거터 너비를 제어할 수 있어요. 더 큰 거터를 사용할 때는 원치 않는 오버플로를 피하도록 .container나 .container-fluid 부모도 짝이 맞는 패딩 유틸리티로 조정해야 할 수 있어요. 예를 들어 다음 예시에서는 .px-4로 패딩을 늘렸어요:
<div class="container px-4 text-center">
<div class="row gx-5">
<div class="col">
<div class="p-3">
Custom column padding
</div>
</div>
<div class="col">
<div class="p-3">
Custom column padding
</div>
</div>
</div>
</div>
다른 해결책은 .row를 .overflow-hidden 클래스로 감싸는 거예요:
<div class="container overflow-hidden text-center">
<div class="row gx-5">
<div class="col">
<div class="p-3">
Custom column padding
</div>
</div>
<div class="col">
<div class="p-3">
Custom column padding
</div>
</div>
</div>
</div>
세로 거터 (Vertical gutters)
.gy-* 클래스로 row 안에서 컬럼이 새 줄로 접힐 때의 세로 거터 너비를 제어할 수 있어요. 가로 거터와 마찬가지로 세로 거터도 페이지 끝의 .row 아래쪽에 약간의 오버플로를 일으킬 수 있어요. 이러면 .row를 .overflow-hidden 클래스로 감싸면 돼요:
<div class="container overflow-hidden text-center">
<div class="row gy-5">
<div class="col-6">
<div class="p-3">
Custom column padding
</div>
</div>
<div class="col-6">
<div class="p-3">
Custom column padding
</div>
</div>
<div class="col-6">
<div class="p-3">
Custom column padding
</div>
</div>
<div class="col-6">
<div class="p-3">
Custom column padding
</div>
</div>
</div>
</div>
가로·세로 거터 (Horizontal & vertical gutters)
.g-* 클래스로 가로·세로 그리드 거터를 모두 제어할 수 있어요. 아래 예시에서는 더 작은 거터 너비를 사용하므로 .overflow-hidden 래퍼 클래스가 필요 없어요.
<div class="container text-center">
<div class="row g-2">
<div class="col-6">
<div class="p-3">
Custom column padding
</div>
</div>
<div class="col-6">
<div class="p-3">
Custom column padding
</div>
</div>
<div class="col-6">
<div class="p-3">
Custom column padding
</div>
</div>
<div class="col-6">
<div class="p-3">
Custom column padding
</div>
</div>
</div>
</div>
Row columns 거터 (Row columns gutters)
거터 클래스는 row columns에도 추가할 수 있어요. 다음 예시에서는 반응형 row columns와 반응형 거터 클래스를 사용해요.
<div class="container text-center">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3">
Row column
</div>
</div>
<div class="col">
<div class="p-3">
Row column
</div>
</div>
<div class="col">
<div class="p-3">
Row column
</div>
</div>
<div class="col">
<div class="p-3">
Row column
</div>
</div>
<div class="col">
<div class="p-3">
Row column
</div>
</div>
<div class="col">
<div class="p-3">
Row column
</div>
</div>
<div class="col">
<div class="p-3">
Row column
</div>
</div>
<div class="col">
<div class="p-3">
Row column
</div>
</div>
<div class="col">
<div class="p-3">
Row column
</div>
</div>
<div class="col">
<div class="p-3">
Row column
</div>
</div>
</div>
</div>
거터 제거 (No gutters)
미리 정의된 그리드 클래스에서 컬럼 사이의 거터는 .g-0으로 제거할 수 있어요. 이 클래스는 .row의 음수 마진과 모든 직계 자식 컬럼의 가로 패딩을 제거해요.
엣지 투 엣지(edge-to-edge) 디자인이 필요하다면 부모 .container나 .container-fluid를 빼고 .row에 .mx-0을 추가해서 오버플로를 막으세요.
실제로는 이렇게 보여요. 컬럼 너비, 반응형 tier, reorder 등 다른 모든 미리 정의된 그리드 클래스와 계속 함께 쓸 수 있다는 점을 기억하세요.
<div class="row g-0 text-center">
<div class="col-sm-6 col-md-8">
.col-sm-6 .col-md-8
</div>
<div class="col-6 col-md-4">
.col-6 .col-md-4
</div>
</div>
거터 변경 (Change the gutters)
클래스는 $spacers Sass 맵에서 상속받은 $gutters Sass 맵으로 생성돼요.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);