form{
max-width: 30%;
background-color: white;
padding: 2%;
position: relative;
left: 50%;
color: black;
font-family: fantasy;
}
.form-control{
padding: 2%;
margin: 1%;
}
label{
border-radius: 4%;
margin: 1%;
}
<div class="six columns">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/create.svg" alt="create">
<div class="carousel-caption">
....
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="six columns">
<form method="post" action="">
<label>Your Name:</label>
<input type="text" class="form-control"><br />
<label>Your Email:</label>
<input type="email" class="form-control"><br />
<label>Your Password:</label>
<input type="password" class="form-control"><br />
<label><input type="checkbox">Male</label>
<label><input type="checkbox">Female</label>
<button class="signin">Sign In</button>
</form>
</div>
In home page I was trying to align slider and signup form. Slider should be on the left side and Sign up form is on the right. But Form is not moving up when I coded- position: relative; top-2%;
Need help!!!
As I said in comment, you should use float: left with width: 50% to do this.
.six.columns {
float: left;
width: 50%;
}
JSFiddle
Related
I am begining in styling shiny apps.
I want to create a create a full screen slider into a tabpanel of my application for my landing page.
According to this snippet, here's my application.
The carousel is empty. How can I solve this issues (perhaps the inline css <div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);"> not working?
library(shiny)
ui <- fluidPage(includeCSS("carousel.css"),
navbarPage("project",
collapsible = TRUE,
tabPanel("Home",
tags$div(HTML('<div class="tcb-bs-fullscreen">
<div id="carousel-example-generic" class="carousel slide carousel-bg" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=545);">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=673);">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>')
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {}
# Run the application
shinyApp(ui = ui, server = server)
And the LESS css:
/****************************
TURN BOOTSTRAP CAROUSEL INTO FULL SCREEN SLIDER
*****************************/
html,
body {
height: 100%;
}
.tcb-bs-fullscreen{
height: 100%;
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
}
/****************************
USE BACKGROUND IMAGES IN CAROUSEL SLIDER
*****************************/
.carousel-bg {
.carousel-inner {
.item {
background-color: darkslategrey;
background-size: cover;
background-position: center;
min-height: 360px;
}
}
}
The URL's of the images loaded within your carousel seem dead except for the second or middle URL:
Does not load:
<div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);">
Does load:
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=545);">
Does not load:
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=673);">
The code is working fine (you might want to fix your CSS however):
html, body {
height: 100%;
}
.tcb-bs-fullscreen {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-bg .carousel-inner .item {
background-color: #ccc;
background-size: cover;
background-position: center;
min-height: 360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tcb-bs-fullscreen">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1600/840?image=697" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1600/840?image=545" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1600/840?image=673" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
JSFiddle
I am trying to create slider inside an image.
As to the attachment, I want to change the proportion of the background color and then to insert inside this div the slider.
I was using this example:
Fiddle here
The code:
HTML
<div class="col-6 col-md-4">
<img class="temp" src="img/phone.png">
<div class="bg-image">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./img/testimonial-bg.jpg" alt="...">
</div>
<div class="item">
<img src="http://www.freedomwallpaper.com/nature-wallpaper/nature-hd-wallpapers-water.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
CSS
#application img {
width: 250px;
height: 375px;
position: absolute;
}
.temp {
background: #440;
}
/*Image slider */
.bg-image {
width:250px;
height:350px;
background-repeat:no-repeat;
background-size:100%;
position: relative;
padding: 150px 0 0 0;
z-index: 1;
}
.carousel-inner>.item>a>img,
.carousel-inner>.item>img{
height: 350px;
}
Thank you for your help.
I'm fairly certain that this is a simple fix, but I've spent hours on it and am not sure why I haven't been able to fix it. Any help would be greatly appreciated!
My HTML is standard bootstrap:
<div class="row">
<div class="container" id="main">
<div class=col-md-12>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="*IMAGE*" alt="Power Grid">
<div class="carousel-caption">
<h3>HELLO</h3>
<p>World</p>
</div>
</div>
<div class="item">
<img src="*IMAGE*" alt="Power Grid">
<div class="carousel-caption">
<h3>GOODBYE</h3>
<p>World</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Here is my current CSS:
#main.container {
padding: 0 10% 5% 10%;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
#carousel-example-generic {
border: #000000 solid 10px;
border-radius: 15px;
}
Im creating a website for a friend and when I add an image it just wont go to the bottom, I have literally tried everything from background-position: left bottom; to padding-bottom:0px to everything else, it just has a huge gap under it of the background. I have tried multiple images so it isn't just my image. I am using bootstrap and below ive put my code plus the custom css code..
HTML
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li>71 users online</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase"><br>
<div class="col-md-8">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Lime ravamped</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Hello Raven</h1>
<p>How are you raven?</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>This is cool</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
<div class="col-md-4">
<div class="jumbotron">
<h4>Sign Up</h4>
<form name="login" action="post">
<input type="text" name="login_username" class="form-control spaceform" placeholder="Username...">
<input type="password" name="login_password" class="form-control spaceform" placeholder="Password...">
<input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up">
Sign Up
</div>
</div>
</div>
<div class="container" style="">
<div id="footer"><br>
<p>© [site.name] 2016. All Rights Reserved.</p>
</div>
<p> </p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
CSS
#welcome_placeholder, .welcome_placeholder {
background-color: #5bc0de;
height:300px;
border-radius:6px;
width:699px;
color:white;
padding-top:1px;
padding-left:28px;
background-image: url('/bg_hotel.out.png');
}
#news_container {
height: 296px;
width: 625px;
border-radius
}
#news_article {
height: 296px;
width: 625px;
}
.carousel {
border-radius: 5px 5px 5px 5px !important;
overflow: hidden !important;
}
.jumbotron {
border: 1px solid #ddd;
background-color: #FFF !important;
padding-left:20px !important;
padding-top:10px !important;
padding-right:20px !important;
padding-bottom:20px !important;
}
p {
font-size:14px !important;
}
.spaceform {
margin-top:8px;
}
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
padding-left:0px !important;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: 'Open Sans', sans-serif !important;
}
body {
background-color: #edf2f6 !important;
background-image:url('http://s9.tinypic.com/xckwhy_th.jpg');
background-repeat: no-repeat;
background-position: bottom;
}
#welcome_placeholder,
.welcome_placeholder {
background-color: #5bc0de;
height: 300px;
border-radius: 6px;
width: 699px;
color: white;
padding-top: 1px;
padding-left: 28px;
background-image: url('/bg_hotel.out.png');
}
#news_container {
height: 296px;
width: 625px;
border-radius
}
#news_article {
height: 296px;
width: 625px;
}
.carousel {
border-radius: 5px 5px 5px 5px !important;
overflow: hidden !important;
}
.jumbotron {
border: 1px solid #ddd;
background-color: #FFF !important;
padding-left: 20px !important;
padding-top: 10px !important;
padding-right: 20px !important;
padding-bottom: 20px !important;
}
p {
font-size: 14px !important;
}
.spaceform {
margin-top: 8px;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
padding-left: 0px !important;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: 'Open Sans', sans-serif !important;
}
body {
background-color: #edf2f6 !important;
background-image: url('http://s9.tinypic.com/xckwhy_th.jpg');
background-repeat: no-repeat;
background-position: bottom;
}
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li>71 users online
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase">
<br>
<div class="col-md-8">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Lime ravamped</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Hello Raven</h1>
<p>How are you raven?</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>This is cool</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- Carousel -->
</div>
<div class="col-md-4">
<div class="jumbotron">
<h4>Sign Up</h4>
<form name="login" action="post">
<input type="text" name="login_username" class="form-control spaceform" placeholder="Username...">
<input type="password" name="login_password" class="form-control spaceform" placeholder="Password...">
<input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up">
Sign Up
</div>
</div>
</div>
<div class="container" style="">
<div id="footer">
<br>
<p>© [site.name] 2016. All Rights Reserved.</p>
</div>
<p> </p>
</div>
The image is aligned bottom of the body. Which it is. The body ends where the image finishes. If you make the footer div bigger you will see that the image goes to the bottom (bottom of the div).
The <body> contains all the content so the image goes at the end of the content NOT the bottom of the browser window. If you want the image to always be at the bottom of the browser window no matter what then you should use position: absolute; bottom:0;
How about adding this to body:
height:100vh;
See here: https://jsfiddle.net/1zq13grk/
I'm trying to replace bootstrap indicators circles with some glyphicons.
I tried to add glyphicon to carousel indicator, but not working.
http://jsfiddle.net/bn6aA/57/
HTML
<div id="locations" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators glyphicon glyphicon-refresh">
<li data-target="#locations" data-slide-to="0" class="active"></li>
<li data-target="#locations" data-slide-to="1"></li>
<li data-target="#locations" data-slide-to="2"></li>
<li data-target="#locations" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active ">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
<div class="item">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
<div class="item">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
<div class="item">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#locations" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#locations" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Using glyphicons as carousel indicators is not such easy thing to do because we must do some modifications.I removed the class carousel-indicators from the list, i put the glyphicons inside the custom-list list items, and used my custom-list class to style the glyphicons.Also i removed the imported bootstrap-combined library because it was messing up the left and right carousel controls.
The above approach has one negative side which is we cannot style the glyphicon coresponding to the current active slide because we removed the carousel-indicators class from the list.
.custom-list li {
display: inline;
font-size: 40px;
color: #fff;
}
.custom-list li:hover {
color: #888;
cursor: pointer;
}
.item img {
width: 100%;
}
.custom-list {
top: 15px;
margin: auto;
position: absolute;
width: 50%;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
right: 15px;
z-index: 1;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="locations" class="carousel slide" data-ride="carousel">
<ol class="custom-list">
<li data-target="#locations" data-slide-to="0" class="active"><span class="glyphicon glyphicon-th-large"></span>
</li>
<li data-target="#locations" data-slide-to="1"><span class="glyphicon glyphicon-th"></span>
</li>
<li data-target="#locations" data-slide-to="2"><span class="glyphicon glyphicon-th-list"></span>
</li>
<li data-target="#locations" data-slide-to="3"><span class="glyphicon glyphicon-list"></span>
</li>
</ol>
<div class="carousel-inner">
<div class="item active ">
<img src="http://placehold.it/900x200?text=First slide" alt="">
</div>
<div class="item">
<img src="http://placehold.it/900x200?text=Second slide" alt="">
</div>
<div class="item">
<img src="http://placehold.it/900x200?text=Third slide" alt="">
</div>
<div class="item">
<img src="http://placehold.it/900x200?text=Fourth slide" alt="">
</div>
</div>
<a class="left carousel-control" href="#locations" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#locations" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Straight from the bootstrap website (http://getbootstrap.com/javascript/#carousel):
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
However, something is going a little wonky here, so remove the circles like this with CSS
.carousel-control {
background: none !important;
border: none;
}
Proof: http://jsfiddle.net/bn6aA/65/
As you can see, this is still not rendering exactly correct. Some things are out of place and sized too big etc... This is because you are using bootstrap-combined.min.css V2.3.1 and bootstrap.css V3.0.0
Removing bootstrap-combined.min.css results in a much better looking solution: http://jsfiddle.net/bn6aA/64/