locked
How to add btn btn-primary RRS feed

  • Question

  • User-797751191 posted

    Hi

      In below line i want to add Class btn btn-primary

    <button class="no-print" onclick="window.print();" style="width: 5%; margin-top: 10px; margin-left: 49%;">Print</button>

    .no-print {
    display: none;
    }

    Thanks

    Sunday, June 30, 2019 2:55 AM

All replies

  • User2103319870 posted

    jsshivalik

    add Class btn btn-primary

    Try below code

    <button class="no-print btn btn-primary" onclick="window.print();" style="width: 5%; margin-top: 10px; margin-left: 49%;">Print</button>
    

    Your noprint has button hiding property so you need to remove that inorder to view the css changes

    Sunday, June 30, 2019 3:27 AM
  • User-797751191 posted

    Hi

     In Print i don't want to print button that's why i have used. I have written below line but it has no effect of btn btn-primary

    <button class="no-print btn btn-primary" onclick="window.print();" style="width: 5%; margin-top: 10px; margin-left: 49%;">Print</button>

    Thanks

    Sunday, June 30, 2019 3:37 AM
  • User2103319870 posted

    I have written below line but it has no effect of btn btn-primary

    Have you added the boostrap css file to your page. Its working as expected. You can see the demo here

    In Print i don't want to print button that's why i have used.

    Try using media queries to hide button when printing

    @media print {
      .no-print {
        display: none;
      }
    }

    Sunday, June 30, 2019 9:35 PM
  • User-1151440187 posted

    try this for hiding button :

    @media print {
    .no-print {
    visibility: hidden;
    }
    }

    Tuesday, July 2, 2019 4:28 AM
  • User998815126 posted

    Hey Jsshivalik

    Yes I have added bootstrap file in this Code..

    The solution is below..

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="js/bootstrap.js"></script>
    </head>
    <body>
    <button type="button" class="btn btn-primary">Left</button>
    </body>
    </html>

     

    Wednesday, July 3, 2019 7:25 AM
  • User-857013053 posted

    First thing you should use bootstrap for btn btn-primary class you just try this:

    <button class="btn btn-primary  no-print">Done</button>

    Friday, July 12, 2019 4:01 AM
  • User-857013053 posted

    You can use bootstrap framework for btn btn-primary type button design

    <html lang="en">
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">
    <h2>Button Elements</h2>
    <a href="#" class="btn btn-info" role="button">Link Button</a>
    <button type="button" class="btn btn-info">Button</button>
    <input type="button" class="btn btn-info" value="Input Button">
    <input type="submit" class="btn btn-info" value="Submit Button">
    </div>

    </body>
    </html>

    Wednesday, September 11, 2019 5:01 AM