22

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.

2 Answers 2

49

try this in your print media query:

.tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
7
  • Perfect. That did it. Thanks! I'd upvote you but I'm relatively new to SO.
    – gunjack12
    Dec 20, 2012 at 17:54
  • Cool -- You should be able to accept the answer by clicking to the left of the number. Dec 20, 2012 at 18:06
  • 1
    This also helps when trying to generate PDF version of a webpage with PhantomJS May 15, 2014 at 6:45
  • 3
    I needed visibility: visible !important too
    – Luke
    Jun 18, 2015 at 8:46
  • 4
    Just what I needed. I also added page-break-after: always to get a page break in the print output after each tab section. Plus .nav-tabs {display:none;} also in the @media print query gets rid of the tabs themselves Sep 30, 2016 at 10:34
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>
1
  • In my case, all my info is on a modal, but Chrome doesnt see that and cuts off the modal. Any ideas? Feb 7, 2019 at 16:46

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.