Question 61292 in Twitter Bootstrap Question posted in

Why I get this broken Bootstrap carousel in the VStudio 2019 standard project template?-Twitter bootstrap

When I create a new Web MVC project in VisualStudio 2019 (v16.11) I get this strange effect on carousel buttons. In particular, they are shaded and bordered.

I’ve checked, Visual Studio is using Bootstrap v4.3.1 in this template.

Down below the code I copied & pasted from the standard Bootstrap 4 carousel template.

Why carousel buttons are not rendering correctly?

Original Home/Index.cshtml page screenshot:

enter image description here

After copying & pasting the relevant Bootstrap 4 carousel code screenshot:

enter image description here

The final page source:

@{
   ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p></div>

@* Copied carousel code starts here *@

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
    <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
    <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :  " preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em"> </text></svg>

        <div class="container">
            <div class="carousel-caption text-left">
                <h1>Example headline.</h1>
                <p>Some representative placeholder content for the first slide of the carousel.</p>
                <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
            </div>
        </div>
    </div>
    <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :  " preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em"> </text></svg>

        <div class="container">
            <div class="carousel-caption">
                <h1>Another example headline.</h1>
                <p>Some representative placeholder content for the second slide of the carousel.</p>
                <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
            </div>
        </div>
    </div>
    <div class="carousel-item active">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :  " preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em"> </text></svg>

        <div class="container">
            <div class="carousel-caption text-right">
                <h1>One more for good measure.</h1>
                <p>Some representative placeholder content for the third slide of this carousel.</p>
                <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
            </div>
        </div>
    </div>
</div>
<button class="carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</button>

EDIT: This is the header of the wwwrootlibbootstrapdistcssboostrap.css file

/*!
* Bootstrap v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT 
(https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
Tags:

2

Answers


  1. 0

    I have tried to reproduce the issue on Visual Studio 2019. I created an Asp.Net Core MVC project that has 4.3.1 JQuery by default.

    When I added the carousel code then it generates the result you shared in the question.

    It looks like the issue is caused by some missing file references.

    To fix the issue, I suggest you add the code below in the Head part of the _Layout.cshtml page.

    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    After that try to run the project.

    Output:

    enter image description here

    Later, you could save those files and add them to your project.

    Login or Signup to reply.
  2. 0

    Bootstrap v4.3.1 is used in the template but you copied carousel from v4.6.x example:

    https://getbootstrap.com/docs/4.6/examples/carousel/

    Instead copy carousel from v4.3.x example:

    https://getbootstrap.com/docs/4.3/examples/carousel/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search