Centering single boot compatibility

Question

Community

I recently stumbled upon Twitter Bootstrap, looking for opportunities to create a web page without being able to actually “design” (coder-cliché, meh). I got a big fan of this instant cross-compatibility, and since the site is planned for the blog, I do not think it is impossible for mobile users to visit it.

And this particular blog is what causes me problems. Having a blog post strip across the grid (span12, up to 1170 pixels wide) creates a massive wall of text that scares everyone away. Instead, I decided to create (at least a preview) in span6, which seems reasonable to me and also works well for mobile users. But since I don't need more than 1 per line, I need to somehow center it, and I would prefer to do it in the “Bootstrap way”.

The official docs pointed me to .offset * classes that work great on desktop computers, but will be saved when switching to a mobile layout, creating an ugly space on the left side. Without bias, it works without problems on the mobile version (1 message per line, without spaces to the left or right), but on desktops it is aligned to the left. Here's the corresponding code bit:

There is no offset working as intended on mobile devices:

<div class="row-fluid"> <div class="span6"> <h3>Blog Post #1 Title</h3> <h5>Category, Sub-Category - 01.01.1970</h5> <p>Lorem ipsum...</p> </div><!--/span6--> </div><!--/row--> 

With the offset working as intended on the desktops:

 <div class="row-fluid"> <div class="span6 offset3"> <h3>Blog Post #1 Title</h3> <h5>Category, Sub-Category - 01.01.1970</h5> <p>Lorem ipsum...</p> </div><!--/span6--> </div><!--/row--> 

Is there any way (without JavaScript!) To make it behave the way I want (cross-compatible centering of the element while keeping all the text to the left)? I assume that I will need to modify bootstrap-responsive.css, but I would like to limit the use of source files ...

Answer 1

Somehow I came up with an idea that worked fine, without any CSS modifications:

To center the element using the grid, we fill the rest of the line with placeholders. For my example span6, which will be

 <div class="row-fluid"> <div class="span3"></div> <div class="span6"> <h3>Blog Post #1 Title</h3> <h5>Category, Sub-Category - 01.01.1970</h5> <p>Lorem ipsum...</p> </div> <div class="span3"></div> </div> 

which leads to a centered version on the desktop and tablets, as well as a full-sized version on phones. However, due to the liquid layout, there will be gaps in the mobile layout, since an empty div also takes up a small space. But since this problem only occurs on phones, we can avoid this by adding a hidden-telephone class to the placeholder-div, for example:

 <div class="row-fluid"> <div class="span3 hidden-phone"></div> <div class="span6"> <h3>Blog Post #1 Title</h3> <h5>Category, Sub-Category - 01.01.1970</h5> <p>Lorem ipsum...</p> </div> <div class="span3 hidden-phone"></div> </div> 

And in the end, it works, as I expected, at least on Bootstrap version 2.1.0 ...