CODEWITHSUNDEEP
htmlcss
user15361861
user15361861

Reputation:

How to print page in two columns?

I have the following HTML page:

<div class="container">
       <div class="row">
            <div class="col-md-6">
                <page size="A5"></page size="A5">
            </div>
            <div class="col-md-6">
                <page size="A5"></page size="A5">
            </div>
      </div>
</div>

When I try to print this document in album mode A4, I am not getting one sheet divided in two parts A5.

How to do that?

Upvotes: 0

Views: 696

Answers (2)

Dhana D.
Dhana D.

Reputation: 1720

CSS has provided the grid display so outer package like bootstrap isn't that necessary for this task. You can also customize the gap between 2 pages by using the attribute gap under the .row style in the CSS. Also this reference may help you on building paper-like appearance.

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

page[size="A5"] {
  width: 14.8cm;
  height: 21cm;
}

page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
<div class="container">
       <div class="row">
            <div class="col col-md-6">
                <page size="A5"></page size="A5">
            </div>
            <div class="col col-md-6">
                <page size="A5"></page size="A5">
            </div>
      </div>
</div>

Upvotes: 0

MeDead
MeDead

Reputation: 197

So first of all I don't think that is an actual HTML tag.

Try to change the tag to an with the required css. Open up the code snippet in full screen to see the result.

.page {
  background-color: black;
  height: 21cm;
  width: 14.8cm;
 }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="container">
       <div class="row">
            <div class="col-md-6">
                <div class="page"></div>
            </div>
            <div class="col-md-6">
                <div class="page"></div>
            </div>
      </div>
</div>

Upvotes: 1

Related Questions