JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">  
  <h4>Image Thumbnail</h4>
  <p>The .img-thumbnail class creates a thumbnail of the image:</p>
  <img src="https://tctechcrunch2011.files.wordpress.com/2016/01/nasa-spacewalk.jpg" class="img-thumbnail" alt="NASA Spacewalk" width="64">
  <h4>Rounded Corners</h4>  
  <p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>
  <img src="https://tctechcrunch2011.files.wordpress.com/2016/01/nasa-spacewalk.jpg" class="img-rounded" alt="NASA Spacewalk" width="215" height="216">
  <h4>Image Circle</h4>
  <p>The .img-circle class gives circle shape to an image (not available in IE8):</p>
  <img src="https://tctechcrunch2011.files.wordpress.com/2016/01/nasa-spacewalk.jpg" class="img-circle" alt="NASA Spacewalk" height="216">   
  <h4>Image Responsive</h4>
  <p>Resize the browser window to see the effect:</p>
  <img src="https://tctechcrunch2011.files.wordpress.com/2016/01/nasa-spacewalk.jpg" class="img-responsive" alt="NASA Spacewalk" width="860" height="864">
</div>

JavaScript

// How To Use Images In Bootstrap
// .img-thumbnail
// .img-rounded
// .img-circle
// .img-responsive
var viewport = document.createElement("meta");
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1');
document.getElementsByTagName('head')[0].appendChild(viewport);