Page break not working

109
March 10, 2018, at 10:17 PM

I have some html page for which I am trying to apply page-break, but is not working.

<body>
    <div class="page">
        <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
            <div class="icard student m-b-20 v2018 front">
                hello
            </div><!-- /front -->
            <div class="icard student  v2018 back">
                hello
            </div><!-- /back -->
        </div><!-- /clearfix -->
        <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
            <div class="icard student m-b-20 v2018 front">
                hello
            </div><!-- /front -->
            <div class="icard student  v2018 back">
                hello
            </div><!-- /back -->
        </div><!-- /clearfix -->
    </div><!-- /page -->
    <div class="page">
        <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
            <div class="icard student m-b-20 v2018 front">
                hello
            </div><!-- /front -->
            <div class="icard student  v2018 back">
                hello
            </div><!-- /back -->
        </div><!-- /clearfix -->
        <div class="clearfix v2018-container printer-normal pull-left  m-r-5">
            <div class="icard student m-b-20 v2018 front">
                hello
            </div><!-- /front -->
            <div class="icard student  v2018 back">
                hello
            </div><!-- /back -->
        </div><!-- /clearfix -->
    </div><!-- /page -->      
</body>

My CSS for the above file apart from bootstrap default CSS is

.page {
    page-break-after: always !important;;
}
.v2018-container { position:relative; }

The page-break-always is not working at all.

This is the snippet of the actual page, which is not working.

.v2017-container, .v2018-container { position:relative; } 
.icard { 
        position: relative; 
        height:3.465in; 
        width:2.244in; 
        overflow: hidden; 
} 
   
.printer-normal .student.v2018.back { 
        transform: rotate(180deg); 
    } 
 
    .student.v2018 .photo { 
        margin-top:120px; 
    } 
 
    .student.v2018 .photo img { 
        border: 4px solid #fff; 
    } 
 
    .student.v2018 .f-name { 
        color: #1a9e7f !important; 
    } 
 
    .v2018 .bg-warning { 
        background-color: #f8d053 !important; 
    } 
 
    .v2018 .bg-danger { 
        background-color: #f55753 !important; 
    } 
 
