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

28 September 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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat