Printing pages with Bootstrap without disrupting cards

My goal is to print a basic bootstrap page using window.print(). Here is what the page looks like (with multiple div.col-md-12 & cards) :

<div class="overview"> <!-- Takes up entire screen width -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Test</div>
                <div class="card-body">
                    <!-- Insert some long Lorem Ipsum text here -->
                </div>
            </div>
        </div>
    </div>
</div>

I am looking to print this page without breaking the div.card elements. I have tried various solutions found on StackOverflow, but none have been successful.

<div class="card" style="page-break-inside:avoid;page-break-before:always;">

Even when placed in an external CSS media print, this method did not work. Applying these CSS attributes to div.col-md-12 also did not yield the desired result.

Any suggestions?

Answer №1

I have discovered the solution.

To guarantee the functionality of page-break-X, it is important to confirm that your elements (and their parents) are set to display as block. By including display:block in .row, .col-md-12, .container (in this case, .overview), the CSS properties will function effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQue ...

Why isn't my Bootstrap dropdown displaying any options?

I am new to web development and attempting to create a button that triggers a dropdown menu when clicked. I have tried the following code, but for some reason, the dropdown is not working correctly. Can anyone help me identify the issue or correct my code? ...

PHP script not refreshing properly on reload causing randomized content to display inaccurately

In an attempt to create a dynamic website that features a random image on each page refresh, I have stored all images in a directory named "/pngs/" and set up a MySQL database with indexed rows for reference: <img src="pngs/000.png"> <img src="pn ...

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

Control your thumbnails with the powerful iDangerous Swiper feature

Are you new to coding? I'm looking for help on linking thumbnail images to a swiper so that when a thumbnail is clicked, it moves the swiper-container to the corresponding slide. Any ideas or suggestions would be greatly appreciated! Here's an e ...

javascript for each and every textarea

I am looking to apply my JavaScript code to all the Textarea elements on my page. $_PAGE->addJSOnLoad(" $('.textarea').each(function() { $(this).keyup(function() { var characterCount = $(this).val().length; var mes ...

Steps to make a pop-up window for text copying by users

On my website, I have a link that users need to copy for various purposes. I want to provide an easy way for them to see the link and then manually copy it to their clipboard. Instead of using code to copy to the clipboard, I am looking for a solution whe ...

Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success. Here's the HTML: <a href= ...

Creating a task management application using AXIOS and VUE for easy data manipulation

I am currently working on a small app to enhance my skills in VUE and Axios. However, I am facing a roadblock when it comes to the update functionality. I am struggling to pass the ID to the form for updating and despite watching numerous tutorial videos ...

Compilation of CSS by Webpack resulting in peculiar class identifiers

Currently, I am using webpack for developing a React app with a NodeJS backend. I've encountered an issue with styling the app as webpack seems to be interfering with my CSS, causing changes in class names. For example, in my base.css file, I have d ...

how to make a "select all" checkbox with Angular 2

`I'm currently working on a feature that allows a checkbox to select all checkboxes within a specific div when checked. The div exclusively contains checkboxes. //TS FILE constructor() { } checkAll: ElementRef | undefined; selectAll(isChecked: ...

Different placeholder text rendered in two text styles

Can an input box placeholder have two different styles? Here's the design I have in mind: https://i.stack.imgur.com/7OH9A.png ...

Why isn't my textarea in jQUERY updating as I type?

On my website, I have a comment script that is not functioning correctly in some parts of the jQuery/JavaScript code. Instead of posting an edited comment to PHP, I created a notification window to test if the value passed through is actually changing. W ...

Looking for a prerequisite for running this script?

Seeking assistance from a skilled Javascript expert. I specialize in template development and utilize a specific script to display my footer link in all the free templates I create. If someone attempts to remove the footer link, their site will be redirec ...

Is there a way to align my two tables next to each other using CSS?

.page { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .items { float: left; } .secondItem { vertical-align: text-top; float: right; } .page-header table, th, td { border: 1px solid; display: block; background-color: ...

Blur images on parent div when hovering using javascript

After some extensive searching, I came across a few helpful explanations on how to achieve my desired outcome. By combining them, I was able to get everything working smoothly with the hover effect over the image itself. However, when I attempted to trigge ...

The combination of Javascript and CSS allows for interactive and visually

I'm currently working on a project where I had to create a simulated weather page using only Javascript. However, I am struggling with the overall layout and have a few questions that I hope someone can help me with: Despite trying various methods ...

Issue with the Bootstrap navbar not responding to clicks for toggle functionality

I have integrated Bootstrap 4 to enable the collapse of dropdown menu on small screens (sm) within my navbar. However, I am facing an issue where the toggling functionality is not working - clicking on the toggle button does not produce any results. I hav ...

What could be causing my footer to be stuck in the center of my webpage?

Despite trying various methods, my footer remains stuck in the middle of the page. I even attempted to set the body height to 100% or 100vh without success. footer placement issue (https://i.stack.imgur.com/qzp2i.png) css: body { display: flex; flex-direct ...

Align the last line of flex cells to the left side

I have created a flex structure that resembles a table and adjusts the number of cells based on the content. However, when the last row is not full, the remaining cells stretch to fill the empty space, which affects the overall appearance of the structure. ...