Footer . Reza Admin

Footer

Membuat footer kamu membutuhkan tag <footer> dengan class .footer. Jika kamu menggunakan Sidebar, maka kamu harus menambahkan class .footer--ml-sidebar-width setelah class .footer, agar lebar Footer menyesuaikan dengan lebar Sidebar. Didalamnya kamu bisa menambahkan text menggunakan tag <p>, jika kamu punya lebih dari satu tag p, maka tambahkan class .mb-2 .mb-sm-0 pada setiap tag <p> kecuali tag <p> yang terakhir. Ini untuk memberi jarak diantara tag <p> ketika di tampilanan mobile. Letakkan footer setelah Main.

Main

CopyHTML
<!-- navbar -->
<nav class="navbar justify-content-start navbar--white">
    <a class="navbar__sidebar-toggler" href="#"><span class="fa fa-bars"></span></a>
    <a class="navbar-brand ml-3" href="#">
        <img src="[host mu]/dist/img/Reza_Admin.svg" width="120" alt="logo reza">
    </a>
</nav>
<!-- sidebar -->
<aside class="sidebar">
    <ul class="sidebar__nav">
        <li class="sidebar__item sidebar__item--header">Dashboard</li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-home"></span> Gambaran</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-group"></span> Rencana Harian</a>
        </li>
        <li class="sidebar__item">
            <a href="#"><span class="fa fa-area-chart"></span> Kemajuan</a>
        </li>

        <li class="sidebar__item sidebar__item--header mt-3">Konten</li>
        <li class="sidebar__item sidebar__item--dropdown-active">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-file-text"></span> Artikel
            </a>
            <ul class="sidebar__dropdown sidebar__dropdown--show">
                <li class="sidebar__dropdown-item sidebar__dropdown-item--active"><a href="#">HTML</a></li>
                <li class="sidebar__dropdown-item"><a href="#">CSS</a></li>
            </ul>
        </li>
        <li class="sidebar__item">
            <a class="sidebar__btn-dropdown" href="#">
                <span class="fa fa-video-camera"></span> Video
            </a>
            <ul class="sidebar__dropdown">
                <li class="sidebar__dropdown-item"><a href="#">PHP</a></li>
                <li class="sidebar__dropdown-item"><a href="#">Javascript</a></li>
        </ul>
        </li>
    </ul>
</aside>
<!-- main -->
<main class="main main--ml-sidebar-width">
    <div class="row">
        <header class="main__header col-12 mb-2">
            <div class="main__title">
                <h4>Main</h4>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Main</li>
                </ul>
            </div>
        </header>
    </div><!-- row -->
</main>
<!-- footer -->
<footer class="footer footer--ml-sidebar-width">
    <p class="mb-2 mb-sm-0">Copyright &copy; Website mu 2020. All rights reserved</p>
    <p>Version 1.0.2</p>
</footer>