Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,620 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 90,705 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.