Membuat Section Menjadi Miring pada Bootstrap 4

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

14 Agustus 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat