Is there a way to effectively utilize Twitter Bootstrap classes such as "row" and "span(X)" specifically for @media print?

Currently, I am facing the challenge of printing web pages on my website and I am seeking advice on how to effectively utilize the row and spanX Bootstrap classes to better manage the content displayed on the printed page.

For instance:

<div class="row-fluid">
<div class="span12">

<strong>Some stuff</strong>

</div>
</div>

and

<div class="row-fluid">

<div class="span6 offset6">

<strong>Some stuff</strong>

</div>
</div>

must appear identical when using window.print().

In the provided example, it can be observed that 

<strong>Some stuff</strong>
does not align properly with the use of offset6.

I have attempted 2 solutions:

  • Extracted all the @media print code from bootstrap.css and bootstrapresponsive.css;

  • Modified media to all:
    changing from 

    <link rel="stylesheet" type="text/css"
href="/path/css/bstrapmin.css" media="screen" />


    to 
    <link
rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css"
media="all" />
    ;

Even after implementing these adjustments, the header, footer, and default Bootstrap font are visible on the printed page, but the class effects remain unnoticeable.

Your insights are appreciated.

csstwitter-bootstrapmedia-queriesprinting-web-page

Answer №1

Have you created a separate stylesheet and positioned it after all other stylesheets, like this: 

<link rel="stylesheet" type="text/css" href="/path/css/print-stylesheet.css" media="print" />

Any styles you define in this print-specific stylesheet will take precedence over those in your screen stylesheets. Just ensure that it is the final CSS file included in your DOM.

I can't remember if you need to include @media print in your print stylesheet, but I believe adding media="print" should handle that for you.

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

Why does the appearance of my PHP spreadsheet change when I attempt to print it?

After using a CSS stylesheet to position my textboxes correctly, I noticed that in Chrome everything appeared fine. However, when attempting to print the site (Ctrl+P), each sentence and textbox shifted. How can I ensure they remain in place? <!-- #cap ...

phpcssprinting

Minimal Space Separating Footer Division and Body Element

While there are numerous discussions online about fixing footer alignment issues, I've encountered a unique problem that needs addressing. The issue at hand is a 29px gap between the bottom of the footer and the <body> tag on my webpage, which ...

javascriptjquerycssfooter

Element with a fixed position located inside a column in Bootstrap 4

Is there a way to keep a bar fixed at the bottom of the user's screen, but only within a specific column? Applying position:fixed; bottom:0; stretches the element across the entire screen, so how can I make the bar remain within the column boundaries? ...

htmlcsstwitter-bootstrapbootstrap-4

Problem regarding the widths of HTML <table> elements

I am working with a <table> that has 3 columns structured as follows: table { border: 1px dashed goldenrod; } td { border: 1px solid gray; } <table> <tr> <td width="120">Some content</td> <td width="150"> ...

htmlcsshtml-table

Tips on correctly determining font size

I'm attempting to style a span element with a specific height (in this case, 23px). However, the browser is automatically adding some extra pixels to the element. There are no additional styles like padding or margin affecting it, just the size of th ...

htmlcss

Eliminating Redundant Styles in Specific CSS Files with Gulp, When They Already Exist in a Shared CSS File

Is there a way to eliminate redundant styles in individual css files that are already defined in a common.css file? common.css contains the following styles. .nav { background-color: red; } home.css includes the following styles. .nav { backgroun ...

cssgulppurgecss-purge

Stylish Interactive Menu Item

Having a fixed navigation at the bottom of my website has presented me with an issue. The hover effect, specifically the background slide, triggers before I even place my mouse over the text. Currently, the background slides up when my mouse enters the .it ...

htmlcssnavigation

Create CSS styles that are responsive to different screen sizes and

What is the best approach to ensure that these styles are responsive on any mobile device? nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #0066cc; background: linear-gradient(top, #0066cc 0%, #bbbbbb 10 ...

htmlcssmobileresponsive-design

Using jQuery to delay hiding for 2 seconds

Hey there! I'm facing an issue with my code. The function is supposed to make #aboutPopOut slide to the left, and then after a 2-second delay, fade out the fadescreen by hiding it. The sliding part works fine, but the waiting and hiding do not seem to ...

javascriptjqueryhtmlcssweb

How to reference color variables from code behind in ASP and use them in CSS files

I have a total of 3 files dedicated to my Login-Screen: Login.aspx, Login.aspx.cs, and LoginStyle.css Upon the execution of the Page_Load method, I retrieve various data from the current system, including the theme-color represented as a string (e.g., #00 ...

cssasp.netcode-behind

Arrangement of SVGs within one another

I am working on achieving a layout with multiple SVG elements arranged in a specific way. This layout involves a top-level gray box containing several orange boxes, each of which holds red boxes. The width and height of the top-level SVG are known. https: ...

htmlcsssvg

Ways to adjust the size of an HTML fieldset?

Is there a way to decrease the space between the paragraph and the border of this fieldset? I attempted to adjust the margins in the following manner: fieldset { margin: 1px; margin-top: 2px; border-top-right-radius: 1px; } <fieldset> < ...

htmlcss

Fancybox 2 - CSS styles vanish when using Ajax request

I have a fancybox2 with static dummy content that has styling applied. It works fine, but now I need to load dynamic content via ajax. However, when I make the ajax call, the required content loads but loses all css styling, most likely due to changes in t ...

jqueryhtmlcssajaxfancybox-2

Adding a border around the `<tr>` elements in a table

How can I add a border to the <tr> element (t_border), without the inner table inheriting the style from the outer one? <table> <tr> <td>A</td> </tr> <tr> <td> <ta ...

htmlcss

How can I adjust the positioning of labels in Semantic UI React?

Has anyone successfully changed the label position from right side to left? I attempted using float: left but it didn't have any effect. import {Radio } from "semantic-ui-react" <Radio label="in progress" toggle /> https://i.sstatic.net/hNGb6. ...

javascriptcssreactjssemantic-ui

What is the best method for resetting the CSS style of a specific DOM subtree?

While working on a Chrome Extension, I encountered a problem where an HTML subtree and CSS style sheet injected into the original page were being affected by the original CSS. Despite my attempts to override the styles, it seemed unfeasible to manually set ...

css

The animation will only activate upon the initial click of the button

I'm looking to add a simple text animation to my website. The idea is that when a button is clicked, the text transitions from being fully transparent to fully visible, and then back to transparent. I've written some code to achieve this animatio ...

javascripthtmljquerycss

Error message: Unable to find child element in Selenium WebDriver

I'm currently dealing with a registration page where I encountered an issue. During my testing phase, I attempted to register without inputting a first name. Upon clicking the register button, I expected to see a 'Required' notification la ...

cssseleniumselenium-webdriverxpathdescendant

How come the text is not centered when I use text-align:center; on my class "text5"?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> ...

htmlcsscenter

Navigation menu elements out of place

I am facing some challenges while trying to create a horizontal navigation: The first element appears to be displaced Is there a better way to position the text centered below the icon? Currently, I have used a tag for this purpose. Also, how can I us ...

htmlcss