bootstrap css example

plot.html.erb

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">World map</a></li>
      </ul>
     <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
      </ul>
    </div>
  </div>
</nav>


<div class="container text-center">
  <div class="row">
    <div class="col-md-3 well">
      <div class="well">
        <p>
          <span class="label label-primary">ACME Corporation</span>
          <span class="label label-primary"><%= Time.now %></span>
        </p>
      </div>
      <div class="row">
        <div class="ccol-md-12">
          <%= image_tag "http://placehold.it/150x80?text=IMAGE", { class: "img-responsive", style: "width:100%", alt: "Image" } %>
          <p>result table</p>
          <p>result table</p>
          <p>result table</p>
          <p>result table</p>
          <p>result table</p>
          <p>result table</p>
          <p>result table</p>
        </div>
      </div>
    </div>

    <div class="col-md-7">
      <div class="row">
        <div class="col-md-12">
          <!-- <%= image_tag "part-2.png", size: "100x50" %> -->
          <%= image_tag "http://placehold.it/150x80?text=IMAGE", { class: "img-responsive", style: "width:100%", alt: "Image" } %>
          <p>Project graph 1</p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <%= image_tag "http://placehold.it/150x80?text=IMAGE", { class: "img-responsive", style: "width:100%", alt: "Image" } %>
          <p>Project graph 2</p>
        </div>

        <div class="col-md-6">
          <%= image_tag "http://placehold.it/150x80?text=IMAGE", { class: "img-responsive", style: "width:100%;height:50%", alt: "Image" } %>
          <p>Project graph 3</p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <%= image_tag "http://placehold.it/150x80?text=IMAGE", { class: "img-responsive", style: "width:100%;height:50%", alt: "Image" } %>
          <p>Project graph 4</p>
        </div>
      </div>

    </div>

    <div class="col-md-2">
      <div class="thumbnail">
        <!-- <%= image_tag "part-1.png", size: "300x200" %> -->
        <%= image_tag "http://placehold.it/150x80?text=IMAGE", { class: "img-responsive", style: "width:100%;height:50%", alt: "Image" } %>
        <button class="btn btn-primary">Info</button>
      </div>
      <div class="row">
        <div class="col-md-9">
          <%= image_tag "http://placehold.it/150x80?text=IMAGE", { class: "img-responsive", style: "width:100%;height:50%", alt: "Image" } %>
          <p>Project graph 5</p>
        </div>
      </div>
      <div class="row">
       <div class="col-md-12">
         <%= image_tag "http://placehold.it/150x80?text=IMAGE", { class: "img-responsive", style: "width:100%;height:50%", alt: "Image" } %>
         <p>Project graph 6</p>
       </div>
      </div>
      <div class="row">
        <div class="col-md-12">
         <%= image_tag "http://placehold.it/150x80?text=IMAGE", { class: "img-responsive", style: "width:100%;height:50%", alt: "Image" } %>
          <p>Project graph 7</p>
        </div>
      </div>
    </div>

  </div>
</div>