Bootstrap dropdown list not expanding - html

Bootstrap dropdownlist is not displaying its list of contents on click. I added jquery library prior to the bootstrap.min.js(This was the solution that i found in stack overflow,but it does not work for me).
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="signin-div">
<h3 class="feature-title">Login Here..</h3>
<div class="form-group">
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Basic dropdown -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
</div>
</div>
</body>
</html>


Try this code.
I have added popper.js before boostrap.js
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" i crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="signin-div">
<h3 class="feature-title">Login Here..</h3>
<div class="form-group">
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Basic dropdown -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
</div>
</div>
</body>
</html>


paste this code in head
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
paste this code in body
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 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>

Related

I couldn't run my "dropdown" command. "When you press the button, the links should appear."

When I pressed the dropdown button, the links were supposed to be sorted one after the other. But I could not. I am using Bootstrap. I'm almost new to software by the way. It may be an easy question.
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>

You need to include "popper.js" library. It's what bootstrap uses for dropdown mechanism if i've researched correct. So this code works;
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
</body>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"
></script>
</html>

Just add the data-bs-toggle="dropdown" attribute to dropdown-toggle button.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
Codepen live :
https://codepen.io/Superawdi/pen/jOzYrvX

How to fix search icon changing to value of dropdown-menu item?

Here is what I am talking about.
<!DOCTYPE html>
<html lang="en">
<head>
<!--REQUIRED META TAGS-->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--------------------------------------------------------------------------------------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>App</title>
</head>
<body class="bg-ttgl">
<div class="container">
<form class="form-group">
<div class="search-row row justify-content-center">
<!--dropdown section-->
<div class="col-7 input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Watching</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item">Completed</a>
<a class="dropdown-item">On-Hold</a>
<a class="dropdown-item">Dropped</a>
<a class="dropdown-item">Plan to Watch</a>
</div>
<!--search field section-->
<input type="text" class="form-control" aria-label="Anime list username" label="Anime list username" autocorrect="off" autocapitalize="off" placeholder="MyAnimeList username">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-light btn-outline-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script>$(".dropdown-menu a").click(function () {
$("button").text($(this).text());
});
</script>
</body>
</html>
I also have another question, in the .gif above you can see the dropdown menu changing size, how do I make the dropdown menu not change size like shown
this gif here

By doing $("button.").text($(this).text()); you are essentially changing the text of every button present on the screen. To change the text of toggle button only, change it to $("button.dropdown-toggle").text($(this).text());
As for the width, the toggle button is changing size because there is no minimum width defined. Use this CSS to do so
button.dropdown-toggle {
min-width: 10rem; // This is same as the min-width of dropdown-menu
}
button.dropdown-toggle {
min-width: 10rem; // This is same as the min-width of dropdown-menu
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--REQUIRED META TAGS-->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--------------------------------------------------------------------------------------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>App</title>
</head>
<body class="bg-ttgl">
<div class="container">
<form class="form-group">
<div class="search-row row justify-content-center">
<!--dropdown section-->
<div class="col-7 input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Watching</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item">Completed</a>
<a class="dropdown-item">On-Hold</a>
<a class="dropdown-item">Dropped</a>
<a class="dropdown-item">Plan to Watch</a>
</div>
<!--search field section-->
<input type="text" class="form-control" aria-label="Anime list username" label="Anime list username" autocorrect="off" autocapitalize="off" placeholder="MyAnimeList username">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-light btn-outline-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script>$(".dropdown-menu a").click(function () {
$("button.dropdown-toggle").text($(this).text());
});
</script>
</body>
</html>

Simple single page application template bootsrap

I'm trying to make a bootstrap template that fits entirely on one page with a vertical menu bar being the only scrollable element on the page, issue is the entire page is scrollable.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row" style="height:10%;">
<div class="col-lg-12 col-md-12 bg-success">banner</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:80%;">
<div class="col-lg-2 col-md-2 bg-success">Menu</div>
<div class="col-lg-10 col-md-10 bg-warning">content</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:10%;">
<div class="col-lg-12 col-md-12 bg-success">footer</div>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row" style="height:10vh;">
<div class="col-lg-12 col-md-12 bg-success">banner</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:80vh;">
<div class="col-lg-2 col-md-2 bg-success">Menu</div>
<div class="col-lg-10 col-md-10 bg-warning">content</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="height:10vh;">
<div class="col-lg-12 col-md-12 bg-success">footer</div>
</div>
</div>
</div>
</body>
</html>

Try this struct, following Bootstrap Documentation.
body, html, main {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.h-10v {
height: 10vh;
}
.h-80v {
height: 80vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<header class="bg-secondary h-10v">
Banner here.
</header>
<section class="row bg-dark h-80v">
<div class="col-xs-12 col-sm-12 col-md-4 bg-warning">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 bg-light">
<p>This area content.</p>
</div>
</section>
<footer class="bg-primary h-10v">
This is footer.
</footer>
</main>
</body>
</html>
https://codepen.io/pauloserafimtavares/pen/jpdrBG

HTML file and CSS file won't link in localhost

The files link when I open them normally but when I open them in localhost the .css file seems to have no effect.
Here's the code:
<link rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="random.css">
I've tried the file root as localhost too and still nothing. Any help here?
file structure is C:/Users/Kieran/Desktop/xampp/htdocs/portfolio/random.css
file structure is C:/Users/Kieran/Desktop/xampp/htdocs/portfolio/random.html
HTML file is in the same place.
Entire HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="random.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="main.html">Kieran Lythgoe Portfolio</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="panel panel-primary" id="panel1" style="width: 15%";>
<div class="panel-heading">Image Split</div>
<div class="panel-body">An image split into difference sections with different links</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='imagesplit.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
<div class="panel panel-primary" id="panel2" style="width: 15%";>
<div class="panel-heading">Boolean</div>
<div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='boolean.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
<div class="panel panel-primary" id="panel3" style="width: 15%";>
<div class="panel-heading">Random</div>
<div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='other.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
</body>
</html>

Try it like this
<link rel="stylesheet" type="text/css" href="mystyle.css">

The type="text/css" attribute should be part of the <link> element:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="random.css">
And remove the first line <link rel="stylesheet" type="text/css">

This should work :
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- 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">
<link rel="stylesheet" type="text/css" href="random.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="main.html">Kieran Lythgoe Portfolio</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="panel panel-primary" id="panel1" style="width: 15%";>
<div class="panel-heading">Image Split</div>
<div class="panel-body">An image split into difference sections with different links</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='imagesplit.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
<div class="panel panel-primary" id="panel2" style="width: 15%";>
<div class="panel-heading">Boolean</div>
<div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='boolean.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
<div class="panel panel-primary" id="panel3" style="width: 15%";>
<div class="panel-heading">Random</div>
<div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='other.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>
</html>
Here is the result without random.css :
https://i.imgur.com/eaTi03U.png

Customizing Carousel of Twitter Bootstrap

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