5
Replies
To start with, in Bootstrap, content can only be placed in columns for it to function properly. The following is a screen shot from one of my videos:
As for the question, please show the code so that we can see where it has gone wrong.
Hello, i mean these Tab´s.
Thank u for your support!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<!-- body code goes here -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<div class="container"></div>
<div class="container-fluid">
<ul id="clothingnav1" class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active" href="#home1" id="hometab1" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Tab 1</a> </li>
<li class="nav-item"> <a class="nav-link" href="#paneTwo1" role="tab" id="hatstab1" data-toggle="tab" aria-controls="hats">Tab 2</a> </li>
<!-- Dropdown -->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <em><strong> Tab 3 Dropdown </strong></em></a>
<div class="dropdown-menu"> <a class="dropdown-item" href="#tabDropDownOne1" role="tab" id="dropdownshoestab1" data-toggle="tab" aria-controls="dropdownShoes">Dropdown Link 1</a> <a class="dropdown-item" href="#tabDropDownTwo1" role="tab" id="dropdownbootstab1" data-toggle="tab" aria-controls="dropdownBoots">Dropdown Link 2</a> </div>
</li>
</ul>
<!-- Content Panel -->
<div id="clothingnavcontent1" class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="home1" aria-labelledby="hometab1">
<p>Content in <b>Tab Panel 1</b></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="paneTwo1" aria-labelledby="hatstab1">
<p>Content 2</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="tabDropDownOne1" aria-labelledby="dropdownshoestab1">
<p>Dropdown content#1</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="tabDropDownTwo1" aria-labelledby="dropdownbootstab1">
<p>Dropdown content#2</p>
</div>
</div>
</div>
</body>
</html>
Hi @DomiBETEP,
From Dreamweaver's Live View mode, use Ctrl + Click to open tabs.
That said, Dreameaver is not a browser. It's web authoring software.
- Code View is for working with code.
- Design View is for quick text editing.
- Live View is for checking layout and styles.
But previewing your pages in REAL browsers and mobile devices (F12) is essential because that's how people will access your site.
Hello,
I am new to Dreamweaver.
If I add a container with Bootstrap and then add a Bootstrap tab in this container, it should work that I can switch between these tabs in the live view, right?
I could change the content of the tab via the code, but that's not how Dreamweaver should work.
Thanks
By @DomiBETEP
I think that you are correct, that is not how a modern paid for IDE should work.
1. Design view should allow you to change the content.
2, Live view should allow you to test the app as you would in a browser..
AdChoices