Databases
StackOverflow2013
Postsdbo
POis it wrong for bootstrap3 columns to add up to less than 12? (or, understanding -offset)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POis it wrong for bootstrap3 columns to add up to less than 12? (or, understanding -offset)
    primarykey
    data
    text
    <p>Short version: is col-x-offset-n applied only to the left, or does it apply to left and right if this is what it needs to make 12? For instance can I just do "col-x-10 col-x-offset-1" to get a 10 column container with 1 extra column on both left and right? It seems to work but this isn't what the documentation suggests should happen.</p> <p>Longer version: As an example, I'm trying to center a div using bootstrap 3 grid system. At col-xs size I want it to be full width, but above that I want it centered with a little more padding on each side. All docs of course say that the number of columns should total 12. So if I do:</p> <pre><code> &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col-sm-1"&gt; &lt;/div&gt; &lt;div class="col-sm-10"&gt; ...content here... &lt;/div&gt; &lt;div class="col-sm-1"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>it works as I expect with the two empty col-sm-1 columns acting like padding on the left and right. But I can do it with less markup using -offset:</p> <pre><code>&lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col-sm-10 col-sm-offset-1"&gt; ...content here... &lt;/div&gt; &lt;div class="col-sm-1"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>As the bootstrap docs say: "Move columns to the right using .col-md-offset-* classes. These classes increase the <strong>left</strong> margin of a column by * columns." So in this case I have 10 columns, plus 1 column in the offset, plus 1 column in the following empty col-sm-1 div, equals 12 columns.</p> <p>Now for the question finally: if I remove the final empty col-sm-1 div I still get the same result (page is centered as with both examples before), but my columns now only add up to 11.</p> <pre><code>&lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col-sm-10 col-sm-offset-1"&gt; ...content here... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Is this okay to do? Is Bootstrap just filling in the last column for me? I would like to just drop it and use only "col-sm-10 col-sm-offset-1" or "col-sm-8 col-sm-offset-2" or "col-sm-6 col-sm-offset-3" (even though these only add up to 11,10,and 9 total columns respectively), but is this really the way to do it or is it just a quirk that it works out okay? It almost seems like bootstrap applies the offset to both left <em>and</em> right if it needs to, but I can't find any documentation to confirm that.</p> <p>(And maybe with this simple example there is an easier way to do what I describe here, but I'm trying to understand how -offset works, not to just center a simple div with margin: 0 auto; or something like that.)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdevo
    1. USjimb
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POis it wrong for bootstrap3 columns to add up to less than 12? (or, understanding -offset)
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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