7
Replies
How can I get v5.3 dreanweaver cam with what I loaded
By @joe34597425kw29
Well even the Bootstrap 5 official website doesn't have links to v5.3 css/javascript........it's still at v5.0..........hmmm.
https://getbootstrap.com/docs/5.0/getting-started/introduction/
If you want version 5.3 then copy the links to the css/javascript from a hosted cdn website and paste them in your Dreamweaver page:
https://cdnjs.com/libraries/bootstrap/5.3.2
However you will not be able to use any of the default layouts or css styling which is included in the current version of Dreamweaver as they are for version 4 of Bootstrap............so you'll need to consult the official Bootstrap 5 website for any components and css classes you wish to use.
I don't think this is going to be suited to you so you may want to consider to continue to use version 4 which is the current version in Dreamweaver. There is nothing fundamentally wrong with using version 4 if you don't care much about whether you use jquery or javascript and are not a serious developer. For serious developers then they should be using version 5 going forward.
You could also consider using a different editor should you want Bootstrap 5 included as default which may help depending upon your skill and knowledge.
What is it that jquery ui tabs offer that draws you to want to use them as opposed to the Bootstrap tabs in v4 or v5?
Replace what you have now with this Bootstrap 4 example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<br>
<div class="container">
<h2>Toggleable Tabs</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>
This is what it looks like:
AdChoices