Bootstrap 4.0 > "Grids & Flexbox" > 3/4 by : Brad Traversy

PHOTO EMBED

Tue Mar 23 2021 16:30:44 GMT+0000 (Coordinated Universal Time)

Saved by @jpannu #css #bootstrap #html

           /*    Grid System      */
    <!-- RESPONSIVE GRID -->
    <div class="row">
      <div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>8 column on medium screen</li>
          <li>9 column on large screen</li>
          <li>10 column on xlarge screen</li>
        </ul>
      </div>
      <div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>4 column on medium screen</li>
          <li>3 column on large screen</li>
          <li>2 column on xlarge screen</li>
        </ul>
      </div>
    </div>

    <!-- EQUAL WIDTH -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
    </div>

    <!-- EQUAL WIDTH MULTI ROW -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="w-100" style="border:1px solid #333"></div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
    </div>

    <!-- AUTO LAYOUT -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Auto Layout</div>
      <div class="col-6" style="border:1px solid #333">Auto Layout</div>
      <div class="col-4" style="border:1px solid #333">Auto Layout</div>
    </div>

    <!-- EQUAL WIDTH STACKED -->
    <div class="row">
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
    </div>

    <!-- ORDERING -->
    <div class="row">
      <div class="col order-3" style="border:1px solid #333">
        First
      </div>
      <div class="col order-2" style="border:1px solid #333">
        Second
      </div>
      <div class="col order-1" style="border:1px solid #333">
        Third
      </div>
    </div>

    <!-- OFFSETTING -->
    <div class="row">
      <!-- 6 column div offset by 3 -->
      <div class="col-md-6 offset-md-3" style="border:1px solid #333">.col-md-6 .offset-md-3</div>
    </div>
    <div class="row">
      <!-- 2 4 column divs, the second offset by 4 -->
      <div class="col-md-4" style="border:1px solid #333">.col-md-4</div>
      <div class="col-md-4 offset-md-4" style="border:1px solid #333">.col-md-4 .offset-md-4</div>
    </div>

    <div class="row">
      <!-- 2 3 column divs, both offset by 3 -->
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
    </div>

    <!-- NESTING -->
    <div class="row">
      <div class="col-sm-9" style="border:1px solid blue">
        Level 1: .col-sm-9
        <div>
          <div class="col-8 col-sm-6" style="border:1px solid red">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6" style="border:1px solid red">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>

  /* ------------------ XX --------------- */


          /*   Grid Alignment       */
        <!-- VERTICAL ALIGNMENT -->
        <div class="container">
            <div class="row align-items-start" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Top Aligned Text
                </div>
                <div class="col">
                    Top Aligned Text
                </div>
                <div class="col">
                    Top Aligned Text
                </div>
            </div>
            <div class="row  align-items-center" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Middle Aligned Text
                </div>
                <div class="col">
                    Middle Aligned Text
                </div>
                <div class="col">
                    Middle Aligned Text
                </div>
            </div>
            <div class="row  align-items-end" style="height:200px;border:1px #333 solid">
                <div class="col">
                    Bottom Aligned Text
                </div>
                <div class="col">
                    Bottom Aligned Text
                </div>
                <div class="col">
                    Bottom Aligned Text
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- VERTICAL ALIGN INDIVIDUAL COLS -->
        <div class="container">
            <div class="row" style="height:200px;border:1px #333 solid">
                <div class="col  align-self-start">
                    Top Aligned
                </div>
                <div class="col  align-self-center">
                    Middle Aligned
                </div>
                <div class="col  align-self-end">
                    Bottom Aligned
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- HORIZONTAL ALIGNED COLS -->
        <div class="container">
            <div class="row justify-content-start" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Left Aligned Text
                </div>
                <div class="col-4">
                    Left Aligned Text
                </div>
            </div>
            <div class="row justify-content-center" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Center Aligned Text
                </div>
                <div class="col-4">
                    Center Aligned Text
                </div>
            </div>
            <div class="row justify-content-end" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Right Aligned Text
                </div>
                <div class="col-4">
                    Right Aligned Text
                </div>
            </div>
            <div class="row justify-content-around" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Content Around
                </div>
                <div class="col-4">
                    Content Around
                </div>
            </div>
            <div class="row justify-content-between" style="height:200px;border:1px #333 solid">
                <div class="col-4">
                    Content Between
                </div>
                <div class="col-4">
                    Content Between
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- COLUMN WRAPPING & NO GUTTERS-->
        <div class="row no-gutters">
            <div class="col-9">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card">
                    <div class="card-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


   /* ------------------ XX --------------- */

            /*   Flex   */

    <!-- FLEX ROW & FLEX ITEMS -->
    <div class="d-flex flex-row row-hl">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX ROW REVERSE -->
    <div class="d-flex flex-row-reverse row-hl">
      <div class="p-4 item-hl">Flex Item 1</div>
      <div class="p-4 item-hl">Flex Item 2</div>
      <div class="p-4 item-hl">Flex Item 3</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT START -->
    <div class="d-flex row-hl justify-content-start">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT CENTER -->
    <div  class="d-flex row-hl justify-content-center">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT END -->
    <div class="d-flex row-hl justify-content-end">
      <div class="p-4 item-hl">Flex Item end</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT AROUND -->
    <div class="d-flex row-hl justify-content-around">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- JUSTIFY CONTENT - CONTENT BETWEEN -->
    <div  class="d-flex row-hl justify-content-between">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX COLUMN -->
    <div class="row-hl d-flex flex-column">
      <div class="p-4 item-hl">Flex Item 11</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- FLEX COLUMN REVERSE -->
    <div class="d-flex flex-column-reverse row-hl">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - START -->
    <div class="row-hl d-flex align-items-start">
      <div class="p-4 item-hl">Flex Item Start</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - CENTER -->
    <div class="row-hl d-flex align-items-center">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - END -->
    <div class="row-hl d-flex align-items-end">
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - BASELINE -->
    <div class="row-hl d-flex align-items-baseline">
      <div class="p-4 item-hl">Flex Item BASELINE</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- VERTICAL ALIGN ITEMS - STRETCH -->
    <div class="row-hl d-flex align-items-stretch">
      <div class="p-4 item-hl">Flex Item STRETCH</div>
      <div class="p-4 item-hl">Flex Item</div>
      <div class="p-4 item-hl">Flex Item</div>
    </div>

    <br>
    <br>

    <!-- ALIGN SELF -->
    <div class="row-hl d-flex">
      <div class="p-4 item-hl align-self-end">Flex Item End</div>
      <div class="p-4 item-hl align-self-center">Flex Item</div>
      <div class="p-4 item-hl align-self-start">Flex Item</div>
      <div class="p-4 item-hl align-self-baseline">Flex baseline</div>
      <div class="p-4 item-hl align-self-stretch">Flex stretch</div>
    </div>
   /* ------------------ XX --------------- */

          /*  Auto Margins & Wrap     */



        <!-- MR-AUTO -->
        <div class="d-flex row-hl">
            <div class="mr-auto p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- ML-AUTO -->
        <div class="d-flex row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="ml-auto p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- MB-AUTO -->
        <div class="d-flex flex-column row-hl">
            <div class="mb-auto p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- MT-AUTO -->
        <div class="d-flex flex-column row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 mt-auto item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- NO WRAP -->
        <div class="d-flex row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>

        </div>

        <br>
        <br>

        <!-- WRAP -->
        <div class="d-flex flex-wrap row-hl">
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
            <div class="p-2 item-hl">Flex item</div>
        </div>

        <br>
        <br>

        <!-- ORDERING -->
        <div class="d-flex row-hl">
            <div class="p-2 order-3 item-hl">First flex item</div>
            <div class="p-2  item-hl">Second flex item</div>
            <div class="p-2 order-1 item-hl">Third flex item</div>
        </div>

     /* ------------------ XX --------------- */
content_copyCOPY