Cara Membuat Background Fullwidth dengan Bootstrap

Cara Membuat Background Fullwidth dengan Bootstrap – Hallo semuanya, Trend website saat ini adalah menggunakan section untuk membuat tampilan website memiliki background penuh dari ujung kiri sampai ke ujung kanan, pada artikel kali ini saya akan membuat salah satu contoh dalam menggunakan konsep website fullwidth yang dipadukan dengan bootstrap 4. Baiklah, sekarang simak tutorial berikut.

Membuat struktur HTML

Disini kita membuat struktur html dengan pembunkus paling luarnya adalah article, dimana nantinya tag article ini akan digunakan sebagai penerima background dari css, dilanjutkan dengan class container, yang berfungsi untuk membuat konten tetap berada di tengah. Contoh strukturnya akan seperti ini:

<article>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Col</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.</p>
            </div>
            <div class="col">
                <h1>Col</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.</p>
            </div>
            <div class="col">
                <h1>Col</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.</p>
            </div>
        </div>
    </div>
</article>

Memberikan CSS

Sedikit berbeda dengan artikel saya sebelumnya, yang berjudul Cara Membuat Background Fullwidth dengan HTML CSS, dimana pada artikel tersebut kita menuliskan banyak baris css, sedangkan ketika kita menggunakan bootstrap tentu baris css yang kita butuhkan saat ini hanyalah untuk background saja, yaitu dengan baris kode dibawah ini

article{
    background: lightgreen
}

Baiklah teman teman, demikian artikel kali ini yang membahas tentang cara membuat background fullwidth dengan bootstrap, saya rasa caranya cukup mudah, semoga bisa kalian jadikan referensi dalam membuat website ya, Terima kasih