I am using newest Bootstrap 5 and it says it doesn’t work with jQuery anymore, but with VanillaJS, which appears to be a new JS framework… The thing is, many people always used “vanilla” to refer to plain or native JS. Has this changed, and now “Vanilla JS” is the name of a framework, or am I missing something? Answer
Tag: bootstrap-5
Bootstrap toggler doesn’t hide
I am making a website using Bootstrap 5. The navbar can show the navigation when it is in a responsive viewport and I click the toggler icon, but doesn’t hide if I click it again. Looking inside the developer tools I see that the class show is still present. My html navbar: The Bootstrap scripts: The status of toggler before
Bootstrap 5 Javascript Functions not Working in Rails 7 app
I’m trying to set up my first Rails 7 app and have installed Bootstrap 5 properly (you can see by the CSS) and gotten rid of all the error messages, but the javascript functions (i.e. dropdown menus, offcanvas, etc.) aren’t working. I have tested it with this code: And both console.log statments produce the correct result, leading me to believe
Bootstrap modal being rendered inside side bar
I’m losing my head over this modal which keeps showing up inside my side div area, I haven’t found anything about it on the bootstrp5 documentation nor on any online forums. I just need it to render centered on the page, and the fade effect to affect all background, as per the bootstrap documentation (https://getbootstrap.com/docs/5.0/components/modal/). But I haven’t found any
Bootstrap 5: Hide/Show navbar after scroll 300px
I want to hide the Bootstrap navbar after scrolling for 300px. At the moment I’m using the following code (from here). It works but the navbar hides immediately after scrolling. I want it to hide after 300px. Is there a way to add that to the script? HTML: Javascript: CSS: Answer Hello You can solve this problem by modifying the
jQuery selector input[type=text]:nth-child(2) not working
I’m unable to use the ids or the class names associated with the inputs due to how they’re randomly generated on input. The render looks like this: I have no control of the render and can not change any content. So instead I was trying to grab the second text input and add a label before it. .dateSearch input[type=text] will
How to change the element position?
In my browsers Firefox and Chrome I don’t get any errors or warnings. It’s just practice. I’m taking a course in javascript and Dynamic HTML. If anybody cares to look at my code and tell me what I’m doing wrong I’d appreciate it. There’s got to be something that I’m not getting right. I want to create new divs as
Bootstrap 5: align icon and text within Button
I want to align icons and text in a modal body: This is how I add the buttons: I also tried this: can I achieve this with bootstrap5 alone? Answer You were close with your delete button, .text-start is the key but it should be applied to the buttons. You can also remove the <p>. In the following snippet I
Click counter Bootstrap carousel button
Unfortunately, this is a remarkable stupid question. However, I could not figure out how to make a working click counter für the Bootstrap carousel button. The problem is the span element for the previous and next icons. The button counter does not count clicks on the repective span element. Answer Add your counter data attribute to the two buttons (this
How switch Bootstrap 5 tabs (button version) with javascipt
I want to programmable switch tabs (using bootstrap 5). Bootsrap docs say: As a best practice, we recommend using elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location. So I want use buttons instead links. Code: Problem is wrong selector. But I have no idea