title: Printing Twitter Bootstrap correctly
body: <p>I'm really struggeling to print my Twitter Bootstrap views correctly, and was wondering if anyone could point me in the right direction. I've added a custom "print.css" which overrides some of the original bootstrap styling, as well of styling some of my own components.</p>
  
  <p>This is my print dialog:
  <img src="https://i.stack.imgur.com/sRdho.png" alt="enter image description here"></p>
  
  <p>Not sure if you can tell so easily from the image, but the well has lost its background as well as not spanning across the entire page width. Also, the 'columns' or 'spans' seem to be all wonky. Page is built up like this: (Only showing first row to keep it clean)</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span3"&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div style="height: 150px; width: 300px"&gt;
                      &lt;img class="img-rounded" src='data:image/png;base64,@Model.Unit.Image64' /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row-fluid"&gt;
                  ...
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="span4"&gt;
              ...Pie chart control
          &lt;/div&gt;
          &lt;div class="span5"&gt;
              ...Bar chart control
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my print.css:</p>
  
  <pre><code>@media print {
      body {
          margin: 0;
          padding: 0;
          line-height: 1.4em;
          word-spacing: 1px;
          letter-spacing: 0.2px;
          font: 13px Arial, Helvetica,"Lucida Grande", serif;
          color: #000;
      }
  
      #print-btn #update-btn #nav-left #nav-bar, #selectUnitContainer, .navbar, .sidebar-nav {
          display: none;
      }
  
      #print-btn, #update-btn, #units {
          display: none;
      }
  
      #nav-left {
          display: none;
      }
  
      #report-container {
          visibility: visible;
      }
  
      .well .span12{
          width: 100%;
          visibility: visible;
      }
  
      .navbar {
          display: none;
      }
  
      .sidebar-nav {
          display: none;
      }
  }
  </code></pre>