How do I center wells in bootstrap? - html

Question

I am working on a simple homepage for my website but I want to get the well evenly spread out. I can align the left to the left and the right to the right but I cant seem to be able to get that middle well to always stay in the centre of the page. I have tried many things but they all don't work, have a look at my site to see what I want to do, the wells are under the image slider. This is the code I have done but and the CSS is the default bootstrap min css with a few tweaks for the colors.
<div class="container">
<div class="row">
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/ts.png" />
<h3>TeamSpeak 3</h3>
<br />
<p>Chat with us on our TeamSpeak at: <br />
<b>ts.clustermc.net</b>
<br /> So, come have a wonderful conversation with us!</p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/wool.png" />
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success" style="width: 2.0%;">
</div>
<div class="progress-bar progress-bar-danger" style="width: 98.0%;">
</div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online</p>
<br />
<p>Start collecting your ClusterCredits now at:<br />
<b>play.clustermc.net</b></p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/forums.png" />
<h3>Community Forums</h3>
<br />
<p>Come and talk to some of our memers and staff at the forums! <br />
<b>www.clustermc.net/forums
</b>
<br />We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
Sorry for the bad layout, im a beginner to coding and I want to learn :)

Answer 1

This is the Updated code.I have nested a div with class well as it was getting overlapped when used with col-lg-4. Please check the below code:
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/ts.png"/>
<h3>TeamSpeak 3</h3>
<br/>
<p>Chat with us on our TeamSpeak at: <br/>
<b><a href="ts3server://ts.clustermc.net">
ts.clustermc.net</a></b>
<br/>
So, come have a wonderful conversation with us!
</p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/wool.png"/>
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success"
style="width: 2.0%;"></div>
<div class="progress-bar progress-bar-danger"
style="width: 98.0%;"></div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online
</p>
<br/>
<p>Start collecting your ClusterCredits now at:<br/>
<b>play.clustermc.net</b></p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/forums.png"/>
<h3>Community Forums</h3>
<br/>
<p>Come and talk to some of our memers and staff at the forums
<br/>
<b><a href="http://clustermc.net/forums">
www.clustermc.net/forums</a>
</b><br/>
We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
</div>

Answer 2

It looks like your three 'well' divs are sitting in the middle of the page already?
As every thing is sitting in <div class="container"> that is the bootstrap class used to center things on a page. As per http://getbootstrap.com/2.3.2/scaffolding.html#layouts.
Note: It looks like you're missing a final ending </div> for the container class
I'm not 100% sure what issue you are having. Maybe provide a screenshot of what you want to achieve?