bootstrap not working properly with visual studio 2017
Question
I am try to create a carousel using bootstrap in visual studio 2017. I installed jquery and bootstrap using NuGet package manager. And to check its working, i generated a bootstrap snippet for carousel.
Here's the code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Homepage</title> <link href="Content/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="row"> <div id="my-carousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#my-carousel" data-slide-to="0" class="active"></li> <li data-target="#my-carousel" data-slide-to="1"></li> <li data-target="#my-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img alt="First slide" src="http://placehold.it/1200x675&text=First+slide"> </div> <div class="item"> <img alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide"> </div> <div class="item"> <img alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <script src="Scripts/jquery-3.3.1.min.js"></script> <script src="Scripts/bootstrap.min.js"></script> </body> </html>
The output of the above code is not as expected, as all image slides are placed one below the other and not as a carousel.
4 answers
solution1
3 ACCPTED 2019-03-15 13:19:54
Use the correct structure for the Bootstrap 4 Carousel .
The markup you're using is for 3.x. For example .item is now .carousel-item .
solution2
2 2019-03-15 13:19:50
I think you forgot proper.js
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Homepage</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="row"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="http://placehold.it/1200x675&text=First+slide" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="http://placehold.it/1200x675&text=Second+slide" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="http://placehold.it/1200x675&text=Third+slide" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script></script> </body> </html>
solution3
0 2019-03-15 13:19:41
Visual studio must have gotten messed up with routing. Check your file structure to be sure those files are really there and make sure you are linking to them properly. If that doesn't work you could always get the cdn or get the files yourself and route them.
solution4
0 2019-03-15 13:25:33
Not sure it's anything to do with Visual Studio - but I can see that you've named them item instead of the newer carousel-item I've included the bootstrap CDN in my example below - so you may need to check your file structure too, if it's still not working for you.
He's your example, working but with the carousel-item class.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Homepage</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div id="my-carousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#my-carousel" data-slide-to="0" class="active"></li> <li data-target="#my-carousel" data-slide-to="1"></li> <li data-target="#my-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img alt="First slide" src="http://placehold.it/1200x675&text=First+slide"> </div> <div class="carousel-item"> <img alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide"> </div> <div class="carousel-item"> <img alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
bootstrap not working properly with visual studio
Bootstrap template created by Visual Studio 2013 not working properly
No intellisense for bootstrap classes in html files on Angular - visual studio 2017
Visual Studio 2017 HTML Previewer
visual studio 2017 html tag selector
Vue mobile app project with visual studio 2017
No intellisense for d3.js in Visual Studio 2017
How to disable Auto ID in Visual Studio 2017
Visual Studio 2017 Movierental date settings
Bootstrap - Cards not working properly
Related Tags