Search code examples
htmlcsstwitter-bootstrapcentering

How do I center wells in bootstrap?


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><a href="ts3server://ts.clustermc.net">ts.clustermc.net</a></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><a href="http://clustermc.net/forums">www.clustermc.net/forums</a>
       </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 :)


Solution

  • 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>