Twitter Bootstrap is one of the most advanced responsive frameworks to build website for PC, mobile or tablet, it comes up with a 12 column responsive grid to create an outstanding responsive website, you can see the list of all the responsive frameworks in our previous post Useful Resources to Create Responsive Website That Runs on PC, Mobile and Tablet.
What is the glitch with Twitter Bootstrap’s Fluid Layout?
A glitch is that your website gets aligned to left by default when you use “row-fluid” class in Twitter Bootstrap. This class makes your website fluid to fit in any device but not aligns it to center in the screen. I have seen many web developers asking for this question on forums and blogs so I too decided to hunt for the most comprehensive solution. I tried to modify the CSS bundled with twitter bootstrap package to make the content align center but could not succeed.
What is the Solution?
The solution to centering your website content in twitter bootstrap’s fluid layout is pretty simple, just add 2 spans in the right and left side of your main span. Below are the screenshots of the concept and the result along with the html code.
Html Code to Center the Content in Twitter Bootstrap’s Fluid Layout
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<div class="span10" >
<h1>Centered Fluid Layout</h1>
<p> Website content</p>
Published on January 11, 2013
If you enjoyed this one, I'm sure you will love what you see in Archives