Sidebar Bootstrap 5 | Coding League

How to create sidebar bootstrap 5.
#sidebar #bootstrap5
Checkout other bootstrap sidebar Video:
• Responsive Bootstrap 5...
Get 20% discount on hostinger:
hostinger.com/?REFERRALCODE=1...
Code: codepen.io/coding-league/pen/...
Subscribe
/ @webpexels

[@jorgeduardo101]

Awesome video! works like a charm!

[@joaquingonzalez2297]

Thanks for this! Really awesome :)

[@kushiheyon2220]

Thanks a lot! This was so helpful! ❤️

[@CodingLeague]

Thank you

[@liskookmanoban6023]

Can you make a video on how to change the content based on what user choose?

[@johnnytizz]

I'm just now trying to learn coding for work and this is *so* helpful!

[@CodingLeague]

Thank you so much! 🙂

[@CavaOfficial]

nice

[@codcrisss]

excellent. thank you!

[@joshdevofficial]

You're so great Sir.

[@CodingLeague]

Thanks :)

[@kangegi1749]

when i typed in soft soft tutorial i did not expect it to be tNice tutorials good thank you so much aaaaaaa

[@CodingLeague]

Thank you so much!

[@sergeymak26]

Спасибо огромное!

[@masinde.charles]

This is awesome

[@CodingLeague]

Thank you so much!

[@luci0929]

Thank You. Great Job😍😍

[@CodingLeague]

Thank you so much

[@fareedjosip4391]

how to make it active when clicked, it dont work for me

[@gta-x-freefire9764]

In jq open btn is working but close isn't any help..?

[@subaash1706]

Offcanvas might have helped. Isn't it? Idk...

[@CodingLeague]

Yes

[@shahbazbhatti9284]

excellent stuff, leaned a lot

[@Ezeken]

i love this

[@CodingLeague]

Thank you so much!

[@retoulrich3137]

in the video you can see that you enter div.class, and then the editor creates clean html. Which extension is this?

[@CodingLeague]

Hi, Thank you so much!
If you're using vs code then write div.class and hit the tab button. I hope this will work for you.

[@nandopookey9195]

Thankyou

[@jigyasanamdeo]

voice rakhenge to aur behtar hoga sir

[@daniellalayda3768]

can we have the source code, please?

[@rawanalessa1234]

thank you very much for your efforts.. I do this sidebar using RTL but when I use it the side bar doesn't work probably, I think the problem with a jQuery, can you help me to solve it?

[@CodingLeague]

Let me know your problem?
Is it opened on desktop?
Click function is working?

[@rawanalessa1234]

@@CodingLeague yes it is opened in desktop, but the click function doesn't work. I am only changed the direction for HTML tag to RTL and used the Bootstrap CDN also for RTL

[@juliancolli1494]

Need source code pease! Thank you

[@msafiqrii4320]

When I put navbar, why is my navbar filling up the screen? not directly adjust beside the sidebar like yours. Even though I followed the steps.

[@CodingLeague]

May you're missing margin left. Thanks

[@ammadkhan2352]

Brother i think the code is not updated at given link as sliding is not working or maybe not implemented there

[@gabrielbithencourt2122]

uauuuuuu, very nice

[@CodingLeague]

Thank you

[@gayathriselvaraj3230]

I have an doubt when I add navbar next to sidebar as you did in that but navbar hide the side bar top now how can i fix that problems can i get your help to clear that please

[@CodingLeague]

Use z-index

[@gayathriselvaraj3230]

Thank you for ur response it's worked

[@vinothdharmaraj6756]

Nice. I tried. It's properly working for me. But I can not make it navbar as fixed and sidenav as scrollable if it have more items. Please help me

[@CodingLeague]

Thanks..
Set position:fixed; and height would be 100vh;

[@Mustafa-ji3cp]

can i get source code

[@krishnendufouzder6936]

source code pls

[@xenapaulabuenaagua5723]

can I get source code?

[@aryastark1833]

Hi. What if I want to show my navbar-logo and sidebar button on large screens (since you hid it in yours)? What should I add or change?
I tried to remove the class "d-md-none" on before the sidebar button and navbar logo to show them but when I click it, the sidebar won't hide, nothing happens. The sidebar button only toggles on small screen. Basically, I want to be able to hide the sidebar on large screens too. I hope it makes sense. I really need help. Thank you.

[@CodingLeague]

Hi,
Thank you so much!
Step 01:
Remove d-md-none and d-block from closing button under sidenav.
Step 02:
Remove d-md-none d-block under horizontal navbar.
Step 03:
Set .close-btn to display none.
Step 04:
Set #side_nav margin-left: -250px
Step 05:
Set #side_nav.active margin-left: 0px
Step 06:
Change javaScript code
----
Hide open button
Show close button
$('.open-btn').on('click', function () {
$('.sidebar').addClass('active');
$('.open-btn').hide();
$('.close-btn').show();
});
--------------------------------
Hide close button
Show open button
$('.close-btn').on('click', function () {
$('.sidebar').removeClass('active');
$('.close-btn').hide();
$('.open-btn').show();
})
I hope this would be helpful. Another tutorial is coming soon.

[@aryastark1833]

@@CodingLeague It worked! Thank you so much for the step-by-step you have no idea how much you helped ❤

[@CodingLeague]

Always welcome :)

[@seaweed4794]

For who not showing up, u can try this
hr.h-color{
border: 0;
background-color:#eee;
height: 5px;
}

[@user-yg1nm6vj4b]

I love you

[@manzoorahmad9410]

Nice video

[@CodingLeague]

Thanks

[@vikrambais5330]

u saved me thank u alot?

[@mujeebsaify1112]

I want this navbar in responsive not it full screen how can i do it?

[@CodingLeague]

I don't get it. If you're talking about responsive then it is responsive.

[@renatochaves1999]

Someone Using bootstrap 5.2.3 with problems with the sidebar?

[@CodingLeague]

5.0 is stable but most people saying the same 5.2 isn't.

[@ADEYOABSATRIA]

why is the javascript doesn't work on me

[@CodingLeague]

May be you're missing some steps. :)

[@scrunkusbrunkus7948]

You are a human, JavaScript only works on computers, sorry 😞

[@owenlabestia762]

Nice video pls can i get the source code

[@CodingLeague]

Thank you so much! I'll share it.

[@aboodarter7905]

can I get the source code ????

[@CodingLeague]

Hi,
Abood arter did you watch the whole video?
Thanks

[@hawdy6921]

Sidebar toggle icon is not showing...! Any suggestions?

[@CodingLeague]

Missing font awesome library? Or fix js

[@maheenkashish4827]

dede yaar source code

[@CodingLeague]

😅

[@daffadistrict3]

Can we have the source code please?

[@treseibert795]

Love how he likes it but doesn't provide it lmao

[@felixbemme7257]

This is ltrly is a coding Video. Just take it or look for bootstrap examples on there docs

[@cikalchievoart]

Can i get the source code?