Now that Bootstrap 5 has a Offcanvas component 👏, it makes sense to explore building a Bootstrap 5 Sidebar. Sidebars are often used for vertical na...
For further actions, you may consider blocking this person and/or reporting abuse
I have a problem in Sidebar Example 2 when I try to introduce a big responsive table in the text. As you can see in my fork of it (codeply.com/p/PNoCYKK8Wk), using table view there is an overlapping between the sidebar and the contents. Do you know how I can fix this problem?
I know this is a bit old, but I think what you were saying is that the content area is not forcing the nav to collapse to the top of the screen when on mobile devices. If there is not enough content in the content area, the nav bar is expanding vertically.
To fix this, I looked at the other examples, and noticed that many of them are using this on the div tags around the content "min-vh-100". This is basically saying minimum vertical heigh of 100% where the content is displayed.
<class="col pt-4 min-vh-100">
CONTENT HERE
</div>
This should push the nav bar up so that it is compressed to the correct size.
I'm not seeing overlap.. I'm seeing the table wrap. Is that what you mean?
There is an overlap when I scroll, but finally I solved it adding "col-sm-9" in div class of line 62. Thanks
Ah, Zim is on DEV. Nice seeing you here 👍
Hello 👋 my SO friend, Nice see you too!
I want you to crash DEV 💥 with Boostrap posts!
PS: you can add
htmlin front of the 3 slashes to have a colored code dev-to-uploads.s3.amazonaws.com/up...Cool... much better 😉 thanks for the tip!
Very nice! Great, simple and fantastic examples!
Hello.
I am new coding with bootstrap and web developmente in general. I was wondering if there is a way to implement this sidebar in every page without the need to paste the code in all the pages.
Thanks!
Neat examples, I have a problem with Example 2 tho... in the "sticky footer" version, both the footer and the top navbar stretch to fill the space if there is not enough text to fill the page. This doesn't happen in the "normal footer" version. Is there any class or tag that can be added to prevent this?
This isn't normally noticeable in the Demo since there's a bunch of placeholder text, but if I delete some of it, it stretches.
Good article. But I am not really satisfied when seeing the result of Example 6, i.e "Push" Sidebar.
My only concern is on the placement of the element/component used for toggling the sidebar. When the sidebar is shown/open, I think the appearance of the toggle element on the main element is not intuitive, even a bit confusing. The sidebar is already open, why should we need to display the toggle element on the main element/section ? In that situation, it appears as if there will be another menu content when user click the toggle element.
We quite often see in real applications, the toggle element is usually placed on the sidebar itself when the sidebar is open, commonly using certain icon on the right side of the sidebar. Only when the sidebar is closed, then the toggle element (with text) is placed and appears on the main element/section.
I realize that in order to achieve that purpose, it needs additional work and might be tricky.
For comparison, we can see on bootsnipp.com/snippets/Q0dAX which uses version 4, but yeah... it requires additional work on CSS.
Nicely done! One question: how does one place the horizontal Navbar in Example #2 to the bottom as opposed to the top? I've tried changing to "fixed-bottom" but then the Sidebar no longer occupies the full length of the screen.
Hi,
New to DEV community, I have opened the Sidebar Example 1 in Codeply, but I see only HTML 5 code,
is it that I should be coding the respective Java Script and CSS files, hope I am not missing something basic here to get them,
Can someone please guide me?
Thanks
Hi everyone,
I really liked the examples and wanted to try Sidebar Example 6. I made a new React project and added bootstrap and react-bootstrap latest versions. Clicking the button does not close the menu. Do you happen to know how I could fix this?
I haven't checked/tried your code, but there is absolutely nothing wrong with Bootstrap, or the Bootstrap Offcanvas component (which displays just fine on mobile).
Its real amazing
Looking for examples with font awesome icons
Amazing content! That's what I needed! Thank you
Thanks! Looking for this but on the Bootstrap 5 documentation there's only an offcanvas
thank DEV community i am just used your templates sidebar
Super interesting. Unfortunately I can’t see any of the examples. Codeply certificate expired?
Working again :)
Hello community, i'm new on bootstrap and i have a question may it can be crazy :
why when i use the code i can't see the colors , it appears all white !
Thank you
Hello, can you please tell me what is the stylesheet link?
Just a quick question but am I allowed to take this work and implement it into my website? I might change some style here and there but take the general template you have built.
I don't wanna be getting into any legal troubles because I'm pretty new to publishing a website online...
i just wanna ask, how i can change the bg color of menu bar from the example 1, as you can see from my qst, im a newbie, sorry
Ah, lovely, when you completely fail all things mobile in a post about responsiveness. This is utter nonsense. Don't use bootstrap. Do some research and work it out, it'll be faar better than this post missing the point completely. Try opening it on a mobile device and you'll see that both all code (while highly illegible and unnecessarily complex) And the demo's And the examples all fail. So this is obviously a how not to guide.
-- Since it looks like you've blocked me because of ... valid critique? Here's my response. I suggest you do some research and tests first before answering.
Codeply is not fully responsive, I tested it on multiple devices (phone, laptops, tablets), platforms (android, windows, ios, osx), multiple browsers (chrome, safari, edge, opera, Firefox), and always there are elements (partly) hidden.
My point was to not use bootstrap in general, learn to use CSS properly, and build things yourself. It certainly has its uses, but in general, I think you're better of without it.
As to your point that the code works: no it doesn't. Using multiple setups, the main content is only partly visible, or even unreachable!
Don't assume when someone criticizes you, they don't do their homework, I did do so but you obviously did not, or you would have at least had the decency to check and acknowledge your mistakes.
"Don't use bootstrap" - The point of this post is using Bootstrap to create a sidebar. Whether or not you choose to is up to you, but please don't respond with ignoramus comments. And unless your mobile device is a gameboy emulator, you'll see that the examples all work responsively and as expected.
Your sidebar examples work for fine for me as well. Thanks for the article!