Modal not working in Nav Item -> Link


I am using Freelancer template. I have created a new Nav Item by duplicating CONTACT from header and Link is setup with modal popup. When I click on the link modal does not appear.

I have verified and compared with portfolio items and my link config appears to be same. What could be wrong?

Nav Item Link

<li class="nav-item mx-0 mx-lg-1" role="presentation"><a href="#loginbox">Login</a></li>


<div role="dialog" tabindex="-1" class="modal" id="loginbox">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title border rounded-0">Modal Title</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button></div>
            <div class="modal-body">
                <p>The content of your modal.</p>
            <div class="modal-footer"><button class="btn btn-light" type="button" data-dismiss="modal">Close</button><button class="btn btn-primary" type="button">Save</button></div>

-- Khalid

You would find your "answer" for your question faster by searching it in google. Anyways... Your link item needs 2 things: what thing it has to toggle(in this case the modal), 2nd the target (ur modal). So let's say you have your own nav-link in attributes in Bootstrap Studio when you add classes or id's and other stuff and that's the thing which you have to put "inside". I will send you below that freelancer bs file with modal example, just look at it and you will simply understand how easy it is to understand how does it work :). Also remember that you have to remove from nav link "id" otherwise it will be rip ;p

Download this bs file

You are missing data-toggle="modal" on your <a> </a> link

i have already included this attribute somehow it is getting missed when i copied it yesterday and even now after I mark it as code block

<a href="#loginbox">Login</a>

Hello DickyKreedz,

I am not able to download your design file. Anyways, I have included data-toggle="modal" and data-target="#loginbox" but nothing worked so far.

Thank you.

I told you that you can't put anything in ur nav link jeez... Anyways look at these screenshots... it's full tutorial how to do that i made it in 2 mins so don't mind my "paint skills". If it still doesn't work for you then you're doing something wrong. If you have problems with so simple stuff first learn how to use bootstrap, learn properly css and html.

First Step Click

2nd Step


3rd Step

enter image description here

Results after clicking "modal" in the menu :)

enter image description here

Thank you for doing that DickyKreedz, and I was just going to do the same thing myself.

I don't understand why the BSS devs can't simply add a target option to the dropdown on buttons and links of "Modal" and then a place to add the Modal's ID. They automate so many other things in the program, but modals get ignored, and there isn't even any info in their tutorials. Even Pinegrow allows you to select a modal as a target for a button or link. I think I requested this as a feature months ago, but it was ignored. Guess the devs want people to figure it out on their own.

No problem man, You're Welcome :) I also have no clue why Dev's didn't do that before in earlier updates. I have been using BSS for 1 year and they didn't add it I also have no clue why did they remove from Carousel that content thing in panel and they've put it as component. I also couldn't use tooltips in BSS till they add the option with tooltips in panels... idk why but when i did js and other stuff to make tooltips it wasn't working for me in BSS, but outside in visual studio code etc it did, really weird tho. Ye, I've tried Pinegrow, but I didn't like it the design etc was really triky to me and not worth it at all, BSS feels the best to me. I understand that BSS is not a tool to "make" making websites like a typical "drag&drop" tool with small editing, but some functions should be added or changed I love Bootstrap Studio, but it kinda feels like devs have other stuff/things to do and BSS is only "side project" not their main project so... ye. Anyways I'm glad that my comment/post was usefull for somebody c:

They removed the Carousel options and turned them into components because it was required as a result of them "unlocking" parts of the Carousel that were previously locked that people were complaining about. Apparently, that's a big thing with this program. The more components they unlock, the less "automated" they can be through the visual UI. I also had the same exact problem with tooltips. I'd add them through the .js, but they wouldn't work until the devs finally added them as options in the UI.

This program is definitely the developers main priority, but they're working on some pretty big upgrades at the moment (incorporating the use of external code editors, multiple monitor support, etc) which is probably why some of the smaller requests are falling by the wayside.

I, too, prefer BSS over Pinegrow. I have both programs, and I use PG for certain tasks, but I do most of my new builds in BSS because it's just a smoother and easier to use program. If they can just make it support multiple monitors, I think it will be nearly perfect.

