Home/ Questions/Q 8437493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T07:26:42+00:00

Community, I recently stumbled upon Twitter Bootstrap while looking for possibilities to design a

  • 0

Community,

I recently stumbled upon Twitter Bootstrap while looking for possibilities to design a webpage without being able to actually “design” (coder-cliché, meh). I’ve gotten a big fan of it’s instant cross-compatibility and as the site is planned with a blog in mind I do not consider it impossible that it will be visited by mobile users.

And that specific blog is what causes me problems. Having a blog post span about the whole grid (span12, up to 1170px in width) creates a massive wall of text that would scare everyone away. Instead, I decided to create (atleast the previews) in span6, which seems reasonable to me and also works good for mobile users. But as I don’t want more than 1 per row I’ll need to center it somehow, and I would prefer to do it “the Bootstrap way”.

The official docs pointed me to the .offset* classes, which work great on desktops, but will be preserved when switching to the mobile layout, creating an ugly gap on the left side. Without the offset it works without problems on the mobile version (1 post per row, no gap left or right) but on desktops it is left-aligned. Here the relevant bit of the code:

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 offset, working as intended on 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 get it to behave like I want to (cross-compatible centering of the element while keeping all text in it left-aligned)? I’d guess I’ll need to change the bootstrap-responsive.css, but I’d like to restrain from messing with the original files…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Somehow I just got an idea that turned out to be working perfectly fine, without using any CSS modifications:

    To center the element using the grid-system we fill the rest of the row with placeholders. For my span6-example that would 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 results in a centered version on desktop and tablets, and in a full-width version on phones. However, due to the fluid layout, there will be gaps in the mobile layout, as the empty div’s also take a small amount of space. But as that problem only occurs on phones, we can avoid it by adding the hidden-phone-class to the placeholder-div’s, like this:

    <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, that works like I intended it to, atleast on Bootstrap version 2.1.0…

    • 0