Scribd Logo
Upload

Welcome to Scribd!

  • 41 views

    Bootstrap 5 Sidebar

    Uploaded by

    newsletter
    The document shows code for a sidebar navigation component with Bootstrap. It includes HTML, CSS, and JavaScript for the sidebar layout and functionality. The sidebar has navigation links and can open/close on mobile via JavaScript.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Bootstrap 5 Sidebar

    Uploaded by

    newsletter
    41 views5 pages
    The document shows code for a sidebar navigation component with Bootstrap. It includes HTML, CSS, and JavaScript for the sidebar layout and functionality. The sidebar has navigation links and can open/close on mobile via JavaScript.

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document shows code for a sidebar navigation component with Bootstrap. It includes HTML, CSS, and JavaScript for the sidebar layout and functionality. The sidebar has navigation links and can open/close on mobile via JavaScript.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    41 views5 pages

    Bootstrap 5 Sidebar

    Uploaded by

    newsletter
    The document shows code for a sidebar navigation component with Bootstrap. It includes HTML, CSS, and JavaScript for the sidebar layout and functionality. The sidebar has navigation links and can open/close on mobile via JavaScript.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 5

    Youtube - Sidebar Bootstrap 5 | Coding

    League
    HTML
    <div class="main-container d-flex">
    <div class="sidebar" id="side_nav">
    <div class="header-box px-2 pt-3 pb-4 d-flex justify-content-between">
    <h1 class="fs-4"><span class="bg-white text-dark rounded shadow px-2 me-2">CL</span>
    <span
    class="text-white">Coding League</span></h1>
    <button class="btn d-md-none d-block close-btn px-1 py-0 text-white"><i
    class="fal fa-stream"></i></button>
    </div>

    <ul class="list-unstyled px-2">


    <li class="active"><a href="#" class="text-decoration-none px-3 py-2 d-block"><i
    class="fal fa-home"></i> Dashboard</a></li>
    <li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
    list"></i>
    Projects</a></li>
    <li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block d-flex justify-
    content-between">
    <span><i class="fal fa-comment"></i> Messages</span>
    <span class="bg-dark rounded-pill text-white py-0 px-2">02</span>
    </a>
    </li>
    <li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i
    class="fal fa-envelope-open-text"></i> Services</a></li>
    <li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
    users"></i>
    Customers</a></li>
    </ul>
    <hr class="h-color mx-2">
    <ul class="list-unstyled px-2">
    <li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
    bars"></i>
    Settings</a></li>
    <li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
    bell"></i>
    Notifications</a></li>

    </ul>

    </div>
    <div class="content">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
    <div class="d-flex justify-content-between d-md-none d-block">
    <button class="btn px-1 py-0 open-btn me-2"><i class="fal fa-stream"></i></button>
    <a class="navbar-brand fs-4" href="#"><span class="bg-dark rounded px-2 py-0 text-
    white">CL</span></a>

    </div>
    <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse"
    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <i class="fal fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse justify-content-end"
    id="navbarSupportedContent">
    <ul class="navbar-nav mb-2 mb-lg-0">
    <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Profile</a>
    </li>

    </ul>
    </div>
    </div>
    </nav>

    <div class="dashboard-content px-3 pt-4">


    <h2 class="fs-5"> Dashboard</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, totam? Sequi alias
    eveniet ut quas
    ullam delectus et quasi incidunt rem deserunt asperiores reiciendis assumenda
    doloremque provident,
    dolores aspernatur neque.</p>
    </div>
    </div>
    </div>
    CSS
    body{
    background: #eee;
    }

    #side_nav{
    background: #000;
    min-width: 250px;
    max-width: 250px;
    transition: all 0.3s;
    }
    .content{
    min-height: 100vh;
    width: 100%;
    }
    hr.h-color{
    background: #eee;
    }
    .sidebar li.active{
    background: #eee;
    border-radius: 8px;
    }

    .sidebar li.active a, .sidebar li.active a:hover {


    color: #000;
    }
    .sidebar li a{
    color: #fff;
    }

    @media(max-width: 767px){
    #side_nav{
    margin-left: -250px;
    position: absolute;
    min-height: 100vh;
    z-index: 1;

    }
    #side_nav.active{
    margin-left: 0;
    }
    }
    JS
    $(".sidebar ul li").on('click', function () {
    $(".sidebar ul li.active").removeClass('active');
    $(this).addClass('active');
    });

    $('.open-btn').on('click', function () {
    $('.sidebar').addClass('active');

    });

    $('.close-btn').on('click', function () {
    $('.sidebar').removeClass('active');

    })

    You might also like