레이아웃 - 컬럼

jb kim·2022년 8월 4일
0

부트스트랩

목록 보기
13/48

    <style>
        div > div > div {
            background: #F7941F;
            padding: 1rem;
            border: 1px solid white;
            font-weight: 600;
            color: white;
            border-radius: 7px;
            margin: 1rem 0;
        }
    </style>
   <!-- EQUAL WIDTH COLUMNS -->

    <div class="container">
        
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col">
                2 of 3
            </div>
            <div class="col">
                3 of 3
            </div>
        </div>
        <div class="row">
            <div class="col">
                1 of 2
            </div>
            <div class="col">
                2 of 2
            </div>
        </div>
    </div>

    <!-- AUTO WIDTH COLUMNS -->

    <div class="container">
        <div class="row">
            <div class="col">
                1 of 3
            </div>
            <div class="col-auto">
                Variable width content
            </div>
            <div class="col">
                2 of 3
            </div>
        </div>
    </div>

    <!-- SPECIFIC WIDTH COLUMNS -->

    <div class="container">
        <div class="row">
            <div class="col-8">Column of 8/12</div>
            <div class="col-4">Column of 4/12</div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">Column</div>
        </div>
    </div>

    <!-- ROW COLUMNS -->

    <div class="container">
        <div class="row row-cols-2">
            <div class="col">column</div>
            <div class="col">column</div>
            <div class="col">column</div>
            <div class="col">column</div>
        </div>
    </div>
profile
픽서

0개의 댓글