Bootstrap Go

세계에서 가장 널리 사용되는 프런트엔드 컴포넌트 라이브러리를 프레임 웍(framework)입니다.

미디어 쿼리

/* Small devices (landscape phones, 576px and up) 모바일 화면 */
@media (min-width: 576px) { 
	.media {background: red;}
 }
/* Medium devices (tablets, 768px and up) 타블렛 화면 */
@media (min-width: 768px) { 
	.media {background: blue;}
}
/* Large devices (desktops, 992px and up)  데스크탑(노트북) */
@media (min-width: 992px) { 
	.media {background: black;}
}
/* Extra large devices (large desktops, 1200px and up) 데스크탑 */
@media (min-width: 1200px) {
	.media {background: yellow;}
}
Extra amall
Small
Medium
Large
Extra large

Layout Columns

Extra small
<576px		 small
≤576px		 Medium
≤768px		 Large
≤960px		 Extra large
≤768px1140
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a columm
Nestable Yes
Column ordering Yes 
<div class="container">
	<div class="row">
		<div class="col">box1</div>
	</div>
	<div class="row">
		<div class="col">box1</div>
		<div class="col">box2</div>
	</div>
	<div class="row">
		<div class="col">box1</div>
		<div class="col">box2</div>
		<div class="col">box3</div>
	</div>
	<div class="row">
		<div class="col">box1</div>
		<div class="col">box2</div>
		<div class="col">box3</div>
		<div class="col">box4</div>
	</div>
	<div class="row">
		<div class="col">box1</div>
		<div class="col">box2</div>
		<div class="col">box3</div>
		<div class="col">box4</div>
		<div class="col">box5</div>
		<div class="col">box6</div>
	</div>
	<div class="row">
		<div class="col">box1</div>
		<div class="col">box2</div>
		<div class="col">box3</div>
		<div class="col">box4</div>
		<div class="col">box5</div>
		<div class="col">box6</div>
		<div class="col">box7</div>
		<div class="col">box8</div>
		<div class="col">box9</div>
		<div class="col">box10</div>
		<div class="col">box11</div>
		<div class="col">box12</div>
	</div>