Jump to: navigation, search

Bootstrapskin Image Boxes

Image Boxes

Third.jpg

lighter

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third.jpg

light

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third.jpg

dark

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third.jpg

darker

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third.jpg

neutral

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third.jpg

No colour

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

There are three css classes to take note of, the first, "col-md-4" sets the box width, "mwbs-color-darker" sets the text colour and "lighter-background" sets the box colour.

          <div class="col-md-4 mwbs-color-darker">
      <div class="thumbnail lighter-background">http://megamenu.sourceforge.net/images/Third.jpg
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p class="text-justify">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
        eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div></div>
    </div>

There are several options available; for the box colour you can use;

          <div class="thumbnail lighter-background">
          <div class="thumbnail light-background">
          <div class="thumbnail dark-background">
          <div class="thumbnail darker-background">
          <div class="thumbnail neutral-background">
          <div class="thumbnail">

And for text colours you can use;

          <div class="col-md-4 mwbs-color-lighter">
          <div class="col-md-4 mwbs-color-light">
          <div class="col-md-4 mwbs-color-dark">
          <div class="col-md-4 mwbs-color-darker">
          <div class="col-md-4 mwbs-color-white">

As with all aspects of Bootstrap, the image boxes are highly configurable, for example you can also add buttons and icons, as well as adding extra styling to the text.

If you plan to use a button remember "a class" links do not work with Mediawiki, use [[]] wiki syntax with buttons when linking to internal articles and [] wiki syntax for external links.

If in doubt ask at the forums.

bootstrapskin-commercial-skin.png