Images

SHARE

Responsive Images

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

To center images which use the .img-responsive class, use .center-block instead of .text-center.

<img src="..." class="img-responsive" alt="Responsive image">

Image Shapes

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

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
NatureWorks _ Images

Best Practices

For an image to be full-width on mobile (>768px), make sure the image size is at least 650px wide (assuming two-column layout). You will have to use row columns to constrain to the column for desktop.

Methods
  • Constrain the image using a row column and check the Responsive Image checkbox
  • constrain via a specific class targeted in CSS and then set specific class to width:100%; height:auto in media query for specified breakpoint


Hover Zoom

Innovation Takes Root 
/*Utility Classes*/
.hover-zoom {position:relative; overflow:hidden;}
.hover-zoom img {
  -ms-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.hover-zoom:hover img, .hover-zoom img:hover {
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.hover-zoom:after {
  color:#fff;
  font-family:FontAwesome;
  text-align:center;
  content:"\f067";
  position:absolute;
  right:0;
  bottom:0;
  width:40px;
  height:40px;
  padding:10px 0;
  background-color:rgba(55, 67, 90, 0.8);
  z-index:2;
}
.hover-zoom:hover:after {background-color:rgba(55, 67, 90, 1);}

Don’t just take our word for it

I strongly recommend Innovation Takes Root. It's a good opportunity to understand and see what happens in this area of biopolymers. It's an international event and not just on PLA. I think it's well done, well-managed, and well-organized. It was a good investment for me.
Marco Garilli
Marco Garilli

Innovation Expert - Polymers, Electrolux

I'd definitely come back (to ITR) and recommend it. I think many different industries could learn something from a conference like this - it really is focused on the next level of sustainability.
maddie guilory
Maddie Guillory

Vice President, Titan Robotics

It has been a wonderful event; very well organized. I especially appreciate the scheduling of activities, the alternation of speeches, and time to network, which has been one of the key successes from my point of view. We also felt very supported by your team; we had the feeling you believe in what Flo is doing and, for us, that's very important.
Tazio Zerbini
Tazio Zerbini

Operations Director, Flo S.p.A.

See All Reviews