Modelo de OS

index.html

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<div class="container" style="margin-left: 25px; margin-right: 25px;">
  <div class="col-xs-12">

    <div class="row page-header">
      <div class="col-xs-4"><b class="text-left" style="font-size: 15px;">REQUISIÇÃO DE MATERIAL</b></div>
      <div class="col-xs-6"><b class="text-center" style="font-size: 15px;">ORDEM DE SERVIÇO [[[tipo]]]</b></div>
      <div class="col-xs-2"><span class="text-right" style="font-size: 15px;">Nº [[numero]]</span></div>
    </div>

    <div class="row">
      <div class="col-xs-4">
        <p style="font-size: 11px;"> <strong>Data do pedido: </strong> [[data_cadastro]] </p>
      </div>
      <div class="col-xs-4">
        <p style="font-size: 11px;"> <strong>Contato:</strong> [[contato]] </p>
      </div>
      <div class="col-xs-4">
        <p style="font-size: 11px;"> <strong>Atendente: </strong> [[atendente]] </p>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12">
        <p style="font-size: 11px;"> <strong>Técnico(s):</strong> [[tecnicos]] </p>
      </div>
    </div>

    <div class="row">
      <div class="container" style="border: 1px solid rgb(110, 110, 110); margin-bottom: 5px; border-radius: 3px;">
        <div class="col-xs-8" style="margin-top: 10px;">
          <div class="row">
            <p style="font-size: 12px;"> <strong>Cliente: </strong> [[cliente]] </p>
          </div>
          <div class="row">
            <p style="font-size: 12px;"> <strong> Cidade: </strong> [[cidade]] </p>
          </div>
          <div class="row">
            <p style="font-size: 12px;"> <strong> Serviço: </strong> [[servico]] </p>
          </div>
          <div class="row">
            <p style="font-size: 12px;"> <strong> Protocolo de Atendimento: </strong> [[protocolo_atendimento]] </p>
          </div>


        </div>

        <div class="col-xs-4" style="margin-top: 10px;">
          <div class="row">
            <p style="font-size: 12px;"> <strong> Telefone: </strong> [[telefone]] </p>
          </div>

          <div class="row">
            <p style="font-size: 12px;"> <strong> Endereço: </strong> [[endereco]] </p>
          </div>
          <div class="row">
            <p style="font-size: 12px;"> <strong> Descrição do Equipamento do Cliente: </strong> [[equipamentos]] </p>
          </div>

        </div>
      </div>

      <div class="container" style="border: 1px solid rgb(110, 110, 110); margin-bottom: 5px; border-radius: 3px;">
        <div class="col-xs-12" style="margin-top: 10px;">
          <div class="row">
            <p style="font-size: 12px;"> <strong> Motivo da solicitação: </strong> [[motivo_solicitacao]] </p>
          </div>
        </div>
      </div>

      <div class="container" style="border: 1px solid rgb(110, 110, 110); margin-bottom: 5px; border-radius: 3px;">
        <div class="col-xs-12" style="margin-top: 10px;">
          <div class="row">
            <p style="font-size: 12px;"> <strong> Descrição do serviço a ser realizado: </strong> [[descricao_servico]] </p>
          </div>
        </div>
      </div>

<!--       <div class="container" style="border: 1px solid rgb(110, 110, 110); margin-bottom: 5px; border-radius: 3px;">
        <div class="row" style="margin-top: 10px;">
          <div class="col-xs-4" style="margin-top: 5px;">
            <p style="font-size: 12px;"><strong>Valor a ser cobrado: ___________________</strong></p>
          </div>
          <div class="col-xs-2">
            <p style="font-size: 12px;"><strong>Forma de Pagamento:</strong></p>
          </div>
          <div class="col-xs-2">
            <p style="font-size: 12px;"><input type="radio"> À Vista</p>
          </div>
          <div class="col-xs-2">
            <p style="font-size: 12px;"><input type="radio"> Próximo Boleto</p>
          </div>
          <div class="col-xs-2">
            <p style="font-size: 12px;"><input type="radio"> Serviço sem custo</p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-3">
            <p style="font-size: 12px;"> <strong> Início: ____/____/_____ </strong> </p>
          </div>
          <div class="col-xs-3">
            <p style="font-size: 12px;"> <strong> Hora de Início: ____:____ </strong> </p>
          </div>
          <div class="col-xs-3">
            <p style="font-size: 12px;"> <strong> Término: ____/____/_____ </strong> </p>
          </div>
          <div class="col-xs-3">
            <p style="font-size: 12px;"> <strong> Hora de Térm.: ____:____ </strong> </p>
          </div>
        </div>
      </div> -->
    </div>

    <div class="row">

      <div class="col-xs-4 text-center">
        <p style="font-size: 11px;"> <strong>Autorização Supervisor (Requisição de Material): </strong></p>
        <div class="row"><br>_____________________________________</div>
      </div>

      <div class="col-xs-4 text-center">
        <p style="font-size: 11px;"> <strong>Almoxarifado: </strong></p>
        <div class="row"><br>_____________________________________</div>
      </div>

      <div class="col-xs-4 text-center">
        <p style="font-size: 11px;"> <strong>Entregue ao técnico: </strong></p>
        <div class="row"><br>_____________________________________</div>
      </div>
    </div>



  </div>
</div>