Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The latest bootstrap comes with a <code>.caption</code> class that you can add to your thumbnail grid, you can place it above or below your media grid quite easily and it works like so:</p> <pre><code>&lt;ul class="thumbnails"&gt; &lt;li class="span2"&gt; &lt;div class="caption"&gt; &lt;h5&gt;Caption above&lt;/h5&gt; &lt;/div&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img alt="" src="http://placehold.it/160x120"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="span2"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img alt="" src="http://placehold.it/160x120"&gt; &lt;/a&gt; &lt;div class="caption"&gt; &lt;h5&gt;Caption below&lt;/h5&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="span2"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img alt="" src="http://placehold.it/160x120"&gt; &lt;/a&gt; &lt;div class="caption"&gt; &lt;h5&gt;Caption below&lt;/h5&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="span2"&gt; &lt;div class="caption"&gt; &lt;h5&gt;Caption above&lt;/h5&gt; &lt;/div&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img alt="" src="http://placehold.it/160x120"&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;hr&gt; &lt;ul class="thumbnails"&gt; &lt;li class="span4"&gt; &lt;div class="caption"&gt; &lt;h5&gt;Caption above&lt;/h5&gt; &lt;/div&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img alt="" src="http://placehold.it/160x120"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="span4"&gt; &lt;a class="thumbnail" href="#"&gt; &lt;img alt="" src="http://placehold.it/160x120"&gt; &lt;/a&gt; &lt;div class="caption"&gt; &lt;h5&gt;Caption below&lt;/h5&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>You can center the caption inside the image container by just modifying the <code>.caption</code> class and adding the <code>text-align: center</code> property, like so:</p> <pre><code>.caption { text-align:center; } </code></pre> <p>Demo: <a href="http://jsfiddle.net/2BBnR/" rel="nofollow noreferrer">http://jsfiddle.net/2BBnR/</a></p> <p><strong>Note</strong> Noticed this post is old, so the other method posted is irrelevant with the latest bootstrap, the <code>.media-grid</code> class is no longer used.</p>
    singulars
    1. This table or related slice is empty.
    1. POTwitter bootstrap media-grid: How to add a caption to the thumbnails
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRyan
    1. USAndres Ilich
    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. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTBountyClose
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CORealised it was the wrong version of bootstrap, then I came here and found the perfect answer [which also pointed this out]. Thanks a heap! - EDIT: _Can't award the bounty for another 15 hours... keep a lookout!_
      singulars
      1. PO
      1. USA T
    2. CO@AT Yeah, thats the thing with the bootstrap, you always have to keep a lookout in the changelog to see what was changed or moved/removed. I'm glad i was of help.
      singulars
      1. PO
      1. USAndres Ilich
    3. COThanks for saving me some grief!
      singulars
      1. PO
      1. USDavid Taiaroa
 

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