How to Make Your Website Content Center in Twitter Bootstrap’s Fluid Layout

Don't be selfish...share it
Share on FacebookTweet about this on TwitterShare on Google+Share on StumbleUponEmail this to someoneShare on LinkedIn

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:

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.

Your Fonts - Font Generator

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

 bootstrap center fluid layout

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

center fluid website with bootstrap

 

Don't be selfish...share it
Share on FacebookTweet about this on TwitterShare on Google+Share on StumbleUponEmail this to someoneShare on LinkedIn

About 

Hi, this is +Shrinivas, from Belgaum. I'm a part of the Techgyo community.

If you enjoyed this one, I'm sure you will love what you see in Archives
Tags:
Loading Facebook Comments ...
Loading Disqus Comments ...
x
Sign-up. Its FREE!