So I'm messing around with the new bootstrap V3, and there is absolutely one thing that is driving me insane. There is no space between a fixed top navbar and the item that follows it. I've tried changing the padding on the item(whether it be jumbotron or carousel) and the padding on the navbar to no avail. Its literally driving me insane. any fixes?
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
Gaming
<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 class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>News</li>
<li>Videos</li>
<li>Shows</li>
<li>Cheats</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-
toggle="dropdown">Forums<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>General</li>
<li>Help</li>
<li>Games</li>
</ul>
</li>
<li>eSports</li>
</ul>
</div>
</div>
</div>
<div class="divider"></div>
<div class="container">
<div id="myCarousel" class="carousel slide">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
<img src="img/banner.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.
<a title="Bootstrap 3" href="http://getbootstrap.com" class="">Bootstrap 3 RC 1
is now available!</a></p>
<p><a class="btn btn-large btn-primary" href="#">Sign up today</a>
</p></div>
</div>
</div>
<div class="item">
<img src="img/banner.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names
have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/banner.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
The bootstrap documentation recommends adding top padding to the <body> - equal to the height of your navbar:
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>
body {
padding-top: 50px; /* Whatever the height of your navbar is; the
default is 50px */
}
Related
I'm following this example https://startbootstrap.com/snippets/half-slider/
I'm trying to get image smaller and center
I updated css to reduce size
min-height: 350px;
max-width: 900px;
But it's left bound and sliders icons are stuck to left and right
any pointers?
If i not mistaken what you are asking is make image smaller and center using the example you can do like this at css change this
#carouselExampleIndicators{
margin: auto;
min-height: 350px;
max-width: 900px;
overflow: hidden;
}
.carousel-item {
height: 65vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<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" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/RCAhiGJsUUE/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">First Slide</h3>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/wfh8dDlNFOk/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">Second Slide</h3>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/O7fzqFEfLlo/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">Third Slide</h3>
<p class="lead">This is a description for the third slide.</p>
</div>
</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>
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1 class="font-weight-light">Half Page Image Slider</h1>
<p class="lead">The background images for the slider are set directly in the HTML using inline CSS. The images in this snippet are from Unsplash!</p>
</div>
</section>
Hope this helps.
The original example is setting image by using background-image property. If you want to change the width of the image without changing the width of the carousel, just use <img> tag to insert images and style those elements.
.carousel-item {
height: 65vh;
min-height: 350px;
background: no-repeat center center scroll;
}
.carousel-item>img{
max-width:900px;
height:100%;
margin:auto;
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<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" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active">
<img src="https://source.unsplash.com/RCAhiGJsUUE/1920x1080"/>
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">First Slide</h3>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item">
<img src="https://source.unsplash.com/wfh8dDlNFOk/1920x1080"/>
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">Second Slide</h3>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="">
<img src="https://source.unsplash.com/O7fzqFEfLlo/1920x1080')"/>
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">Third Slide</h3>
<p class="lead">This is a description for the third slide.</p>
</div>
</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>
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1 class="font-weight-light">Half Page Image Slider</h1>
<p class="lead">The background images for the slider are set directly in the HTML using inline CSS. The images in this snippet are from Unsplash!</p>
</div>
</section>
This one solved my issue
#carouselExampleIndicators{
margin: auto;
min-height: 550px;
max-width: 900px;
overflow: hidden;
}
.carousel-item{
overflow: hidden; min-height: 550px; max-width: 900px; margin: 0 auto;
}
Using Bootstrap carousel. The left and right controls are not aligned. The right control chevron work fine but the left is causing some problems. It seems to drop lower and lower when the image become larger. I've tried using CSS like so:
.carousel-control .icon-prev, .carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left, .carousel-control
.glyphicon-chevron-right, .glyphicon-circle-arrow-left,
.carousel-control .glyphicon-circle-arrow-left,
.carousel-control .glyphicon-circle-arrow-right {
display: inline-block;
position: absolute;
top: 50%;
z-index: 5;
}
But that didn't help at all. Here is the HTML script. Any clues?
<script type="text/dust" id="posting-detail-template">
<nav class="posting-detail-navbar navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="backbutton">
<button type="button" class="btn btn-default navbar-btn posting-detail-reset-button navbar-left">
<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> Back
</button>
<p class="navbar-text navbar-left"><b>{title} - ${price}</b></p>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-7">
<div class="posting-detail-carousel">
<div class="container-fluid">
<h2>{title}</h2>
<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" role="listbox">
<div class="item active">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
<div class="item">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
<div class="item">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
<div class="item">
<img src="img/sample-apartment.jpeg" alt="Apartment" align="middle">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" 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>
<div class="pull-right">
<div class="button-group posting-detail-buttons btn-group" role="group">
<button type="button" class="favorite btn btn-warning">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Favorite
</button>
<button type="button" class="contact btn btn-success">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact
</button>
</div>
</div>
<div class="posting-detail-list panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{title} - ${price}</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item"><b>Description:</b> {description}</li>
<li class="list-group-item"><b>Posted:</b> {date}</li>
<li class="list-group-item"><b>Number of Bedrooms:</b> {numBed}</li>
<li class="list-group-item"><b>Number of Bathrooms:</b> {numBath}</li>
<li class="list-group-item"><b>Number of Tenants:</b> {numTenants}</li>
<li class="list-group-item"><b>Location:</b> {city} - {zip}</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="map">
<h3>Transit Directions</h3>
<iframe class="neighborhood-map" src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyBNSSuICv6MPc13PfZ1Yu0KyDSsDG5eLJw
&origin={city}%2C%20CA%20{zip}
&destination=1600%20Holloway%20Ave%2C%20San%20Francisco%2C%20CA%2094132
&mode=transit
&zoom=12">
</iframe>
</div>
</div>
</div>
</script>
I want to make it so that the width of my carousel is the same as my header and navigation bar but instead it takes up the whole width of the page. How do I change this?
I am using this https://getbootstrap.com/examples/navbar/ as a template but when I try to add the carousel snippet from here
http://bootsnipp.com/snippets/featured/responsive-bs-carousel-with-hero-headers
its width is 100%.
How do I go about changing it so that it is the same width as the rest of the page and does not take up 100% of it?
Thanks in advance.
just place ur code inside class="container" like below and it should work see updated fiddle
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<h1>We are creative</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
<hgroup>
<h1>We are smart</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
<hgroup>
<h1>We are amazing</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
</div>
</div>
</div>
It is seeming like the rest of your contents are inside row or container and what I can see from the carousel snippet is that it is not inside any row or container which is making it to take the full width by 100% width.
Try inserting the carousel inside a container or row which is most relevant to other portions of your page. That should solve your problem.
If you post your codes then the problem could be gone through more well.
I am learning Bootstrap 3 and have a simple page I am working on that only consist of a top nav bar, carousel, and footer.
The page looks OK at desktop size. When it shrinks to mobile size I have too much white space. If I have to add more content to fill it I will but is there an alternative to avoid doing that. I like the simpleness with just the carousel.
Is there a way to make it look nice on a mobile the way I have it?
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<!-- Fixed navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</div>
<div class="container">
<br />
<!-- Begin page content -->
<div class="row clearfix">
<div class="col-xs-12 column">
<div class="carousel slide" id="carousel-491568">
<!-- <ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-491568">
</li>
<li data-slide-to="1" data-target="#carousel-491568">
</li>
<li data-slide-to="2" data-target="#carousel-491568">
</li>
</ol> -->
<div class="carousel-inner">
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!--<div class="carousel-caption">
<h2>NEW Client!</h2>
<p></p>
</div> --></div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p></p>
</div> --></div>
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p> </p>
</div> --></div>
</div> <a class="left carousel-control" href="#carousel-491568" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-491568" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<div id="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-text pull-left">
<!--<p class="footer-block">Footer</p> -->
<p><i class="fa fa-envelope fa-1x"> Questions?</i> | <i class="fa fa-mobile fa-1x"> (740) 564-9876</i>
</p>
<p>Copy Here</p>
</div>
<div class="navbar-text pull-right"> <a class="btn btn-social-icon btn-facebook" href="#" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="#" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="#" target="_blank">
<i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle demo
I suggest to modify the classic carousel html script using a background image and adjusting the size in your css file accordingly.
here you will find an html example:
<div class="container">
<!-- Header Carousel -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
and your css example code:
/* CSS used here will be applied after bootstrap.css */
/* -------carousel slides----*/
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-indicators li {
border-color: #C0C0C0;
}
.carousel-indicators .active {
background-color: #c0c0c0;
}
.carousel-inner {
margin-bottom:50px;
}
.carousel .item{
height: 400px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 400px;
}
.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
Bootply example
I can't click the arrows or the dots. Also, hpw can I make it so that it automatically goes to the next slide? Nothing works. Any help would greatly be appreciated. Thanks!
Heres my code:
<div id="myCarousel" class="carousel slide">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
<img src="img/Carousel0.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small=""><p></p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p></pthis></div>
</div>
</div>
<div class="item">
<img src="img/Carousel1.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/Carousel2.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
You have your navigation inside of the carousel-inner div. Moving the closing div above the navigation should resolve your issue.
<div id="myCarousel" class="carousel slide">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
<img src="img/Carousel0.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small=""><p></p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p></pthis></div>
</div>
</div>
<div class="item">
<img src="img/Carousel1.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/Carousel2.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
Bootply