Bootstrap 4 - 02.1: Layout pada Bootstrap 4

Bootstrap 4 - 02.1: Layout pada Bootstrap 4

loading....

Tutorial dasar bootstrap 4 bagian 2.1 ini akan membahas penggunaan layout container pada bootstrap4. Ok mari kita mulai mempelajari Layout pada bootstrap. Layout adalah komponen dasar yang diperlukan untuk membuat grid system dan menampilkan objek yang responsive.

  • Contoh container
    <div class="contoh">
      <div class="container ccontainer">
        <div class="container header">Header RumahCode.org</div>
        <div class="container sidebar">Sidebar</div>
        <div class="container body">Body</div>
      </div>
    </div>

    Jika ingin menampilkan lebar maximal gunakan container-fluid.

    <div class="contoh">
      <div class="container-fluid fluid">
        <div class="container header">Header RumahCode.org fluid</div>
        <div class="container sidebar">Sidebar fluid</div>
        <div class="container body">body fluid</div>
      </div>
    </div>

    Saya menambahkan css untuk menampilkan container di atas berikut adalah css file nya

    .ccontainer {
        min-width: 16rem;
        max-width: 25rem;
        margin-right: auto;
        margin-left: auto
    }
    
    .header {
        height: 3rem;
        margin-bottom: .5rem;
        background-color: coral;
        border-radius: .25rem
    }
    
    .sidebar {
        float: right;
        width: 4rem;
        height: 8rem;
        background-color: lightblue;
        border-radius: .25rem
    }
    
    .body {
        height: 8rem;
        margin-right: 4.5rem;
        background-color: yellow;
        border-radius: .25rem
    }
    
    .rc-example-container-fluid {
        max-width: none
    }
    
    .contoh {
        position: relative;
        padding: 1rem;
        margin: 1rem -15px 0;
        border: solid #f7f7f9;
        border-width: .2rem 0 0
    }
    
    .contoh::after {
        display: block;
        clear: both;
        content: ""
    }
    
    @media (min-width:576px) {
        .contoh {
            padding: 1.5rem;
            margin-right: 0;
            margin-left: 0;
            border-width: .2rem
        }
    }
  • Demo & Source Code
Artikel Menarik Lainnya
Bootstrap 4, Bootstrap

loading...