Membuat Section Menjadi Miring pada Bootstrap 4

14/08/2018    Maykhel David    619     Website

Membuat Section Menjadi Miring pada Bootstrap 4 - Pernahkah kalian melihat sebuah website yang memiliki tampilan setiap section nya menjadi miring? Seperti yang sudah saya bahas pada artikel sebelumnya menggunakan HTML dan CSS, nahh untuk artikel kali ini saya akan membahasnya lagi, namun kali ini kita akan terapkan pada framework terbaru, yaitu framework responsive Bootstrap 4.

Hal yang pertama kali kita lakukan adalah membuat sebuah file dan menghubungkan dengan bootstrap 4, lalu kita buat struktur dasar seperti berikut

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Header</h1>
            </div>
        </div>
    </div>
</header>
<div class="service py-5 miring">
    <div class="container">
        <div class="row py-5">
            <div class="col-md-12 text-white text-center">
        <h2>Service Section</h2>
        <p>Ini paragraf section service</p>
            </div>
        </div>
    </div>
</div>
<div class="py-5 miring">
    <div class="container">
        <div class="row py-5">
            <div class="col-md-12 text-right">        
                <h2>Article1 Section</h2>
        <p>Ini paragraf section article</p>
            </div>
        </div>
    </div>
</div>
<div class="article py-5 miring">
    <div class="container">
        <div class="row py-5">
            <div class="col-md-12 text-white">        
                <h2>Article2 Section</h2>
        <p>Ini paragraf section article</p>
            </div>
        </div>
    </div>
</div>

Pada struktur diatas saya menambahkan sebuah class dengan nama class .miring yang nantinya akan saya gunakan untuk membuat section menjadi miring, karna kita menggunakan bootstrap, maka kita tidak perlu membuat banyak custom css pada artikel ini. Baiklah, sebelum kita membuat konten miring, kita akan buat css untuk tampilan dasarnya terlebih dahulu

body{
    background-color: lightgreen
}
header{
    height: 100px
}
.service{
    background-color: darkgreen;
    height: 200px;
}
.article{background-color: green;
    height: 300px
}

 

Jika sudah, maka tampilan halaman website kita akan seperti ini

 

Selanjutnya kita akan membuat css untuk class .miring yang telah kita buat dengan css seperti ini

.miring{
    height:300px;
    transform:rotate(-2deg) translateX(-1%);
    width: 105%;
}
.miring .container{
    transform:rotate(2deg);
    padding:0 30px;
}

 

Pada elemen diatas saya menggunakan rotate(2deg) pada section untuk memiringkan section tersebut, lalu saya juga memberikan rotate(-2deg) pada .container agar elemen yang ada di dalam section tetap dalam keadaan normal (tidak ikut miring).

Jika sudah selesai maka kalian akan melihat tampilan seperti berikut

Baiklah teman – teman, demikian artikel kali ini yang membahas tentang Membuat Section Menjadi Miring pada Bootstrap 4 dengan mudah, semoga bermanfaat

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More