CODEWITHSUNDEEP
htmlcssreactjs
Lohit Geddam
Lohit Geddam

Reputation: 43

How do you change the width of a div when printing?

The div is currently set at col-lg-8. I want it to be col-lg-12 only when I print. I am already removing the component that was taking the rest of the space when I am printing.

I realized that @media print does not work. I am wondering it I should be using something related to d-print.

Upvotes: 1

Views: 3338

Answers (1)

Duc Hong
Duc Hong

Reputation: 1189

I'm assuming you're using Bootstrap for your project (by using class .col-lg-8). Unfortunately, Bootstrap doesn't come with a defined grid for printing media query, they just have some responsive utility classes to make certain content visible/hidden on print, you have to defined it your own.

The required steps are quite straightforward to update, assuming you have this in your HTML:

<div class="container project-name">
  <div class="row">
    <div class="col-lg-4 col-print-12">AA</div>
    <div class="col-lg-4 col-print-6">BB</div>
  </div>
</div>

You need a CSS block section defined specific to be used in printing.

@media print {
  .project-name .col-print-1{ width: calc(1/12 * 100%); }
  .project-name .col-print-2{ width: calc(2/12 * 100%); }
  ...
}

see this answer for more information about Bootstrap grid for printing

Upvotes: 1

Related Questions