Bootstrap web page not printing

HTML & CSS
1

I got my feet wet with Bootstrap. And decided to focus on bootstrap for my website development.
However, I just realized that my website pages will not print the content only header and footer.
What do I need to make this work?

2

It’s hard to give specific advice without seeing your code. But one thing that is possible if your design has trouble printing is to create a print style sheet with css rules specifically for print.
This can be done within a main style sheet with the @print media query, or you can make a separate css file referenced like this:-

<link rel="stylesheet" type="text/css" media="print" href="styles/print.css">
3

Just need to get a head start on creating the print.css file.
I show the start of file which includes a container element with Menu and Table.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>RCL Branch 594 Ontario - Activities</title>
<meta name="keywords" content="Activities, Branch 594, Royal Canadian Legion, Tecumseh, Ontario, Canada"/>
<meta name="description" content="Calendar of Events at Royal Canadian Legion Branch 594 Windsor Ontario Canada"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="css/styles.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div class="container">

    <div class="page-header header_background" >
    
        <img src="images/legionpoppy.jpg" class="img-responsive" alt="poppies" />
        <!--img src="images/Branch143Building.jpg" class="img-responsive"  alt="Branch 143 Building" /-->
    </div>
    
    <!-- menu -->
    <div class="navbar navbar-default">
    <div class="panel col5">
        <div class="container-fluid">
4

Add the link for the print stylesheet after the others so that it only needs to override whatever is messing up and doesn’t need to define everything over again.

1 Like
5

Note the important part of that link is the media attribute media="print", what you name the css file is up to you.
Also, you can use “Print Preview” in your browser to check the results to avoid using an entire tree during testing.
Unfortunately you can’t use “Inspect Element” in print preview which would make things much easier.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.