Hallo Mary and Gareth,
Thank you for your useful answer and links to getbootstrap.com.
I 'baked' the following HTML-CSS code for my site, in order to try to achieve what I want:
----------
<div class="container-fluid">
<ul class="thumbnails text-center">
<li class="img-rounded" style="background-color: #d5d5d5;"><br />
<div class="thumbnail">
<img src="http://.../draftfile.php/myImage.png" alt="The Subjective Experience of Reality" role="presentation" class="img-responsive, img-rounded" width="99%" />
<p>Thumbnail caption...</p>
</div>
</li>
</ul>
</div>
----------
This code works fine, but has a few flaws:
1. The container is indented from the left side.
I prefer the image-box to be aligned to the left, as is all the text of my lesson-content.
Is there an image-class similar to thumbnails-class without indentation?
If so, then I will remove the attribute 'text-center', so the caption will also become left-aligned.
2. I use a <br /> to create spacial room above the image.
Is there another way to do this?
3. I put the width of the image to 99%, because the picture became too much blown-up, causing a scroll bar in a web browser (on PC).
How can I avoid this properly?
4. I do not know the attribute 'role is presentation'.
What is the use of the property 'Role'?
5. I use the standard Moodle-themes (skins): More and Clean.
Are the CSS-styling rules of these themes based on Bootstrap, and can I rely on this foundation (mutual cooperation) to evolve with Moodle in the future?
Friendly regards,
Rges Cper
Moodle 3.0