I am making a page with using bootstrap carousal, but carausal -indicator was coming in top I have change top position 105%, is that right way to change the position or we can change directly it to bottom, and I need to center these indicators,
please help me out how I can fix it…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../assets/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../assets/css/jquery-ui.theme.css">
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/ticket-style.css" rel="stylesheet">
<link href="../header&footer/css/style.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="../assets/css/bootslider.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<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">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<style>
.carousel-indicators li {
border-color:#999;
background-color:#ccc;
}
.carousel-indicators .active {
background-color: #000;
}
.carousel-indicators {
top:105%;
}
</style>
</head>
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<!-- Begin page content -->
<div class="container-fluid nopadDiv">
<div class="row-fluid">
<div class="span1 leftNavContent ">
<ul class="nav nav-list nav-list_">
<div class="quickLinks">
<div class="LastloginInfo">
<strong>Last Login</strong> 9/22/2014 02:52:39 AM
</div>
<ul>
<li><a href="#" class="current">Manage Tickets</a></li>
<li><a href="#">Support Tickets</a></li>
<li><a href="#">Billing Tickets</a></li>
<li><a href="#">Order Tickets</a></li>
<li><a href="#">Ticket Reports</a></li>
</ul>
</div>
</ul>
</div><!-- /span1 -->
<div class="span11">
<div id="full-screen-slider" class="carousel slide">
<ol class="carousel-indicators carousel-indicators1">
<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="active item">
<div class="row-fluid main-content">
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container" style="border:none;">
<div class="widget-heading">Alerts
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<table class="table table-condensed table-hover table-bordred table-striped">
<tbody>
<tr>
<td><a href="#"><i class="icon-star-empty"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-star-empty"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-star-empty"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-star-empty"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View All </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container" style="border:none;">
<div class="widget-heading">Tickets
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<table class="table table-condensed table-hover table-bordred table-striped">
<thead>
<th>Ticket#</th>
<th>Status</th>
<th>Site ID</th>
<th>Updated</th>
</thead>
<tbody>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View All </a></li>
<li> <a href="#">Create Ticket</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container" style="border:none;">
<div class="widget-heading">Orders
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<table class="table table-condensed table-hover table-bordred table-striped">
<thead>
<th>Ticket#</th>
<th>Status</th>
<th>Site ID</th>
<th>Updated</th>
</thead>
<tbody>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View All </a></li>
<li> <a href="#">Create Order</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container">
<div class="widget-heading">Billing
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<dl class="dl-horizontal pl20">
<dt>Amount Due:</dt>
<dd>$1250.00</dd>
<dt>Due Date:</dt>
<dd>11/30/2014</dd>
<dt>Last Payment:</dt>
<dd>#1354.00</dd>
</dl>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View Invoice </a></li>
<li> <a href="#">Pay Bill</a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- row fluid main content -->
<div class="row-fluid main-content">
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container">
<div class="widget-heading">Network Summary
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container" style="border:none;">
<div id="piechart-placeholder"></div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container" style="border:none;">
<div class="widget-heading">Notifications
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<table class="table table-condensed table-hover table-bordred table-striped">
<tbody>
<tr>
<td><a href="#"><i class="icon-envelope"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-envelope"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-envelope"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-envelope"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View All </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container">
<div class="widget-heading">Services
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container" style="border:none;">
<div class="pa10">
<table class="table">
<tbody>
<tr>
<td class="bdr-right bdr-top-none"> ht ht h</td>
<td class="bdr-top-none"> ht ht h</td>
</tr>
<tr>
<td class="bdr-right">2927808</td>
<td class="">2927808</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 pt50 ">
<div class="well custome-well"> ht h tht ht th</div>
</div>
</div>
</div> <!-- row fluid main content -->
</div> <!-- item -->
<div class="item">
<div class="row-fluid main-content">
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container" style="border:none;">
<div class="widget-heading">Alerts
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<table class="table table-condensed table-hover table-bordred table-striped">
<tbody>
<tr>
<td><a href="#"><i class="icon-star-empty"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-star-empty"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-star-empty"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-star-empty"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View All </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container" style="border:none;">
<div class="widget-heading">Tickets
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<table class="table table-condensed table-hover table-bordred table-striped">
<thead>
<th>Ticket#</th>
<th>Status</th>
<th>Site ID</th>
<th>Updated</th>
</thead>
<tbody>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View All </a></li>
<li> <a href="#">Create Ticket</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container" style="border:none;">
<div class="widget-heading">Orders
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<table class="table table-condensed table-hover table-bordred table-striped">
<thead>
<th>Ticket#</th>
<th>Status</th>
<th>Site ID</th>
<th>Updated</th>
</thead>
<tbody>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
<tr>
<td><a href="#">8250437</a></td>
<td>Open</td>
<td>2927808</td>
<td>10/30/2014 12:30</td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View All </a></li>
<li> <a href="#">Create Order</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container">
<div class="widget-heading">Billing
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<dl class="dl-horizontal pl20">
<dt>Amount Due:</dt>
<dd>$1250.00</dd>
<dt>Due Date:</dt>
<dd>11/30/2014</dd>
<dt>Last Payment:</dt>
<dd>#1354.00</dd>
</dl>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View Invoice </a></li>
<li> <a href="#">Pay Bill</a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- row fluid main content -->
<div class="row-fluid main-content">
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container">
<div class="widget-heading">Network Summary
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container" style="border:none;">
<div id="piechart-placeholder"></div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container" style="border:none;">
<div class="widget-heading">Notifications
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container">
<table class="table table-condensed table-hover table-bordred table-striped">
<tbody>
<tr>
<td><a href="#"><i class="icon-envelope"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-envelope"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-envelope"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
<tr>
<td><a href="#"><i class="icon-envelope"></i></a></td>
<td><strong>Lorum Ipsum</strong></td>
<td><span class="pull-right">10/30/2014 12:30</span></td>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<div class="widget-footer-container">
<div class="widget-footer-content">
<ul class="inline">
<li class="border-none"> <a href="#">View All </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span3 widget-container">
<div class="tile">
<div class="widget-heading-container">
<div class="widget-heading">Services
<a href="#"><i class="icon-remove pull-right"></i></a>
</div>
<!--<div class="widget-sub-heading">View and manage your quotes</div> -->
<div class="clearfix"></div>
</div>
<div class="widget-body-container" style="border:none;">
<div class="pa10">
<table class="table">
<tbody>
<tr>
<td class="bdr-right bdr-top-none"> ht ht h</td>
<td class="bdr-top-none"> ht ht h</td>
</tr>
<tr>
<td class="bdr-right">2927808</td>
<td class="">2927808</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 pt50 ">
<div class="well custome-well"> ht h tht ht th</div>
</div>
</div>
</div> <!-- row fluid main content -->
</div> <!-- item -->
</div> <!-- carousel-inner -->
<a class="left carousel-control" href="#full-screen-slider" data-slide="prev">‹</a>
<a class="right carousel-control" href="#full-screen-slider" data-slide="next">›</a>
</div> <!-- full screen slider -->
</div> <!-- /span11-->
</div> <!-- /row-fluid-->
</div> <!-- /container-fluid -->
<div id="push"></div>
</div> <!-- wrap -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/jquery_ui/jquery-ui.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootslider.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel(){
interval: 3000
});
});
</script>
</body>
</html>