My Tab Pane contents for one tab are shwoing in all of the tabs. How to fix?

I imported Bootstrap's built in "Tab" element. I added some elements meant to be only for tab #1 in the "tab content" for tab 1. Howver, when clicking the other 5 tabs, all the content for tab one shows up on all of them. How do I fix this? I checked the code and organization 100 times and I cannot for the life of me figure out what's wrong.

Does this problem occur in the app or when you're previewing the site in your browser? If it's in the app and your structure is correct, I suspect you're not actually switching the tabs. You need to select the tab and then click the "Show" button in the toolbar above the canvas in order to view its contents. Otherwise, you need to check the tabs' href attributes ("#tab-1", "#tab-2", etc.) and make sure they match the tab panes' ids ("tab-1", "tab-2", etc.).