I'm learning bootstrap these days. I am developing a main page. But the carousal is not working. Please check the code and tell me which thing i'm missing in my code. I am just copy pasting the code of carousal from w3school. I don't know where i am missing. It'll be great if somebody can help me in this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="Solupo_h.png" width="500" height="180" class="d-inline-block align-top" id="header" alt="top header" loading="lazy" >
</a>
</nav>
<div id="ct">
<div class="corner "id="left_top"></div>
<div class="corner" id="left_bottom"></div>
<div class="corner" id="right_top"></div>
<div class="corner" id="right_bottom"></div>
<span>Winston Churchill</span>
<blockquote>
<p><i>“Success consists of going from failure to failure without loss of enthusiasm.” </i></p>
</blockquote>
</div>
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="654-500x3002.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="654-500x3002.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="654-500x3002.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You may not have downloaded the bootstrap stylesheet or javascript assets. The code is fine since you mentioned that you copy pasted the code directly from w3schools.
You need the following files downloaded and added to your folder:
css/bootstrap.min.css
js/bootstrap.min.js
OR
You can just paste the following in your <head> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
And you can add the following at the end of your <body> tag:
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Hope that helps!
Related
I am trying to make a bootstrap carousel that automatically switches between images in a given sequence. Everything is working in regards to controls (i.e arrows for going back and forth between pics & slide position indicator), but the images are stacked on top of each other when I load the page. Can someone point out an issue in this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Appraisal</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css">
</head>
<body>
<header>
<h1 class="animated slideInLeft">text goes here</h1>
<p>...</p>
<h4 class="animated slideInRight">portfolio</h4>
</header>
<div id="myCarousel" class="carousel slide">
<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="./pics/space_1.jpg" alt="Space 1" class="img-responsive">
<div class="carousel-caption">
<h3>Appraisal 1</h3>
<p></p>
</div>
</div>
<div class="item">
<img src="./pics/space_2.jpg" alt="Space 2" class="img-responsive">
<div class="carousel-caption">
<h3>Appraisal 2</h3>
<p></p>
</div>
</div>
<div class="item">
<img src="./pics/space_3.jpg" alt="Space 2" class="img-responsive">
<div class="carousel-caption">
<h3>Appraisal 3</h3>
<p></p>
</div>
</div>
</div>
<a href="#myCarousel" class="carousel-control" data-slide="prev">
<span class="icon-prev left"></span>
</a>
<a href="#myCarousel" class="carousel-control" data-slide="next">
<span class="icon-next right"></span>
</a>
</div>
<div class="skills">
</div>
<div class="certs">
</div>
<footer>
<p>developed by: jefferson steelflex</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
</body>
</html>
It's just a typo. Just change the class "carousel_inner" in the slides container div for "carousel-inner".
I have just coded bootstrap carousel but I'm not able to get the indicators (left, right) for scrolling.
Please find the snippet below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initital-scale=1">
<title> Bootstrap Example</title>
<!-- Bootstrap References -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mySlider" class="carousel slide" data-ride="carousel">
<!-- .nav's buttons on the bottom -->
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
</ol>
<!-- Image slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<figure>
<img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">This is a fruit leaf</figcaption>
</div>
<div class="item">
<figure>
<img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">KIWIf</figcaption>
</div>
</div> <!-- END: Image slides -->
<!-- Slide buttons (left,right) buttons -->
<a class="left coursel-control" href="#mySlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right coursel-control" href="#mySlider" role="button">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- END: Slider -->
</div>
</div>
</div>
</body>
</html>
I get the scrolling and everything but the right "Indicator" to scroll does not appear
What am I doing wrong?
Thanks
Added the default glyphicons and you're missing the data-slide attribute on the right/next arrow.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initital-scale=1">
<title> Bootstrap Example</title>
<!-- Bootstrap References -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mySlider" class="carousel slide" data-ride="carousel">
<!-- .nav's buttons on the bottom -->
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
</ol>
<!-- Image slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<figure>
<img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">This is a fruit leaf</figcaption>
</div>
<div class="item">
<figure>
<img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">KIWIf</figcaption>
</div>
</div><!-- END: Image slides -->
<!-- Slide buttons (left,right) buttons -->
<a class="left carousel-control" href="#mySlider" 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="#mySlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- END: Slider -->
</div>
</div>
</div>
</body>
So here is another instance of the million questions asking why Bootstrap's carousel isn't working. From what I can tell though, no one else has the same problem as me. You probably don't believe me, and maybe I don't fully believe myself either. Anyways, here goes.
So my code is a literal copy and paste from Bootstrap's carousel example, with some minor changes here and there. Feel free to copy paste into your own html file and view it. I've included Bootstrap's css and javascript, I've included jquery, and I've initialized my carousel. What specifically isn't working is the left and right buttons. Their expected behavior is to cycle through the images in each item div, but what actually happens is nothing. The carousel didn't work when copied from the example's page source, and it didn't work after I made my changes.
As a note, I did see the warning about viewing the page via a file:// URL, and the code doesn't work when hosted to an S3 bucket either.
First one to point out why I'm dumb gets free points!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!-- 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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://www.mountainprofessor.com/images/Mountain-Ranges-Colorado-2.jpg" alt="First slide" style="width:100%;height:500px;">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="http://7-themes.com/data_images/out/50/6943013-mountain-lake.jpg" alt="Second slide" style="width:100%;height:500px">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Example text.</p>
</div>
</div>
</div>
</div>
<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><!-- /.carousel -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>
</body>
</html>
Check your browsers console
Do you See
Uncaught Error: Bootstrap's JavaScript requires jQuery
It looks like its not loading Jquery 1st
The order of the scripts should be like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta charset="utf-8"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stadtfestlauf - Start</title>
<link rel="icon" type="image/png" href="favicon.png" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<!--script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="avcontent">
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="./Index.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active">Startseite</li>
<li>Rückblick</li>
<li>Wettbewerb
<li>Anmelden
<li>Sponsoren
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
</script>
<div class="container" id="pcontent">
<div class="col-md-7">
<div class="jumbotron">
<h1>Hallo</h1>
<p>sample text</p>
<div class="wrapper">
<p><a class="btn btn-primary btn-lg" role="button" id="sendButton" href="http://google.com/">Ich bin hier vollkommen Falsch</a></p>
</div>
</div>
</div>
<div class="col-md-5" id="imgslide">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="Assets/img1.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img2.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img3.jpg" alt="Stadtfestlauf" id="img">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here's a my index.html. When I try it out on my mobile, the navigation bar doesn't work. I searched for missing div's tags.
You need to change the data-targetof your button to the ID of your navbar-collapseelement.
Furthermore your html is missing some closing <li>'s.
Change your nav code to this:
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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="./Index.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active">Startseite</li>
<li>Rückblick</li>
<li>Wettbewerb</li>
<li>Anmelden</li>
<li>Sponsoren</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
It's also necessary to import jQuery before importing bootstrap, out of order it won't work. It should look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
For my the solution was to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Make sure that you put jQuery script before Bootscript link in your header part i.e. (in the following order)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
2023 Solution from Bootstrap API docs
Assuming no syntax errors inside your nav tag...
Put this code in the head of your HTML file. It "plugs in" jQuery & Popper, which Bootstrap depends on in order to make the "mobile" navbar work.
<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://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Reference
Questions about using Carousel in Twitter Bootstrrap
I’m new beginner to Twitter Bootstrap. Now I want to create a carousel in my page. But I ran into some problems.
Firstly, I find no where in css file to make my carousel to be placed at center.
Secondly, I don’t know how to make the width caption to be same as my images in carousel.
Here’s my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="rootfolder/bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="rootfolder/bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="rootfolder/bootstrap/docs/assets/css/docs.css" rel="stylesheet">
<link href="rootfolder/bootstrap/docs/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href="rootfolder/bootstrap/docs/assets/css/bootstrap-carousel.css" rel="stylesheet">
<link href="rootfolder/css/temp.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script type="text/javascript">
$(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<!--Lightbox-->
<script type="text/javascript">
$(function () {
$('.carousel').carousel('cycle')
});
</script>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://about.me/nienyiho">Nien-Yi Ho</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>About Me</li>
</ul>
</li>
<li class="">
Photography
</li>
<li class="">
Articles
</li>
<li class="">
For Sale
</li>
<li class="">
Blog
</li>
<li class="">
Contact
</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li class="divider"></li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron masthead">
<div class="inner">
<p>Nien-Yi Ho Photography</p>
</div>
</header>
<!--測試Light Box-->
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner_test">
<div class="active item">
<img src="rootfolder/images/photography/all_time_collections/1.jpg" alt="" width="600" hight="900">
<div class="carousel-caption">
<h4>何去何從</h4>
<p>台北 2008</p>
</div>
</div>
<div class="item">
<img src="rootfolder/images/photography/all_time_collections/2.jpg" alt="" width="600" hight="900">
<div class="carousel-caption">
<h4>撼動</h4>
<p>2008 台大合唱團冬季公演</p>
</div>
</div>
<div class="item">
<img src="rootfolder/images/photography/all_time_collections/3.jpg" alt="" width="600" hight="900">
<div class="carousel-caption">
<h4>Height of the sky.</h4>
<p>Paris 2002</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">› </a>
</div>
<!-- Footer
================================================== -->
<footer class="footer">
<p>Powered by Twitter Bootstrap </p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"> </script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-alert.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-dropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-scrollspy.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-tab.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-popover.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-button.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="rootfolder/bootstrap/docs/assets/js/application.js"></script>
</body>
</html>
To make the carousel sit in the middle you could:
Change your CSS class:
carousel-inner_test to just carousel-inner
then add to #myCarousel element:
width: 600px;
margin: 0px auto;
that should fix your caption issues too!
HTH