Html Question posted in
Some basic documentation can be found here.

Html – BootStrap 5 container content not full width when printing

I have trouble with BootStrap layout system when printing a page.

Suppose there is a button

  • <button class="btn btn-outline-dark" onclick="window.print()">Drukuj</button>

which allows me to print a window and where information must take full page width (I want people to easily print out GDPR content for their use). I also want to avoid downloading any files from my page.

However, I’ve developed a static web page with no URLs by using tab-pane classes, which simply toggle static id content when navbar tab is clicked on:

<body>
<div id="navbar" class="container-fluid">
            
    <ul class="navbar nav nav-tabs nav-fill">
        <li class="nav-item">
            <a class="navbar-brand" data-bs-toggle="tab" href="#home-page">
            <img id="logo" alt="logo" src="adwokatura-polska-blank.png"></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#lawyers-page">Prawnicy</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" data-bs-toggle="tab" href="#services-page">Usługi</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" data-bs-toggle="tab" href="#contact-page">Kontakt</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" data-bs-toggle="tab" href="#rodo-page">Polityka prywatności</a>
        </li>
    </ul>
</div>
<article id="content" class="container">
<!-- ...More tab content... -->
<div class="tab-pane container fade min-vh-100" id="rodo-page">
    <h1 class="display-4">Informacja RODO</h1>
    <button class="btn btn-outline-dark" onclick="window.print()">Drukuj</button>
    <hr>
    <p><em>Szczegółowe informacje dotyczące przetwarzania danych osobowych klientów kancelarii</em></p>
    <ol>
        <li>
        <p>Administrator danych osobowych</p>
        <p>Administratorem Pani/Pana danych osobowych będzie Adwokat Milena Gostyńska
        prowadząca Kancelarię Prawną Adwokat Mileny Gostyńskiej z siedzibą w ...
        przy .... Może Pani/Pan  się z nami skontaktować w następujący sposób:
        <ul>
            <li>listownie na adres: ...</li>
            <li>telefonicznie: ... lub ...</li>
        </ul>
        </li>
    </ol>
</div>
<!-- ...More tab content... -->
</article>
<!-- ...Some footers etc... -->
</body>

The problem is: BootStrap uses special styling for containers (which have margin and pad for content to nicely center).
However, this useful feature messes my printing since it includes the whole window:

How can I use CSS to print out article content with no BootStrap containers padding and margin?
My HTML head:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kancelaria Prawna - Adw. Milena Gostyńska</title>
    <link rel="stylesheet" href="../assets/css/styles.css" />
    <link rel="stylesheet" type="text/css" href="../assets/bootstrap-5.3.3-dist/css/bootstrap.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- was testing Alipne.js, don't judge -->
    <!--<script src="script.js"></script>-->
    <script src="//unpkg.com/alpinejs" defer></script>
</head>

I’m not that good at CSS, but this is what I’ve managed to do so far:

/*-----------My problem----------------*/
@media print {
    body {
        visibility: hidden;
        display: contents;
    }
    #navbar, footer {
        display: none;
    }
    #rodo-page {
        margin: 0 0 0 0 !important;
        padding: 0 0 0 0 !important;
        width: 100% !important;
        visibility: visible;
        text-align: left;
    }
}
/*-------------------------------------*/
/* Obviously I have more CSS, such as: */
#content {
    background-color: lightgrey;
    border: solid;
    border-color: dimgrey;
}

.tab-pane .display-4 {
    text-align: center;
    margin-bottom: 1em;
}
.tab-pane p, .tab-pane ul{
    font-size: larger;
}

body{
    background-image: linear-gradient(#006241,#32913a);
    background-attachment: fixed;
}

!important keyword doesn’t seem to work. I’ve managed to push all the text to the top, but text is still centered horizontally.
top: 0 with left:0 didn’t work either.
Changing container to container-fluid isn’t for me either: it’s about printing behaviour only.
Any advice?

Tags:

2

Answers


  1. 0

    Try updated css

    Visibility Reset: body { visibility: hidden; } hides all content by default, and #rodo-page { visibility: visible; } selectively reveals the printable area.

    Bootstrap Overrides:
    .container, .container-fluid, and .row are reset to have margin: 0 and padding: 0 to eliminate unwanted spacing.
    width: 100% ensures the content uses the full printable width.

    @media print {
/* Hide unwanted elements */
body {
    visibility: hidden;
}
#navbar, footer {
    display: none;
}

/* Target only the printable area */
#rodo-page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    visibility: visible;
    text-align: left;
}

/* Reset Bootstrap container styles for print */
.container, .container-fluid, .row {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Customize content appearance for print */
#content {
    background-color: white !important; /* Set background for clarity */
    border: none !important; /* Optional: remove border for a cleaner print */
}

.tab-pane .display-4 {
    text-align: left !important; /* Align text for print */
    margin-bottom: 0.5em !important; /* Adjust spacing */
}

.tab-pane p, .tab-pane ul {
    font-size: medium !important; /* Use a consistent print-friendly font size */
}

/* Remove gradient for printing */
body {
    background: none !important;
}
}
    Login or Signup to reply.
  2. 0

    You are only reseting the spacing of div#rodo-page while article#content also has the container class:

    <article id="content" class="container">
    <div class="tab-pane container fade min-vh-100" id="rodo-page">
    <!-- Content -->
    </div>
</article>

    This is the updated media rule:

    @media print {
    body {
        visibility: hidden;
        display: contents;
    }
    #navbar,
    footer {
        display: none;
    }
    #rodo-page {
        margin: 0;
        padding: 0;
        width: 100%;
        visibility: visible;
        text-align: left;
    }
    #content {
        margin: 0;
        padding: 0;
        width: 100%;
    }
}

    Also, remember having your css link after bootstrap’s to avoid using !important.

    <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kancelaria Prawna - Adw. Milena Gostyńska</title>

<!-- Your style link after bootstrap link -->
<link rel="stylesheet" type="text/css" href="../assets/bootstrap-5.3.3-dist/css/bootstrap.css">
<link rel="stylesheet" href="../assets/css/styles.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<!-- was testing Alipne.js, don't judge -->
<!--<script src="script.js"></script>-->
<script src="//unpkg.com/alpinejs" defer></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search