Ye I understand, but still... the biggest funny fact and thing is ppl are coming to BSS with "mindset" like "oh this is a cool drag&drop web builder!", but the reality is totally different cause after 1 day are like "why i cant do that by drag and drop etc, why it doesnt work like in wordpress or other web builders" etc it just hella funny to me :D. I love BSS for the 50/50 I can make my own components from scratch, put/set them as custom component and use in the future and edit small things etc and the rest like css/some js by myself. Imagine if BSS would ever support custom code as "BSS friendly thing" like you can drag and drop edit etc, but i don't think it wil lever happen ;p and I'm talking about totally 100% bs4 websites not other frameworks etc. I just wish ppl before buying bss would learn the basic stuff to make websites before starting complaining or crying on the forum that something doesnt work at all. Tbh I'm not the most happy about latest updates, but i apprecaite every update so far and I don't need mulltiple monitors support since i use one for making/coding the website and 2nd to display the website so ;p external editors would be cool cause ive started with visual studio code and I'm not the biggest fan of that (sublime i guess so) one in bss. I just didn't like the interface etc in PG and all looks to me like abig chaos tbh, and in bss everything feels so clean even the design etc. I just loved BSS it gave me huge opportiunities to make websites faster etc. My Subscription/license will end in the end of this month and i prolly wont buy lifetime till bss wont have enough new stuff built in ;p

You can use either data-target or href with data-toggle.


I can appreciate some of what you've written. I does annoy me when absolute beginners come here asking the same basic questions over and over because they know nothing about code, but it IS possible to build a basic website without coding in BSS, it will just be VERY basic. The program Mobirise would probably be more suitable for those kinds of folks, or an online builder like Weebly or Wix, where you really don't have the ability to change anything.

I think BSS is the best of both worlds. It allows people with very basic skills to still build a website using one of the templates and the draggable components, but it also allows power users to build site totally from scratch, add their own CSS, JS and custom HTML blocks. Really, what more can you ask for. Also, watching the BSS tutorial videos helps you learn very quickly how CSS works in BSS.

Pinegrow is like BSS on steroids. A lot more powerful, but definitely not as polished, and the UI could use a ground-up redesign by an expert in user interface design. (Webflow has a very well designed UI from what I'm told, but who wants to pay their monthly charges?) I like Pinegrow a lot, and I do use it, but I think there are many areas of the UI that could use improvement.

For me, running a website business, BSS has been a godsend. It's paid for itself many times over. When I found this program, I didn't even hesitate to pay the $60 lifetime price. I think it's a steal. The program is easily worth three times that price, and the fact that they give you forms and 5 hosting slots with it is unbelievable. If you really like BSS, you should renew and buy the $60 version just to support the developers, because they work their butt's off listening to the users and upgrading the program for us frequently. I've never owned a program that got as many upgrades as often as BSS, and most of them based on user's suggestions. That's just awesome.

Basically doing the same as...

$('a[href$="#Modal"]').on( "click", function() {


Yeah, I forgot that Bootstrap also allows you to call the modal with .js

@Twinstream You can ofc, but it's really bad coding habit there's a reason for what "data-target" exist and you should use it :) also nobody who is new will use js for modals and it's more triky to new users, but ye.. overall u're right :x.

@Printninja The problem is that 60$ is alot for me since I'm living in a country where 60 is some money also for my 1 year license paid my friend since for me it was some money, so ye and I'm really thankful to my friend cause if not him Idk what i would do rn.

If Pingerow would have the same UI what Bootstrap Studio got I would move to pinegrow cause it's like really good a "tool" to making websites etc and I also have pinegrow, but i tried to use it for 2 days, but i quit that idea since the ui etc was make me suffer so badly, the design part of Pinegrow is really poor tbh... etc i mean it's not the worst, but it makes for an example me not using it at all so ye. I've tried Mobirise when I was living in UK and It looked really good for people who wanna build fast really good website, but if i good remember there was many "limitations" to editing objects aka components, so... but overall really good tool. I just can't wait how Bootstrap Studio will look like in next year :D

I was just trying to share what I learned when I entered the code provided by the user who asked the question. I discovered that I did not need to use the data-target and could use the href.

Its buried in the Bootstrap 4 documents.


Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.



What country are you living in? Are you a student?

@Printninja Hey, sorry for late reply. Why are you asking tho?


I own a website business, and I've helped out students financially from time-to-time with expenses.

@Printninja Sadly I am not, I didn't graduate my school etc and I'm doing nothing right now, but thanks for explaining why did you ask me. Thanks for asking Sir tho c: