...
Machi

machidesign@gmail.com

  1. Home
  2. Basic UI

Images

Image Style

Images Shapes

Add classes to an <img> element to easily style images in any project.

...
...
...

Thumbnails - Default

By default, thumbnails are designed to showcase linked images with minimal required markup.

...
...
...
...

Images - Bordered

An image may include a border to emphasize the edges of white or transparent content.

...
...
...

Thumbnalis - Custom Content

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

...

Thumbnail Label

Lorem ipsum Dolore nulla mollit consectetur enim est adipisicing dolor exercitation do sed irure occaecat labore in proident occaecat sunt dolore aliqua qui.

Button Button
...

Thumbnail Label

Lorem ipsum Minim in in Ut officia cupidatat sed elit do cillum in dolore aliquip et ullamco ea do nisi adipisicing irure officia eiusmod quis eu labore ea.

Button Button
...

Thumbnail Label

Lorem ipsum Labore laborum nisi ex et ullamco in anim enim minim anim id in sed dolor occaecat fugiat mollit exercitation do in pariatur sint eu proident ad.

Button Button

Images - Fluid

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-fluid class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

...