본문 바로가기
css trick & base

boostrap5 col

by uni:D 2024. 11. 2.
반응형
<div class ="col-xxl-8 col-lg-8>
 
 

Bootstrap의 반응형 그리드 시스템

  • col-xxl-8: xxl는 "extra extra large"를 의미하며, 매우 큰 화면(최소 1400px 이상)에서 요소가 그리드의 12열 중 8열을 차지하도록 지정합니다.
  • col-lg-8: lg는 "large"를 의미하며, 큰 화면(최소 992px 이상)에서 요소가 그리드의 12열 중 8열을 차지하도록 지정합니다.

이 두 클래스를 함께 사용하면 화면의 크기에 따라 다른 스타일을 적용할 수 있습니다. 예를 들어:

  • 화면 크기가 992px 이상이고 1400px 미만인 경우, col-lg-8이 적용되어 요소는 8열의 너비를 가집니다.
  • 화면 크기가 1400px 이상인 경우, col-xxl-8이 적용되어 요소는 여전히 8열의 너비를 유지합니다.
반응형

'css trick & base' 카테고리의 다른 글

d-flex  (0) 2024.11.03
테이블 넓이값  (0) 2024.11.02
vscode extention 확장프로그램  (1) 2024.10.26
스켈레톤 skeleton  (0) 2024.10.25
커서 색상 변경  (0) 2024.10.25