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

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.

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

 

How to Bootstrap Center Website Content Center in Twitter Bootstrap's Fluid Layout 1
Shrinivashttps://techgyo.com
Hi, this is +Shrinivas, from Belgaum. I'm a part of the Techgyo community.

Grab your lifetime license to AI Image Generator. Hostinger Hosting

X