Table of Contents
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.
Also read:
- Trick to Get Google Apps for Free for your Business
- ShareitGetit- An Easy to Use SMO toolbar for Social Media Optimization
- 3 Tools to Check Website Traffic & Revenue Stats online
- Top 5 Free HTML5 Video Players to Embed in Your Website
- Top 5 Online CSS Code Generators
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.
The Concept
Html Code to Center the Content in Twitter Bootstrap’s Fluid Layout
<html>
<head>
<title>Bootstrap 101 Template</title>
<!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<div>
<div class=”span1″>
</div>
<div class=”span10″ >
<div>
<h1>Centered Fluid Layout</h1>
<p> Website content</p>
</div>
</div><!–/span–>
<div class=”span1″>
</div>
</div><!–/row–>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
The Result
