printable bootstrap
Showing posts with label printable bootstrap. Show all posts
Showing posts with label printable bootstrap. Show all posts

Tuesday, 14 October 2014

How To Create Printable Bootstrap Page

10:13 1 Comments 


Every Day Is a New Learning Day . Today, I learnt a new thing with bootstrap When We use the page becomes responsive it will adapt its width and height and change it accordingly to the screen on which we are viewing that webpage that's the magic of Bootstrap .

 BUT there is one thing need to be noticed that is When we print that page . Like i needed to give one functionality in my web application to the client . Client wants a button when client click on that button a print preview of current page is given to client and page will be downloaded as .PDF file 



But Now you may face some problem as below :-

Bootstrap - Print layout and breaks after each grid column

Grid stacks when printing Bootstrap page

you may search How to Create Printable bootstrap page So solution is below


when you see in your print preview or .PDF file you can see bootstrap  layout will be not there . This is because bootstrap make the columns and rows by using some inbuilt classes these classes are by default included in bootstrap.min.css file but you have to set them to be allowed in all media As bydefault it is set to screen only


When you try code below in your html page you can see it is not printing your page with bootstrap enabled 

<!DOCTYPE html>


<html lang="en">


  <head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>Bootstrap 101 Template</title>




    <!-- Bootstrap -->


    <link href="css/bootstrap.min.css" rel="stylesheet">




    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->


    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->


    <!--[if lt IE 9]>


      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>


      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>


    <![endif]-->


  </head>


  <body>


   <div class="container">


  <div class="row">


  <div class="col-md-6">Column1</div>


    <div class="col-md-6">Column2</div>


  </div>


</div>




    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


    <!-- Include all compiled plugins (below), or include individual files as needed -->


    <script src="js/bootstrap.min.js"></script>


  </body>


</html>











Steps To Create your Bootstrap Webpage Printable



1. Replace every col-md- with col-xs-

 e.g. :- replace every col-md-6 to col-xs-6 

This is the thing that worked for me to get me rid of this problem you can see what you have to replace









Replace following code 





   <div class="container">


  <div class="row">


    <div class="col-md-6">Column1</div>


    <div class="col-md-6">Column2</div>


  </div>


</div>





With this code in our given example 


<div class="container">
  <div class="row">
    <div class="col-xs-6">Column1</div>
    <div class="col-xs-6">Column2</div>
  </div>
</div>



























        

      












Subscribe to:
Posts (Atom)