Participant

Question

Inserting Carrousel Issue

Forum|Forum|2 years ago
March 6, 2023
2 replies
425 views

I am completely new to dreamweaver with no coding experience, and I am working on updating a website using different tutorials. I am trying to add in an image carrousel, but whenever I click insert-boostrap components- carrousel; it comes up with a popup saying:

"The component is not fully compatible with the Boostrap CSS/JS File (lower than v4.4). A new Bootstrap CSS/JS File will be created and linked from the document".

When I click continue, it adds the images as three seperate ones, not in a carrousel. I am in Live view, and have tried inserting it from the actual design, and the code, neither is working.

Does anyone know how to fix this?

This topic has been closed for replies.

B

Ben M

Community Expert

It's possible the template you are using has an older version of Bootstrap and Dreamweaver's component in the latest version needs a newer version. After clicking continue can you confirm the new files are in your defined site?

Also can we see the page uploaded somewhere to see what is going on?

M

Mackenzie5CAFAuthor

Participant

Hi,

Thanks for responding! It is very rough right now, I am just trying to figure out how the platform works, but here is the part that's not working. As you can see the carrousel came out as three seperate images.

Preview Link

Thanks.

Nancy OShea

Community Expert

That link is useless to us. Only you can see it.

To test your work, you need to upload files to your website's server. If you don't have a hosting server, get one.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Bootstrap components only work in documents containing links to Bootstrap CSS & JS scripts.

Without them, you won't see much of anything.

By the way, you need to know how to work with code and more specifically, Bootstrap classes. Without fundamental coding skills, you'll be lost & totally frustrated using Dreamweaver.

Read chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/
- https://www.w3schools.com/bootstrap/

Meanwhile, copy & paste the following code into a new, blank document. File > SaveAs Bootstrap.html. This is a mobile-first Bootstrap Starter page.

<!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>Bootstrap 4.3 Starter</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.carousel-caption {
background: rgba(230,28,31,0.5);
color: rgba(0,0,0,1)
}
</style>
</head>
<body>
<nav id="topNav" class="navbar navbar-top navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand mx-auto" href="index.html">
<!--Your logo goes here-->
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item current">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">sub-1a</a>
<a class="dropdown-item" href="#">sub-1b</a>
<a class="dropdown-item" href="#">sub-1c</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!--BEGIN CAROUSEL-->
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://dummyimage.com/1200x300" alt="placeholder">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/1200x300" alt="placeholder">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Amet fuga illo voluptatibus.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/1200x300" alt="placeholder">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-5">Bootstrap with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-dark btn-lg" href="https://getbootstrap.com/docs/4.0/components/jumbotron/" role="button">Learn more</a>
</p>
</div>
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-thumbnail" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
</div>
<hr class="my-4">
<div class="row">
<footer class="col">
<small>© 2013 Footer goes here</small>
</footer>
</div>
</div>

<!--first jQuery then popper then Bootstrap js-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Hope that helps.

Nancy O'Shea— Product User & Community Expert

M

Mackenzie5CAFAuthor

Participant

Hi,

Thank you so much, that makes sense and I will try out the coding links you sent!!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded