External link on tab

Is it possible to add an external link to a tab?

I have created this (will be deleted in 1 month):


That has 3 tabs, linking to Google, CNN and Flickr - I want it to open the URL defined, not show tab contents - Is that possible?

Yes, you can just delete the Data- attribute and that should work. I believe the bootstrap.js sees that and stops the normal link behavior.

Just select the link in the Live View pane and below that click on the HTML pane and then the Attribute pane below that. Click the X icon at the right of the data-toggle line then click Apply.


Hi Saj,

I don't have the option of removing the data-toggle: No data-toggle removal

Ah I see, Bootstrap 4.1 projects don't have it, seems only 3.3 does. I must have thought you were using Bootstrap 3.3 project for whatever reason.

So the thing to do would be to drag/drop in a List component instead and then add the appropriate classes to the UL/LI/A elements. You can leave in your current Tabs component as a guide to use on what classes etc... There shouldn't be a need for the role because your not going to be using the links like a tab. It's what I was first going to suggest but I noticed in my test sample I could just delete the attribute.

You could also add the data-toggle attribute with a blank value to override it, but that really wouldn't be semantic though so I'd stick with the List component instead.


Hi Saj,

Thank you - Instead of having my own LI/A items in the structure - I'd much rather overwrite the data-control, here is my solution:

Overwritten data-control



Great, glad you have a solution :)



I have tried this and it doesn't work, I want to be able to create a link say in the middle of a paragraph and once clicked give the user the ability to download a document such as a word document, any ideas, as it is the only links are images and pages.


You need to add files to an external location that you have uploaded them to. If you put them on the server that the site will reside on (I tend to use a directory named "downloads" for mine, you can then use an Absolute path that will work when viewed and clicked in the browser preview. You cannot use relative paths to items that are not imported into BSS so you do need to use full Absolute URL's for them. And they work just fine then :)

Hi Jo With regards to your reply above, I get the file location (on my server) can you give an example of an absolute path please? Also will the file aromatically download when the link is clicked on or will it preview? Thanks in advance

Absolute vs. Relative paths would be:

Absolute: https://www.yourdomain.com/yourfilename.html https://www.yourdomain.com/yourfilename.jpg https://www.yourdomain.com/yourfilename.js and so on, it means the full file location

Relative paths are just paths that read the location "relative" to the page that's being loaded so usually if you put all your html files into the root or main directory of your server, you would only have to reference the location of the file such as if you put images into directories, or have downloadable files in a downloads directory you would just reference them by location on your server such as

img/imagefilename.jpg or downloads/downloadablefile.pdf

If you put html pages into a folder (which makes things harder to manipulate for me so I don't lol), then you'd have to use the ../ in front of the path to tell the browser to move up a directory to find the files so if you have your html files in a directory named "pages", but your images are in a directory on the same level as the pages directory, then you would need to reference it like so:


That says for it to go up a level and then go into the images folder and find the file name referenced.

Most of the time people put their html files in the root main directory of the server or website. Then you can just use relative links without referencing the https://... because the browser will know that if it doesn't see all that, that the items are either in the same level directory or in directories below it depending on what you are telling it to find and where. This also makes Nav components easier to manage as well, especially in BSS. Navs usually just have the name of the page in them if they are pages of your website such as contact.html would be the path to get to the contact page, because it's in the same directory or location as the page it's being clicked from. No need to reference anything else.

Hope that makes sense and helps.

Hi Jo Thank you so much for your detailed response and the time you have taken I do appreciate it, I will try this out and hopefully it will work ok!!

You're quite welcome, good luck!