again.
I'm trying to implement Bootstrap's Carousel into my webpage. I'm running in to some issues, however.
The images of the carousel show up stacked on top of each other. The navigation buttons don't show up. This is with Bootstrap's CSS v4.0.0 Beta.
If I change the Bootstrap CSS file version to say 3.7, the carousel works, but the other stuff depending on bootstrap 4 of course stop working.
Is this a mistake I'm looking over, or is this a bug in Bootstrap 4Beta?
Here is the HTML code.
/*Custom Irie Vibes colors.*/
.bg-irie-yellow {
background-color: #E7DD96;
}
.bg-irie-grey {
background-color: #41403E;
}
.bg-irie-red{
background-color: #CF7654;
}
.text-white {
color: white;
}
/*Only applies to classes irie-green when navbar-brand is also used*/
.navbar-brand.irie-green{
color: #EDCE4F;
font-weight: bolder;
text-shadow: 9BA573 1 1 20px;
}
/*Makes the navbar just a little thinner than default (overwrite)*/
.navbar-nav > li > a {
padding-top:5px !important;
padding-bottom:5px !important;
}
.navbar {
min-height:32px !important;
}
/*A fix for Bootstrap's broken img-responsive*/
.img-responsive {
max-width:100%;
padding: 10px;
}
/*Leave some space between the content and the navbar*/
.container.content{
padding-top: 45px;
}
/*Styling for the Language buttons on the right*/
.nav-link.language {
font-style: oblique;
letter-spacing: 0.5px;
}
/*Change the color of the dropdown menu's*/
.navbar-nav > li > .dropdown-menu {
background-color: #CF7654;
padding-left: 20px;
border: 0px;
}
.nav-link{
padding: .2rem 1rem;
}<html>
<head>
<!-- Setting things up so they work correctly. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/src/img/favicon.png" />
<!-- Custom style sheet -->
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Load overwrite style sheet as last to enable overwriting Bootstrap features -->
<link rel="stylesheet" href="/src/css/main.css">
<title>Irie Vibes Roots Festival - Home</title>
</head>
<body class="bg-irie-yellow">
<header>
<!-- The header contains everything that displays as or above the nav-bar -->
<!--HEADER IMAGE-->
<div class="bg-irie-grey text-center">
<img class="img-responsive" src="http://i.imgur.com/BUu5PPO.png">
</div>
<!--NAVIGATION-->
<nav class="navbar navbar-expand-lg navbar-dark bg-irie-red">
<div class="container">
<!-- This allows the Navbar to become smaller on a smaller mobile device. -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"></a>
<a id="irie-green" class="navbar-brand irie-green" href="#">3rd Week of July</a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tickets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Programme</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Irie Vibes For Kids</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Info<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="nav-link drop-2" href="#">Green Forward</a></li>
<li><a class="nav-link drop-2" href="#">Volunteers</a></li>
<li><a class="nav-link drop-2" href="#">Motivation</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Partners</a>
</li>
</ul>
<span class="navbar-text">
<!-- This is the language selector. -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link language text-white" href="#">Nederlands</a>
</li>
<li class="nav-item active">
<a class="nav-link language text-white" href="#">English <span class="sr-only">(current)</span></a>
</li>
</ul>
</span>
</div>
</div>
</nav>
</header>
<!-- This is the main container that encapsulates evberything. -->
<div id="content" class="container content">
<!-- Row containing Carousel and News -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-xs-6">
<!-- Carousel -->
<div id="Slideshow" class="carousel slide" data-ride="carousel">
<!-- Indicator Dot Navigation -->
<!-- Wrapper for the slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="rounded" src="/src/img/slideshow/slide1.png" alt="Slide1"/>
<div class="carousel-caption ">
<p>Slider 1</p>
</div>
</div>
<div class="item">
<img class="rounded" src="/src/img/slideshow/slide2.png" alt="Slide2"/>
<div class="carousel-caption ">
<p>Slider 2</p>
</div>
</div>
<!-- Navigation Control Buttons -->
<a class="left carousel-control" href="#Slideshow" role="button" data-slide="prev">
<span class="flyphicon flyphicon-shevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#Slideshow" role="button" data-slide="next">
<span class="flyphicon flyphicon-shevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
</body>
<!--Loading bootstrap scripts at the end of the page to prevent slowdowns-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>Thanks in advance!
One love, Anna