Bootstrap: Centering 2 forms next to eachother in Carousel Template? - html

Question

I am trying to center two forms sitting next to each other in twitter's bootstrap.
This is the template I am using given by Bootstrap
and this is the code I have so far. What it does is placing them on the top of each other.
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="header" src="img/header_bg.jpg" alt="">
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="logo"><img src="img/logo.png" height="105px" width="96px"></div>
</div>
</div>
</div> <!-- container logo -->
<div class="container">
<div class="carousel-caption">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div> <!-- item active -->
</div> <!-- carousel-inner -->
</div><!-- /.carousel -->
Here is the CSS:
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
.carousel .container {
position: relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 700px;
}
.carousel img.header {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 700px;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 400px;
margin-top: 100px;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
.logo {
margin-left:-150px;
float:left;
}
Can someone please help me out with this ? : ) Thanks !

Answer 1

To get the forms side-by-side, we have to give them a 'float: left' CSS rule, like so:
.form-horizontal{
float: left;
}
Anyway, here's a JSFiddle with the new CSS: http://jsfiddle.net/4WwLX/1/