Bootstrap changing color in print

Asked

Viewed 647 times

2

I made a report system that is displayed to make printing on A4 sheet. I put some edges on it to make printing. The problem is that at the time of printing, it prints everything black. The problem is the bootstrap, because when I take it all gets right.

Form

Note: The borders in the code below are #000 (black) but any color I put does not work

<div class="container" id="all-recibo" style="font-size:12pt;border:2px solid #000;border-radius:10px;margin-top:10px;padding-top:10px;">

    <div class="row" style="border-bottom:2px solid #000;margin-bottom:10px;">
        <div class="col-md-4" id="logo_recibo">
            <img src="<?php echo base_url('assets/images/content/'.$empresa->logo);?>" class="img-responsive">
        </div>

        <div class="col-md-8 text-center">
            <h3 style="color:#BB6B5A">Telefone: <?php echo $empresa->telefone;?></h3>
            <h4 style="color:#BB6B5A">Email: <?php echo $empresa->email;?></h4>
            <h4><?php echo $empresa->site;?></h4>
        </div>

    </div>

    <div class="row">
        <div class="col-md-3">&nbsp;</div>
        <div class="col-md-5 text-center"><h1>Recibo</h1></div>
        <div class="col-md-3" style="border:2px solid #000;border-radius:10px;"><h3><strong>R$ <?php echo $recibo->valor;?></strong></h3></div>
        <div class="col-md-1">&nbsp;</div>
    </div>

    <div class="row">
        <div class="col-md-11">Recebi do Sr. (a) <u><?php echo $recibo->cliente;?><?php echo str_repeat("&nbsp; ", (313 - strlen($recibo->cliente)));?></u></div>
    </div>

    <br>
    <div class="row">
        <div class="col-md-11">A importância de <u><?php echo $recibo->extenso;?><?php echo str_repeat("&nbsp; ", (317 - strlen($recibo->extenso)));?></u></div>
    </div>

    <br>
    <div class="row">
        <div class="col-md-11">Referente à <u><?php echo $recibo->servico;?><?php echo str_repeat("&nbsp; ", (321 - strlen($recibo->servico)));?></u></div>
    </div>

    <br><br>

    <div class="row">
        <div class="col-md-6">&nbsp;</div>
        <div class="col-md-3" id="data_recibo">Sorocaba, <u><?php echo date('d/m/Y');?></u></div>

        <div class="col-md-6">

            <div class="text-center">
            ____________________________________________
            <br>
            ASSINATURA
            </div>
        </div>

        <div class="col-md-3" id="condicoes_recibo">
            <p>Só aceitamos reclamações dentro de 48 horas</p>
        </div>

    </div>
</div>
html css twitter-bootstrap printer

1 answer

2


Make use of media query classes for about writing bootstrap style

Example: CSS code to handle print styles, add it between the <head></head tags>

<style type="text/css">
    @media print { 
        /* aqui fica todo o seu estilo para impressão */
        .borda { border:2px solid #000 !important; } 
    }
</style>

Now where you want to print the edges put the class edge he goes on to write the bootstrap.

Example:

<div class="col-md-3 borda" style="border-radius:10px;"><h3
<strong>R$ <?php echo $recibo->valor;?></strong></h3></div>

Browser other questions tagged html css twitter-bootstrap printer

You are not signed in. Login or sign up in order to post.