Membuat Side Nav Responsive dengan Bootstrap 4

Pada beberapa artikel sebelumnya saya sudah cukup banyak membahas tentang berbagai fitur yang ada pada bootstrap 4 yaitu salah satunya adalah artikel saya yang berjudul membuat dropdown menggunakan bootstrap 4,  jika kalian ingin melihatnya bisa masuk ke link kategoriseperti yang kita ketahui bahwa bootstrap adalah sebuah framework yang digunakan untuk membangun sebuah website responsive. Pada artikel ini kita akan sedikit melakukan eksperimen untuk membuat side nav responsive menggunakan bootstrap 4.

Caranya cukup mudah, pertama kita hubungkan beberapa file dari bootstrap dan font-awesome file ini ke dalam sebuah file html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Jika sudah, sekarang kita akan buat struktur untuk membuat side nav pada bootstrap 4 dengan kode dibawah ini

<div class="container-fluid">
    <div class="row">
        <div class="col-2 collapse d-md-flex bg-dark pt-2 h-100" id="sidebar">
            <ul class="nav flex-column flex-nowrap">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item">
                    <a class="nav-link " href="#submenu1" data-toggle="collapse" data-target="#submenu1">Materi <i class="fa fa-arrow-down" aria-hidden="true"></i></a>
                    <div class="collapse" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-2 nav">
                            <li class="nav-item"><a class="nav-link py-0" href="">Desain</a></li>
                            <li class="nav-item">
                                <a class="nav-link collapsed py-0" href="#submenu1sub1" data-toggle="collapse" data-target="#submenu1sub1">Website</a>
                                <div class="collapse small" id="submenu1sub1" aria-expanded="false">
                                    <ul class="flex-column nav pl-4">
                                        
                                        <li class="nav-item">
                                            <a class="nav-link p-0" href="">
                                                 HTML CSS
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-0" href="">
                                                 Javascript
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-0" href="">
                                                 PHP
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Alumni</a></li>
            </ul>
        </div>
        <div class="col pt-2">
            <h2>
                <a href="" data-target="#sidebar" data-toggle="collapse" class="d-md-none"><i class="fa fa-bars"></i></a>
                Content
            </h2>
            <h6 class="hidden-sm-down">..ISI KONTEN UTAMA..</p>
        </div>
    </div>
</div>

Selanjutnya kita juga akan berikan CSS untuk memberikan lebar dan tinggi halaman seperti dibawah ini

body, html {
    height: 100%;
}

#sidebar {
    min-width: 130px;
}

Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara membuat side nav menggunakan bootstrap 4, untuk lebih jelasnya bisa kalian lihat demo di bawah ini.

26 September 2017

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