Navbar and text not properly aligning - html

I am trying to set a fixed navbar that has a scrolling effect. Logo, links are on the left hand side and the sign up and log in are aligned on the right hand sign with icon. when I try to run the code, its not looking like it suppose to. I've tried a few ideas and looked up every idea and template design and used plenty of references and I am still stuck.
<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title> Kappa Delta Rho - Psi Beta </title>
</head>
<body>
<!-- Fixed Navigation -->
<nav class="navbar fixed-top navbar-dark" style=" background-color: #00008B">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> KDR LOGO </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> Welcome </li>
<li> About </li>
<li> History </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<!-- End of Fixed Navigation -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

Try remove fixed-top.
<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title> Kappa Delta Rho - Psi Beta </title>
</head>
<body>
<!-- Fixed Navigation -->
<nav class="navbar navbar-dark" style=" background-color: #00008B">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> KDR LOGO </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> Welcome </li>
<li> About </li>
<li> History </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<!-- End of Fixed Navigation -->
<br><br><br><br><br><br><br><br><br><br><br>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

Related

How can I align my navbar menu items to the right?

I am working on a navbar and I need to align some part of it to the right:
This is what i have :
Also the collapse-navbar is not working , when I reduce the screen the collapse button appears but nothing happens when I click...
This is my codebase : Codebase
Here is a working example with Bootstrap, hope it is to any help:
.test {
color: white;
margin-left: 10px;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="app" class="container-fluid">
<nav class="navbar navbar-expand-md navbar-light bg-dark">
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<h1 class="test" href="#">Funds.</h1>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="test" href="#">Use funds for business </a>
</li>
<li class="nav-item">
<a class="test" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="test" href="#">Legal stuff</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

Alignment of toggle button (humberger icon) in small screen view using bootstrap 4

I am new to bootstrap and I need to use bootstrap 4 for creating a fully responsive menu. The main navigation should use bootstrap collapsible navbar to show a hamburger icon atthe smaller screen widths. I found a smaple code from w3 which gives me a menu in the right side and when I resize to small view the harmber icon (the toggle view) appears on the right side:
<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
<title> Home page </title>
<meta charset="utf-8"/>
<!-- link to use bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- link to reset css -->
<link rel="stylesheet" href="css/reset.css"/>
<!-- link to css folder -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="navbar-brand"></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Basket</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Checkout</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<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>
</body>
</html>
if I remove the dummy <div class="navbar-brand"></div> just before the toggle button then in small screens view, the toggle button would jump to left rather right.
What is the proper way of setting the alignment of toggle button to right instead of left without using the dummy hacky div
<div class="navbar-brand"></div>
Thanks for your help.
Try this Jsfiddle link.
Here I have applied justify-content: flex-end !important; css rule for navbar.
.navbar {
justify-content: flex-end !important;
}
<!DOCTYPE html>
<html lang="en">
<!-- head includes title of page, meta data and Style links -->
<head id="head">
<title> Home page </title>
<meta charset="utf-8"/>
<!-- link to use bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- link to reset css -->
<link rel="stylesheet" href="css/reset.css"/>
<!-- link to css folder -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<!-- <div class="navbar-brand"></div> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Basket</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Checkout</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<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>
</body>
</html>

Why my boostrap 4.0 beta is not working properly?

I downloaded bootstrap 4.0 beta from getbootstrap.com, I included CSS & js from dist folder, but my styles are incomplete (navbar, hidden, visible are not working) do I need any extra stuff to include for my bootstrap folder,(do i need sass folder).
I included my css, js & jquery with correct path.
Can anyone help me with answer.
<!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 href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
You mentioned that you downloaded Bootstrap 4.0 beta, so I'm assuming you're trying to use the file path to use it. You do not need to download SASS. If you don't really need all its features then you can just follow Bootstraps 'quick start guide', https://getbootstrap.com/docs/4.0/getting-started/introduction/.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Just to get you started, try that. Then maybe later you can pick specific components.

Why is this bootstrap nav bar not showing correctly?

Why wont this work? I am sure i have set it up correctly although this is my first time using bootstrap. I am trying to use CDN distribution but I cant seem to get it to work. It currently just displays them as links as oppose to the nav bar that can be seen when used on other sites.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>Fictional Football Club</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="nav navbar-nav">
<ul>
<li>News</li>
<li>Matches</li>
<li>Table</li>
<li>Squad</li>
<li>Tickets</li>
</ul>
</div>
</div>
</nav>
<div class="container">
</div>
<!-- Optional JavaScript -->
<!-- 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
The navbar structure is not Bootstrap 4. Read the Bootstrap 4 navbar docs. Bootstrap 4 is now beta.
https://www.codeply.com/go/4GM7ligFGu
<nav class="navbar navbar-light bg-light navbar-expand">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">News</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Matches</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Table</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Squad</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Tickets</a>
</li>
</ul>
</nav>

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