So everything appears to be working when I load up the html on bootply, but when I push it to my webpage (Github page) the carousel loads, but doesn't do any scrolling.
Heres the HTML I have pushed to the site, its exactly the same on Bootply except for the addition of the script near the top, which I read was needed to make it work, but it doesnt seem to do anything. It wasnt necessary on the Bootply apparently.
<head>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(function(){
$('#carousel-content').carousel();
});
</script>
<body>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class="nav">
<p><br><br></p>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Projects</li>
<li role="presentation">About Me</li>
<li role="presentation">Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="potrait">
<p><br><br></p>
<img src = "https://lh3.googleusercontent.com/-eQB0B8kGRiw/AAAAAAAAAAI/AAAAAAAAAAA/gRPFLBygtI8/photo.jpg" class="center-block img-circle" height="200" width="200">
</div>
<div class="info">
<p><br><br></p>
<h1 class="text-center"> Matt Kowalczykowski </h1>
<h2 class="text-center"> Mechatronics Engineering Student </h2>
<p><br><br></p>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-centered">
<div id="carousel-content" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-content" data-slide-to="0" class="active"></li>
<li data-target="#carousel-content" data-slide-to="1"></li>
<li data-target="#carousel-content" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://images.wisegeek.com/robots-assembling-car-bodies.jpg">
<div class="carousel-caption">
<h3>Mechanical</h3>
</div>
</div>
<div class="item">
<img src="http://seetech-corp.com/engineering/wp-content/uploads/2011/07/seetech-electrical-engineering-cabinets.jpg">
<div class="carousel-caption">
<h3>Electrical</h3>
</div>
</div>
<div class="item">
<img src="http://cdn.onextrapixel.com/wp-content/uploads/2013/07/clean-coding-best-practices.jpg">
<div class="carousel-caption">
<h3>Programming</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-content" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-content" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</body>
You don't need that top JavaScript, but you do need to load the Bootstrap Javascript files. Preferably right before the
</body>
tag.
<script src="link/to/bootstrap.min.js"></script>
For you I think it would be dist/js/bootstrap.min.js
You're not including bootstrap.js.
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Related
Everything works in My bootstrap carousel, except the slide effect doesn't happen even though I've added the "slide" CSS tag. The images quickly change; they don't slide.
Couple notes:
I'm using bootstrap v4.3.1.
I used the same mark-up as the bootstrap documentation.
My bootstrap javascript file is after the jquery file.
Any ideas?
Here is my HTML.
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slider-1.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/slider-2.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/slider-3.png" class="d-block w-100" />
</div>
</div>
<div class="carousel-controls">
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" 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>
</div>
</div>
</div>
</body>
<script src="/shared/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</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">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459__340.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459__340.png" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459__340.png" class="d-block w-100" />
</div>
</div>
<div class="carousel-controls">
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" 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>
</div>
</div>
</div>
</body>
<footer>
<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>
<script src="script.js"></script>
</footer>
</html>
I used your code in the <body> </body> section in repl.it and it works but there are some sizing issues tho. copied the code to here you can run it and see for yourself :) It slides as well
Edit*
I see you are inserting the carousel into a row and col, don't think you should do that but if you want to you need to make the correct size adjustments else the carousel will break the row and col each time it slides.
remove this section in your code inorder to make your carousel work properly
<div class="row">
<div class="col">
<div class="row">
Also, I think the reason why yours did not work is because of your HTML structure, and your bootstrap js and CSS CDNS wasn't imported correctly.
getbootstrap.com has a starter/Boiler template that you can always use with the correct imports, layout etc.
See here
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
Image slider not working when i click on the arrows or when i try to manually change the image.
With my limited knowledge, i tried editing the code with no luck
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<div class="container" id="slider"><!-- Container Starts -->
<div class="col-md-12"><!-- col-md-12 Starts -->
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- carousel slide Starts -->
<ol class="carousel-indicators"><!-- carousel-indicators Starts -->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol><!-- carousel-indicators Ends -->
<div class="carousel-inner"><!-- carousel-inner Starts -->
<div class="item-active">
<img src="admin_panel/slides_images/1.jpg" alt="slide 1">
</div>
<div class="item">
<img src="admin_panel/slides_images/2.jpg" alt="slide 2">
</div>
<div class="item">
<img src="admin_panel/slides_images/3.jpg" alt="slide 3">
</div>
<div class="item">
<img src="admin_panel/slides_images/4.jpg" alt="slide 4">
</div>
</div><!-- carousel-inner Ends -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><!-- left carousel-control Starts -->
<span class="glyphicon glyphicon-chevron-left"> </span>
<span class="sr-only"> Previous </span>
</a><!-- left carousel-control Ends -->
<a class="right carousel-control" href="#myCarousel" data-slide="next"><!-- right carousel-control Starts -->
<span class="glyphicon glyphicon-chevron-right"> </span>
<span class="sr-only"> Next </span>
</a><!-- right carousel-control Ends -->
</div><!-- carousel slide Ends -->
</div><!-- col-md-12 Ends -->
</div><!-- Container Ends -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>
The slider is supposed to change when i click on the arrow or try and change it manually. No errors appear, just not the expected result.
Use The Below Code
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="slide 1" style="width:100%;">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="slide 2" style="width:100%;">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="slide 3" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="slide 4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Container Ends -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>
It's my first time using Bootstrap Carousel, I did exactly what the documentation says, I have all four slides showing on top of each other. Any hints?
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I also included this JS function:
$(function(){
$('.carousel').carousel()
});
This is the header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--- Font Awsome -->
<script src="https://use.fontawesome.com/4c7009c904.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- my CSS -->
<link rel="stylesheet" href="css/styles.css">
At the bottom of the I have the following:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/script.js"></script>
You have wrong classes setted in the div
it's not div class="carousel-item" it's just div class="item"
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've tried that in fiddle and it's working.
Regards
I'm working with the Carousel within bootstrap. I have tested this with many different variations. Even when I copy and paste the example code from bootstrap it still does not work. I have verified that the file paths are accurate. The controls still appear but they do not seemed to be linked to anything. I've seen a few places that mention a "function" but when I add this in nothing changes.
<div class="container">
<div id="myCarousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="pics/01.jpg" style="max-width: 100%;" />
<div class="carousel-caption">
This should be first picture
</div>
</div>
<div class="item">
<img src="pics/02.jpg" style="max-width: 100%;" />
<div class="carousel-caption">
This should be another picture
</div>
</div>
<div class="item">
<img src="pics/03.jpg" style="max-width: 100%;" />
<div class="carousel-caption">
This is the last picture
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
This is my code relevant to the carousel and I have below that these two js script calls
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I'm sure that its something simple but I cannot find what is wrong with this.
You changed the id of carousel but you didn't update any of the controls referencing that id. Your carousel-indicators and carousel-control need to reference "myCarousel-example-generic" not "carousel-example-generic".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<div id="myCarousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel-example-generic" data-slide-to="1"></li>
<li data-target="#myCarousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/750x150?text=1" style="max-width: 100%;" />
<div class="carousel-caption">
This should be first picture
</div>
</div>
<div class="item">
<img src="http://placehold.it/750x150?text=2" style="max-width: 100%;" />
<div class="carousel-caption">
This should be another picture
</div>
</div>
<div class="item">
<img src="http://placehold.it/750x150?text=3" style="max-width: 100%;" />
<div class="carousel-caption">
This is the last picture
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
I am trying to make my bootstrap carousel the full width of the page, thinking that that will look the best. I've looked it up and nothing I tried worked, though. Also, if you think that making it a different size would be better, I would love to hear! I'm not great with layout and I'm trying to work on it. Also, my pictures are in SD even though they were HD. Should I link them in the same folder as my html and css files instead of getting them straight from the internet?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Website Template</title>
<!-- links to the css page and bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!-- BEGIN NAVBAR -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li><a class="" href="#">Text</a></li>
</ul>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li class="dropdown">
Dropdown <b class="caret"></b> <ul class="dropdown-menu">
<li>Text</li>
<li class="divider"></li>
<li class="dropdown-header">Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END NAVBAR -->
<div class="container">
<!-- CAROUSEL START -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!--Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://36646d87786feafc0611-0338bbbce19fc98919c6293def4c5554.r0.cf1.rackcdn.com/images/FiGZ9r3D3E82.878x0.Z-Z96KYq.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>BLAH</p>
</div>
</div>
<div class="item">
<img src="https://media.licdn.com/mpr/mpr/p/2/005/096/045/19d71d5.jpg" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>BLAH BLAH</p>
</div>
</div>
<div class="item">
<img src="http://d3psvddqt9zx7g.cloudfront.net/blog/wp-content/uploads/2015/05/lol1-2.jpg" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>BLAH BLAH BLAH</p>
</div>
</div>
</div>
<!--Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--CAROUSEL END -->
</div>
</body>
</html>
CSS
body {
padding-top: 50px;
padding-bottom: 20px;
}
.carousel img {
top: 0;
left: 0;
min-width: 100%;
height: 550px;
max-height: 550px;
width: auto;
}
Just remove the container like in this fiddle
https://jsfiddle.net/zdxq5c85/
<!-- CAROUSEL START -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!--Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://36646d87786feafc0611-0338bbbce19fc98919c6293def4c5554.r0.cf1.rackcdn.com/images/FiGZ9r3D3E82.878x0.Z-Z96KYq.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>BLAH</p>
</div>
</div>
<div class="item">
<img src="https://media.licdn.com/mpr/mpr/p/2/005/096/045/19d71d5.jpg" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>BLAH BLAH</p>
</div>
</div>
<div class="item">
<img src="http://d3psvddqt9zx7g.cloudfront.net/blog/wp-content/uploads/2015/05/lol1-2.jpg" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>BLAH BLAH BLAH</p>
</div>
</div>
</div>
<!--Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--CAROUSEL END -->