I am using twitter bootstrap and the 'media-grid' feature to display some thumnabils of images. Here is what it looks like right now: http://jsfiddle.net/vXMMA/
What I would like to do is add a caption to these thumbnails.. can someone offer some idea on what changes to CSS I would need to make to enable this.
The latest bootstrap comes with a .caption 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:
<ul class="thumbnails">
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
<li class="span2">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
</ul>
<hr>
<ul class="thumbnails">
<li class="span4">
<div class="caption">
<h5>Caption above</h5>
</div>
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
</li>
<li class="span4">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/160x120">
</a>
<div class="caption">
<h5>Caption below</h5>
</div>
</li>
</ul>
You can center the caption inside the image container by just modifying the .caption class and adding the text-align: center property, like so:
.caption {
text-align:center;
}
Demo: http://jsfiddle.net/2BBnR/
Note Noticed this post is old, so the other method posted is irrelevant with the latest bootstrap, the .media-grid class is no longer used.
HTML
<li>
<a href="#">
<legend >Caption</legend>
<img class="thumbnail" src="http://placehold.it/140x90" alt="">
</a>
</li>
CSS
legend { margin:3px; text-align:center;width:100%}
Working DEMO
Just use the <legend> tag before or after each image, and add the text-align:center style to the image grid.
See this demo, it works great.
Related
I am a beginner and use Bulma CSS and try to make a side menu by default CSS. Everything seems to be simple, but my content in the column is cut and has the wrong width.
`
<div class="columns is-fullheight" style="background-color: lightgrey;">
<aside class="column is-2 section is-narrow-mobile is-hidden-mobile is-fullheight" style="background-color: lightblue;">
<div class="menu">
<p class="menu-label is-hidden-touch">Navigation</p>
<ul class="menu-list">
<li>
<a href="#" class="">
<span class="icon"><i class="fa fa-home"></i></span> Home
</a>
</li>
<li>
<a href="#" class="is-active">
<span class="icon"><i class="fa fa-table"></i></span> Links
</a>
<ul>
<li>
<a href="#">
<span class="icon is-small"><i class="fa fa-link"></i></span> Link1
</a>
</li>
</ul>
</li>
</ul>
</div>
</aside>
</div>
`
Result
If I remove class "columns" I did size what I want
So, what I do incorrect?
Is there any option to change the output of the WP block gallery component in Gutenberg editor?
Currently I set some images with external links (link to media attachment) and I get this result:
<ul class="wp-block-gallery columns-2">
<li class="blocks-gallery-item">
<figure>
<a href="...">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="...">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
</ul>
But I want to also set the title attribute for anchor element. This is the result that I want:
<ul class="wp-block-gallery columns-2">
<li class="blocks-gallery-item">
<figure>
<a href="..." title="some title">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="..." title="some title">
<img src="..." alt="" data-id="" data-link="" class="">
</a>
<figcaption>Some text</figcaption>
</figure>
</li>
</ul>
Thanks
You can use the blocks.getSaveElement filter to alter existing blocks. Take a look at this post on Wordpress Development
Can someone tell me please how can i have different top menu when scrolling. You can see example on this site http://www.pizzafan.gr. It is static menu and if you scroll the menu items are changing.
You need to replace some coding in your header.html
First, you need to replace your below code:
<div class="sticky_logo_left">
<img src="/assets/site/images/logo_mobile.png" alt="Pizza Fan Logo" width="140" class="moblogo">
</div>
From:
<div class="sticky_logo_left">
<img src="/assets/site/images/logo_mobile.png" alt="Pizza Fan Logo" width="140" class="moblogo">
<ul class="quick_menu">
<li class="first desktop">
<a href="http://www.pizzafan.gr/el">
<img src="/assets/site/images/home.png" alt="" class="desktop">
<!--<img src="/assets/site/images/home-mobile.png" alt="" class="mobile" height="18">-->
<span>Αρχική</span>
</a>
</li>
<li class="first">
<a href="http://www.pizzafan.gr/el/menu/pizzas">
<img src="/assets/site/images/slice.png" alt="" class="desktop">
<img src="/assets/site/images/slice-mobile.png" alt="" class="mobile" height="18">
<span>Menu</span>
</a>
</li>
<li class="first">
<a href="http://www.pizzafan.gr/el/restaurants">
<img src="/assets/site/images/shopping.png" alt="" class="desktop">
<img src="/assets/site/images/shopping_mobile.png" alt="" class="mobile" height="18">
<span>Καταστήματα</span>
</a>
</li>
<li class="hover" data-toggle="modal" data-target="#callBackModal">
<a href="javascript:void();" class="callmeback">
<img src="/assets/site/images/call.png" alt="" class="desktop">
<img src="/assets/site/images/call_mobile.png" alt="" class="mobile" height="18">
<span>Call Me Back</span>
</a>
</li>
</ul>
</div>
And Then, change your static menu images with this color code: #00742D
just make your menu images with above mention color code.
and you will see same menu items in your scrolling menu check this similar scrolling menu example.. Menu both in simple and scrolling with same menu items/ options.
I trying to put few html elements to show them properly. But could not get how to place them inline.
CODEPEN : CODEPEN DEMO
<div class="jumbotron">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" height="35">
</a>
<div class="media-body">
<h6 class="media-heading"> This is small description of image </h6>
</div>
</li>
</ul>
<h6>Wat more? ....... </h6>
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Only value
</a>
</li>
<span> Above code should look like this </span>
<img src="http://snag.gy/cPTCL.jpg">
<div class="row">
<div class="span4">
<h2>Cele mai vandute</h2>
</div>
<div class="span10 offset1 well">
<ul class="thumbnails">
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
<li class="span2">
<img data-src="holder.js/200x100" alt="">
</li>
</ul>
</div>
</div>
Hello i'm having trouble in bootstrap css to center this span in a container class.
Can someone explain to me how centering in bootstrap works specially for spans. thank you very much
You have it explained in bootstrap site.
Normally, your spans may sum 12 (until you customize it).
Also you are using <li> elements instead of <div>, which is the element that bootstrap uses for the grid
Some adjusts for your code:
<div class="row">
<div class="span2">
<h2>Cele mai vandute</h2>
</div>
<div class="span10">
<div class="row">
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
<div class="span1">
<img data-src="holder.js/200x100" alt="">
</div>
</div>
</div>
</div>
i used ul and li instead of div's because on bootstrap website on examples it shows with ul and li.. not with div's
per one row i can have a total of 12 and after that i need to work on another row again with a max of 12? like this:
<div class="row">
<span class="9">...</div>
<span class="3">...</div>
</div>
<div class="row">
<span class="9">...</div>
<span class="3">...</div>