Bootstrap 5 그리드 시스템에는 4가지 클래스

Bootstrap 5 그리드 시스템에는 6가지 클래스가 있습니다. 그중 정리한

index222.php

0.01MB

 

<div class="container-fluid">

    <div class="row">
      <div class="col-lg-3 col-sm-6 col-12 bg-success">11</div>
      <div class="col-lg-3 col-sm-6 col-12 bg-warning">22</div>
      <div class="col-lg-3 col-sm-6 col-12 bg-success">33</div>
      <div class="col-lg-3 col-sm-6 col-12 bg-warning">44</div>
    </div>

</div>

 

아래부분을 콘테이너에 적용해보세요.

    <div class="row">
      <div class="col-lg-3 col-sm-6 col-12">
        <div class="border p-4 rounded">11</div>
      </div>
      <div class="col-lg-3 col-sm-6 col-12">
        <div class="border p-4 rounded">22</div>
      </div>
      <div class="col-lg-3 col-sm-6 col-12">
        <div class="border p-4 rounded">33</div>
      </div>
      <div class="col-lg-3 col-sm-6 col-12">
        <div class="border p-4 rounded">44</div>
      </div>
    </div>

 

 

 

현재 테마의 테마 그리드4개 개선버전

테마 그리드4개 개선버전.txt

0.00MB

 

Bootstrap 5 Grid System

Bootstrap 5 그리드 시스템에는 6가지 중 4개 클래스를 정리했습니다.

.col-(초소형 기기 - 화면 너비가 576px 미만)
.col-sm-(소형 기기 - 화면 너비가 576px 이상)
.col-md-(중형 기기 - 화면 너비가 768px 이상)
.col-lg-(대형 기기 - 화면 너비가 992px 이상)

 

bs5_grid.html

0.00MB

 

---

Bootstrap 공식사이트를 통해서 추가적인 내용들을 분석해 적용해봅니다.

https://getbootstrap.com/

Bootstrap

 

Padding, border 등 클래스로 적용된 유틸리티의 사용도 익혀보세요

Bootstrap 4 Utilities