How do I center wells in bootstrap?
10,918
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>
Related videos on Youtube
Author by
Golumpa
Updated on June 04, 2022Comments
-
Golumpa almost 2 years
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 :)
-
Golumpa over 10 yearsThis kinda works, it centres the wells perfectly but there is no padding to separate each box. so this is the original i.imgur.com/G2cO34O.png and this is what happened when i added the align and removed the padding i.imgur.com/5BORGJq.png so when i added the padding back in it gave me this i.imgur.com/w3z7mrI.png and when i just added it to the center it gave me this i.imgur.com/0XepazJ.png sorry if i'm confusing you but it is just bugging me atm. Also i wanted them all the same hieght, Thanks alot for the help though!
-
Rohitha over 10 yearsOk got the point, try out using class="col-lg-3 well col-lg-offset-1" in all divs. And for getting in same height as you added before height and width is needed.Please let me know whether it helped you.
-
Tschitsch over 10 yearsafaik align-attribute is not used in html5 anymore. imo you should use
margin: 0 auto
-
Golumpa over 10 years@Rohitha Ok, I changed the div tags for the wells to this, "<div class="col-lg-3 well col-lg-offset-1" style="height: 330px; width: 330px;">" but as you can see it hasn't changed anything :/ clustermc.net
-
Rohitha over 10 years@JonAugood: I have made few changes and updated the code above.Have a look
-
Golumpa over 10 years@Rohitha: Yes, it works perfectly, thank you so much for your help it was bugging me so much as I have OCD and if something is meant to be in the middle and it isn't I go crazy lol Thanks alot for your help it is much appreciated!
-
JERRY-the chuha over 10 years@JonAugood: If you like the answer, you can vote up too. It encourages the stackoverflow users. Cheers. :)