Databases
StackOverflow2013
Postsdbo
POCentering a Bootstrap element cross-device compatible
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCentering a Bootstrap element cross-device compatible
    text
    copied!<p>Community,</p> <p>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.</p> <p>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". </p> <p>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:</p> <p>No offset, working as intended on mobile devices:</p> <pre><code>&lt;div class="row-fluid"&gt; &lt;div class="span6"&gt; &lt;h3&gt;Blog Post #1 Title&lt;/h3&gt; &lt;h5&gt;Category, Sub-Category - 01.01.1970&lt;/h5&gt; &lt;p&gt;Lorem ipsum...&lt;/p&gt; &lt;/div&gt;&lt;!--/span6--&gt; &lt;/div&gt;&lt;!--/row--&gt; </code></pre> <p>With offset, working as intended on desktops:</p> <pre><code>&lt;div class="row-fluid"&gt; &lt;div class="span6 offset3"&gt; &lt;h3&gt;Blog Post #1 Title&lt;/h3&gt; &lt;h5&gt;Category, Sub-Category - 01.01.1970&lt;/h5&gt; &lt;p&gt;Lorem ipsum...&lt;/p&gt; &lt;/div&gt;&lt;!--/span6--&gt; &lt;/div&gt;&lt;!--/row--&gt; </code></pre> <p>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...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload