JSFiddle - React, Tailwind, and code Playground

Image in a row

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <h1>Two in a row</h1>
  <div class="col-xs-12 col-sm-4">
    <div class="col-xs-6">
      <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
    </div>
    <div class="col-xs-6">
      <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="col-xs-6">
      <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
    </div>
    <div class="col-xs-6">
      <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="col-xs-6">
      <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
    </div>
    <div class="col-xs-6">
      <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
    </div>
  </div>
</div>
<div class="container">
  <h1>One per row</h1>
  <div class="col-xs-12 col-sm-2">
    <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
  </div>
  <div class="col-xs-12 col-sm-2">
    <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
  </div>
  <div class="col-xs-12 col-sm-2">
    <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
  </div>
  <div class="col-xs-12 col-sm-2">
    <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
  </div>
  <div class="col-xs-12 col-sm-2">
    <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
  </div>
  <div class="col-xs-12 col-sm-2">
    <img src="http://stuffpoint.com/cats/image/305333-cats-cute-kitty.jpg" />
  </div>
</div>

CSS

img {
  max-width: 100%;
  height: auto;
}