@media print { 
    .page { 
        page-break-after: always !important; 
    } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<div class="page"> 
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5"> 
        <div class="icard student m-b-20 v2018 front"> 
            <div class="clearfix init"> 
                <div class="text-center photo"> 
                    <img src="http://via.placeholder.com/128x128" style="width:110px;" class="img img-circle">                </div> 
                <div class="m-l-20 m-r-20"> 
                    <div class="text-center m-t-10 fs-16 font-arial-narrow bold uppercase"> 
                        Mohammad Raafid                    </div> 
                    <div class="text-center fs-22 font-arial-narrow bold uppercase lh-18"> 
                        6468                    </div> 
                </div> 
                <div class="clearfix"> 
                    <div class="font-arial-narrow bold pull-left bg-warning p-l-15 p-b-5 p-t-5 p-r-10 uppercase"> 
                        LKG A                    </div> 
                                            <div class="font-arial-narrow bold pull-right bg-warning p-l-10 p-b-5 p-t-5 p-r-15 uppercase"> 
                            86                        </div> 
                                    </div> 
            </div><!--/ clearfix --> 
        </div><!-- /front --> 
 
        <div class="icard student  v2018 back"> 
            <div class="m-l-15 m-r-15 font-arial-narrow p-t-30"> 
                <div class="clearfix fs-12 m-t-30 row"> 
                    <div class="col-xs-3"> 
                        <div class="f-name lh-12">SID</div> 
                        <div class="f-value uppercase bold">6468</div> 
                    </div> 
                    <div class="col-xs-4 text-center"> 
                        <div class="f-name lh-12">HOUSE</div> 
                        <div class="f-value uppercase bold">Chinar</div> 
                    </div> 
                    <div class="col-xs-5 text-right"> 
                        <div class="f-name lh-12">ADM NO</div> 
                        <div class="f-value uppercase bold">04/16</div> 
                    </div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Name</div> 
                    <div class="f-value uppercase bold">Mohammad Raafid</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Parentage</div> 
                    <div class="f-value uppercase bold">Maajid Mushtaq Khan</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Contact(s)</div> 
                    <div class="f-value uppercase bold">9797725650, 9596046000</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Address</div> 
                    <div class="f-value uppercase bold lh-12 ">Wazirbagh, Jawahir Nagar, Srinagar</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Blood Group</div> 
                    <div class="f-value uppercase bold lh-12">AB +ve</div> 
                </div> 
                <div class="clearfix m-t-10 fs-10"> 
                    <div class="f-group pull-left"> 
                        <div class="f-name lh-10 uppercase">Date of Issue</div> 
                        <div class="f-value uppercase">10-03-2018</div> 
                    </div> 
                    <div class="f-group pull-right text-right"> 
                        <div class="f-name lh-10 uppercase">Bus Details</div> 
                        <div class="f-value uppercase"> 
                                                            86 - Jawaharnagar                                                    </div> 
                    </div> 
                </div> 
            </div> 
        </div><!-- /back --> 
    </div><!-- /clearfix --> 
 
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5"> 
        <div class="icard student m-b-20 v2018 front"> 
            <div class="clearfix init"> 
                <div class="text-center photo"> 
                    <img src="http://via.placeholder.com/128x128" style="width:110px;" class="img img-circle">                </div> 
                <div class="m-l-20 m-r-20"> 
                    <div class="text-center m-t-10 fs-16 font-arial-narrow bold uppercase"> 
                        Dayyan Murtaza Mattoo                    </div> 
                    <div class="text-center fs-22 font-arial-narrow bold uppercase lh-18"> 
                        6480                    </div> 
                </div> 
                <div class="clearfix"> 
                    <div class="font-arial-narrow bold pull-left bg-warning p-l-15 p-b-5 p-t-5 p-r-10 uppercase"> 
                        LKG A                    </div> 
                                            <div class="font-arial-narrow bold pull-right bg-warning p-l-10 p-b-5 p-t-5 p-r-15 uppercase"> 
                            62                        </div> 
                                    </div> 
            </div><!--/ clearfix --> 
        </div><!-- /front --> 
 
        <div class="icard student  v2018 back"> 
            <div class="m-l-15 m-r-15 font-arial-narrow p-t-30"> 
                <div class="clearfix fs-12 m-t-30 row"> 
                    <div class="col-xs-3"> 
                        <div class="f-name lh-12">SID</div> 
                        <div class="f-value uppercase bold">6480</div> 
                    </div> 
                    <div class="col-xs-4 text-center"> 
                        <div class="f-name lh-12">HOUSE</div> 
                        <div class="f-value uppercase bold">Chinar</div> 
                    </div> 
                    <div class="col-xs-5 text-right"> 
                        <div class="f-name lh-12">ADM NO</div> 
                        <div class="f-value uppercase bold">16/16</div> 
                    </div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Name</div> 
                    <div class="f-value uppercase bold">Dayyan Murtaza Mattoo</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Parentage</div> 
                    <div class="f-value uppercase bold">Late Irfan Majid Mattoo</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Contact(s)</div> 
                    <div class="f-value uppercase bold">9906906751</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Address</div> 
                    <div class="f-value uppercase bold lh-12 ">BulBul Bagh, Barzulla Srinagar</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Blood Group</div> 
                    <div class="f-value uppercase bold lh-12">O +ve</div> 
                </div> 
                <div class="clearfix m-t-10 fs-10"> 
                    <div class="f-group pull-left"> 
                        <div class="f-name lh-10 uppercase">Date of Issue</div> 
                        <div class="f-value uppercase">10-03-2018</div> 
                    </div> 
                    <div class="f-group pull-right text-right"> 
                        <div class="f-name lh-10 uppercase">Bus Details</div> 
                        <div class="f-value uppercase"> 
                                                            62 - Barzulla                                                    </div> 
                    </div> 
                </div> 
            </div> 
        </div><!-- /back --> 
    </div><!-- /clearfix --> 
</div> 
<div class="page"> 
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5"> 
        <div class="icard student m-b-20 v2018 front"> 
            <div class="clearfix init"> 
                <div class="text-center photo"> 
                    <img src="http://via.placeholder.com/128x128" style="width:110px;" class="img img-circle">                </div> 
                <div class="m-l-20 m-r-20"> 
                    <div class="text-center m-t-10 fs-16 font-arial-narrow bold uppercase"> 
                        TASFIYAH ZAHOOR                    </div> 
                    <div class="text-center fs-22 font-arial-narrow bold uppercase lh-18"> 
                        6521                    </div> 
                </div> 
                <div class="clearfix"> 
                    <div class="font-arial-narrow bold pull-left bg-warning p-l-15 p-b-5 p-t-5 p-r-10 uppercase"> 
                        LKG A                    </div> 
                                            <div class="font-arial-narrow bold pull-right bg-warning p-l-10 p-b-5 p-t-5 p-r-15 uppercase"> 
                            53                        </div> 
                                    </div> 
            </div><!--/ clearfix --> 
        </div><!-- /front --> 
 
        <div class="icard student  v2018 back"> 
            <div class="m-l-15 m-r-15 font-arial-narrow p-t-30"> 
                <div class="clearfix fs-12 m-t-30 row"> 
                    <div class="col-xs-3"> 
                        <div class="f-name lh-12">SID</div> 
                        <div class="f-value uppercase bold">6521</div> 
                    </div> 
                    <div class="col-xs-4 text-center"> 
                        <div class="f-name lh-12">HOUSE</div> 
                        <div class="f-value uppercase bold">Chinar</div> 
                    </div> 
                    <div class="col-xs-5 text-right"> 
                        <div class="f-name lh-12">ADM NO</div> 
                        <div class="f-value uppercase bold">57/16</div> 
                    </div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Name</div> 
                    <div class="f-value uppercase bold">TASFIYAH ZAHOOR</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Parentage</div> 
                    <div class="f-value uppercase bold">Dr. Zahoor Ahmad Parry</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Contact(s)</div> 
                    <div class="f-value uppercase bold">9906593222, 9018069559</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Address</div> 
                    <div class="f-value uppercase bold lh-12 ">Quarter No. E1, IIIM Colony, LD Colony-Sanatnagar Srinagar</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Blood Group</div> 
                    <div class="f-value uppercase bold lh-12">AB +ve</div> 
                </div> 
                <div class="clearfix m-t-10 fs-10"> 
                    <div class="f-group pull-left"> 
                        <div class="f-name lh-10 uppercase">Date of Issue</div> 
                        <div class="f-value uppercase">10-03-2018</div> 
                    </div> 
                    <div class="f-group pull-right text-right"> 
                        <div class="f-name lh-10 uppercase">Bus Details</div> 
                        <div class="f-value uppercase"> 
                                                            53 - Sanatnagar                                                    </div> 
                    </div> 
                </div> 
            </div> 
        </div><!-- /back --> 
    </div><!-- /clearfix --> 
 
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5"> 
        <div class="icard student m-b-20 v2018 front"> 
            <div class="clearfix init"> 
                <div class="text-center photo"> 
                    <img src="http://via.placeholder.com/128x128" style="width:110px;" class="img img-circle">                </div> 
                <div class="m-l-20 m-r-20"> 
                    <div class="text-center m-t-10 fs-16 font-arial-narrow bold uppercase"> 
                        Arshman Hussain Lone                    </div> 
                    <div class="text-center fs-22 font-arial-narrow bold uppercase lh-18"> 
                        6524                    </div> 
                </div> 
                <div class="clearfix"> 
                    <div class="font-arial-narrow bold pull-left bg-warning p-l-15 p-b-5 p-t-5 p-r-10 uppercase"> 
                        LKG A                    </div> 
                                            <div class="font-arial-narrow bold pull-right bg-warning p-l-10 p-b-5 p-t-5 p-r-15 uppercase"> 
                            77                        </div> 
                                    </div> 
            </div><!--/ clearfix --> 
        </div><!-- /front --> 
 
        <div class="icard student  v2018 back"> 
            <div class="m-l-15 m-r-15 font-arial-narrow p-t-30"> 
                <div class="clearfix fs-12 m-t-30 row"> 
                    <div class="col-xs-3"> 
                        <div class="f-name lh-12">SID</div> 
                        <div class="f-value uppercase bold">6524</div> 
                    </div> 
                    <div class="col-xs-4 text-center"> 
                        <div class="f-name lh-12">HOUSE</div> 
                        <div class="f-value uppercase bold">Deodar</div> 
                    </div> 
                    <div class="col-xs-5 text-right"> 
                        <div class="f-name lh-12">ADM NO</div> 
                        <div class="f-value uppercase bold">60/16</div> 
                    </div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Name</div> 
                    <div class="f-value uppercase bold">Arshman Hussain Lone</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Parentage</div> 
                    <div class="f-value uppercase bold">Arshed Hussain Lone</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Contact(s)</div> 
                    <div class="f-value uppercase bold">9797113997, 9622424281</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Address</div> 
                    <div class="f-value uppercase bold lh-12 ">H No. 1 Hussain Villa Bonamsar Sonwar Srinagar</div> 
                </div> 
                <div class="m-t-5 fs-12"> 
                    <div class="f-name lh-12 uppercase">Blood Group</div> 
                    <div class="f-value uppercase bold lh-12">A +ve</div> 
                </div> 
                <div class="clearfix m-t-10 fs-10"> 
                    <div class="f-group pull-left"> 
                        <div class="f-name lh-10 uppercase">Date of Issue</div> 
                        <div class="f-value uppercase">10-03-2018</div> 
                    </div> 
                    <div class="f-group pull-right text-right"> 
                        <div class="f-name lh-10 uppercase">Bus Details</div> 
                        <div class="f-value uppercase"> 
                                                            77 - Sonwar                                                    </div> 
                    </div> 
                </div> 
            </div> 
        </div><!-- /back --> 
    </div><!-- /clearfix --> 
</div>

Answer 1

try this

 <style type="text/css"> 
    @media print { 
        .page { 
            page-break-after: always !important;; 
        } 
    } 
    .v2018-container { position:relative; }      
</style> 
 <div class="page"> 
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5"> 
        <div class="icard student m-b-20 v2018 front"> 
            hello 
        </div><!-- /front --> 
        <div class="icard student  v2018 back"> 
            hello 
        </div><!-- /back --> 
    </div><!-- /clearfix --> 
 
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5"> 
        <div class="icard student m-b-20 v2018 front"> 
            hello 
        </div><!-- /front --> 
        <div class="icard student  v2018 back"> 
            hello 
        </div><!-- /back --> 
    </div><!-- /clearfix --> 
</div><!-- /page --> 
<div class="page"> 
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5"> 
        <div class="icard student m-b-20 v2018 front"> 
            hello 
        </div><!-- /front --> 
        <div class="icard student  v2018 back"> 
            hello 
        </div><!-- /back --> 
    </div><!-- /clearfix --> 
 
    <div class="clearfix v2018-container printer-normal pull-left  m-r-5"> 
        <div class="icard student m-b-20 v2018 front"> 
            hello 
        </div><!-- /front --> 
        <div class="icard student  v2018 back"> 
            hello 
        </div><!-- /back --> 
    </div><!-- /clearfix --> 
</div><!-- /page --> 
<script>window.onload = function() { window.print(); }</script>

READ ALSO
slideshow not working; works locally but not when uploaded

slideshow not working; works locally but not when uploaded

As the title suggests, the slideshow works locally but not when it's uploaded to the serverAll pictures are in the correct location for images to show

122
react router won&#39;t serve me components other paths than &#39;/&#39;

react router won't serve me components other paths than '/'

Hi i added react router to my project but it wont serve me path others than '/'

111
Force two tables stick together in a div when page resize

Force two tables stick together in a div when page resize

I have a div which contains two html tablesWhen the browser is maximize, the two tables positioned side by side

144
Why are HTML article, aside tags required when we are able to create our own tags?

Why are HTML article, aside tags required when we are able to create our own tags?

If I write HTML as below, still I can access tag called 'veera' in CSS, JSWhy we should use only article, header, nav, etc

107