Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Nicholas Dixon
Nicholas Dixon
9,514 Points
Posted by Nicholas Dixon
Nicholas Dixon
9,514 Points

.hidden-print or class="hidden-print" not working in Bootstrap

I have checked on the Bootstrap documentation and .hidden-print is supposed to hide elements from the print screen, but I cannot get it to work, I have tried applying it to images and divs and other elements, but it does not work, what am i doing wrong?

I have downloaded the Compiled and minified version of Bootstrap as instructed in the intro to frameworks.

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> <link href="css/my-styles.css" rel="stylesheet" media="screen">

I am successfully linked to the files in the code above and the Javascript files. I know this because I have a jumbotron styles and a carousel styled and working. Also I have used the grid and to layout content. I have tried updating the code, from a fresh download, but this has not worked either.

I have tried using a media query too, to hide things and to change the font on printing like the following

@media print { body { font-family: Arial; } }

But this does not work either.

2 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Nicholas,

A quick look at the bootstrap css shows that the class .hidden-print is inside a media query used only in printers.

That class hides elements if you print the page.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Nicholas.

When you're hiding elements is Bootstrap telling this cal to hid it and a certain browser width? Maybe try playing with the width of your browser.