title: How to print nicely table in bootstrap that is formed with controls?
body: <p>I'm trying to print a document, that is formed with bootstrap. Requirement is that print should look well/nice. (Because this document is archivised)</p>
  
  <p>The problem is, I've done a table, that is made full of controls (input fields).</p>
  
  <p>It's simple drug prescription formula, and the doctor can prescribe as many drugs as he wants.</p>
  
  <p>In the web browser it looks good:<a href="https://i.stack.imgur.com/yOD2Z.png" rel="nofollow noreferrer">print-browser</a>
  But, when I want to print it... it breaks: <a href="https://i.stack.imgur.com/B3TNw.png" rel="nofollow noreferrer">print-printer</a>.</p>
  
  <p>The code, looks like this:</p>
  
  <pre><code> &lt;div class="row"&gt;
              &lt;div class="col-sm-3 text-center"&gt;
                  &lt;label&gt;Wpisz nazwę leku&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="row col-sm-9"&gt;
  
                  &lt;div class="col-sm-3 text-center"&gt;
                      &lt;label&gt;Dawka startowa&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3 text-center"&gt;
                      &lt;label&gt;Dawka docelowa&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3 text-center"&gt;
                      &lt;label&gt;Dawka docelowa od&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-2 text-center"&gt;
                      &lt;label&gt;Dawka max. (tolerowana)&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-1 text-center"&gt;
                      &lt;label for="deleteDrug"&gt;Usuń&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row" ng-repeat="drug in visit.prescribedDrugs"&gt;
              &lt;div class="col-sm-3"&gt;
                  &lt;select class="form-control" ng-options="drug.id as drug.name group by getDrugFullTypeName(drug) for drug in technical.drugs track by drug.id"
                          ng-model="drug.drugItemId"&gt;&lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="row col-sm-9"&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input id="PrescribedTargetDose" class="form-control" type="text" ng-model="drug.initialDose"&gt;
                          &lt;div class="input-group-addon input-sm"&gt;{{technical.drugs[drug.drugItemId].dosage}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input id="PrescribedTargetDose"
                                 class="form-control"
                                 type="text"
                                 ng-model="drug.targetDose"
                                 ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated"&gt;
                          &lt;div class="input-group-addon input-sm"&gt;{{technical.drugs[drug.drugItemId].dosage}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
                  &lt;div class="col-sm-3"&gt;
                      &lt;p class="input-group "&gt;
                          &lt;input type="text"
                                 name="PrescribedDrugCalendar"
                                 id="newPrescribedDrugCalendar"
                                 class="form-control"
                                 datepicker-popup="yyyy-MM-dd"
                                 ng-model="drug.targetDoseFrom[$index]"
                                 is-open="isPrescribedTargetDoseFromCalendarOpened[$index]"
                                 close-text="Zamknij"
                                 placeholder="rrrr-mm-dd"
                                 current-text="Dzisiaj"
                                 clear-text="Wyczyść"
                                 ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated" /&gt;
                          &lt;!--ng-required="true"--&gt;
                          &lt;span class="input-group-btn hidden-print"&gt;
                              &lt;button class="btn btn-default"
                                      ng-click="openPrescribedTargetDoseFromCalendar($event, $index)"
                                      ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated"&gt;
                                  &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
                              &lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-2 text-center"&gt;
                      &lt;input type="checkbox" id="CBisEffectivelyMaximalForPrescription" ng-model="drug.isEffectivelyMaximal"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-1 text-center hidden-print"&gt;
                      &lt;button type="button"
                              class="btn btn-default text-center"
                              ng-click="removePrescribedDrug($index)"
                              ng-disabled="visit.prescribedDrugs.length==1"&gt;
                          &lt;span class="glyphicon glyphicon-minus text-center" aria-hidden="true"&gt;&lt;/span&gt; Usuń
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And  description for it:
   I have labelled row:
      
                  
                      Wpisz nazwę leku
                  
                  </p>
  
  <pre><code>                &lt;div class="col-sm-3 text-center"&gt;
                      &lt;label&gt;Dawka startowa&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3 text-center"&gt;
                      &lt;label&gt;Dawka docelowa&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3 text-center"&gt;
                      &lt;label&gt;Dawka docelowa od&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-2 text-center"&gt;
                      &lt;label&gt;Dawka max. (tolerowana)&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-1 text-center"&gt;
                      &lt;label for="deleteDrug"&gt;Usuń&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And control row: which goes like: </p>
  
  <ol>
  <li>Input field (select)</li>
  <li>Input field (integer)</li>
  <li>Input field (integer - activity based on buisness logic)</li>
  <li>Calendar</li>
  <li>Checkbox</li>
  <li>Remove item button - it's hidden print.</li>
  </ol>
  
  <p>But, it won't print as rows - instead of it creates as many rows, as many controls.
  Where I have made mistake? I'm quite new in bootstrap/angular but I've read topics about printing.
  In the index page I have:</p>
  
  <pre><code>&lt;link href="Content/bootstrap.min.css" rel="stylesheet" media="all"/&gt;
  </code></pre>
  
  <p>And i also tried to make my custom.css file with media="print" - but I don't know how to fix this problem.</p>
  
  <p>Edit: Also - how to delete this little cursor on input fields, fe. This ->  <a href="https://imgur.com/dFMVKQY" rel="nofollow noreferrer">http://imgur.com/dFMVKQY</a> </p>