[Bootstrap] Container 클래스의 속성 이해

Container를 잘 써야 의도한 대로 반응형 웹사이트가 동작한다.

• .container, which sets a max-width at each responsive breakpoint
• .container-{breakpoint}, which is width: 100% until the specified breakpoint
• .container-fluid, which is width: 100% at all breakpoints

 

container-md를 예로 살펴보자

//예시 코드
<div class="container-md border"></div>
// container-md에서 'md'는 breakpoint를 의미한다

 

화면 가로 길이가 768px~992px라면, Container를 720px로 설정한다.

화면 가로 길이가 768px보다 짧다면, Container를 100%로 설정하며 화면 전체를 채운다.

 

<div class="container my-5 mx-5"></div> // my : margin y축(세로), mx : margin x축(가로)