Bootstrap page print

Question

I want to print a bootstrap page. Here is my page layout

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <img src="image/logo.png">          
        </div>
    </div>
</div>
<div class="container" id="student">
    <div class="row">
        <div class="col-sm-4">
            <h1>Student</h1>
        </div>
        <div class="col-sm-offset-2 col-sm-6" id="date">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="focusedInput"> <b>Date:</b></label>
                        <input class="form-control" id="focusedInput" type="text" placeholder="DD Month Year">
                    </div>
                </form>         
        </div>
    </div>
</div>

Also I've css

@font-face {
    font-family: "myfont";
    src: url("../fonts/opensans/OpenSans-Regular 2.ttf");
}
body{
    font-family: "myfont";
    /*-webkit-print-color-adjust: exact;*/
}

img{
    width: 150px;
}
#student{
    margin-top: 50px;
}
#date{
    background: black;
    margin-top: 20px;
    color: white;
    padding: 10px;
}

Problem is: css is not loading properly. I tried searching stackoverflow but did not get any exact solution. How can I do that? Here is the fiddle https://jsfiddle.net/wc6rga7o/

Tried adding @media pls check https://jsfiddle.net/wc6rga7o/1/ — Russell, Nov 28 '16 at 10:35
Try is standard beahvior of navigators : http://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color — Weenesta - Mathieu Dormeval, Nov 28 '16 at 10:37
Please read this post : http://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color — Weenesta - Mathieu Dormeval, Nov 28 '16 at 10:54
@MathieuDormeval, I read the ques again but still not solved. — Russell, Nov 28 '16 at 11:04
Beacause it's impossible, this is the default behavior of the browser, it is up to the user to choose whether or not to display backgrounds — Weenesta - Mathieu Dormeval, Nov 28 '16 at 12:45

Rahul · Answer 1 · 2016-11-28T11:03:26.787

1

try

@media print {
    /* Your styles here */
    body{
           color: #111111;
    }
    #date{
           -webkit-print-color-adjust: exact!important;
    }

}

updated your fiddle https://jsfiddle.net/wc6rga7o/2/

edited Nov 28 '16 at 11:03

answered Nov 28 '16 at 10:33

Rahul

4,294
1
10
12

try ` ` notice `media="print"` – Rahul Nov 28 '16 at 10:37
This is standard the behavior of navigator – Weenesta - Mathieu Dormeval Nov 28 '16 at 10:54

Bootstrap page print

1 Answers1