Twitter Bootstrap - Print all tab content

Question

I have the basic bootstrap tabs set up with no dynamically inserted content and print specific media queries in my base stylesheet. When the user prints from the browser I want all the tab content to print, not just the active tab. I know there has to be an easy solution to this, I just can't figure it out.

Answer 1

try this in your print media query:

.tab-content > .tab-pane {     display: block !important;     opacity: 1 !important;     visibility: visible !important; } 

Answer 2

@Scott's answer didn't work for me, and I think it is because I'm using bootstrap 4.

This is what worked for me in bootstrap 4. I added the display helper classes d-print-block, d-none, and d-print-none where appropriate.

I didn't want the top nav bar to print at all, so I added d-print-none

<ul class="nav nav-tabs nav-bordered d-print-none" role="tablist" id="mainTabs"> 

I wanted the individual tab-panes to print if on print media, so I added a header to the tab pane's content and added the d-none class so it wouldn't show in the browser, but also added d-display-block so it WOULD should in print media. I also added d-print-media to the tabpanel div itself so that it would show the entire contents in print media.

<div role="tabpanel" class=" fade in show active tab-pane d-print-block" id="myTab">     <div class="header-title d-none d-print-block">My Tab Name</div>     Lorem ipsum dolor sit amet... </div>