"Embed pdf and tab"
Bootstrap 4.1.1 Snippet by anvictor

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Font Style --> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> <title></title> </head> <body> <!-- Section Exames --> <section id="exames"> <div class="hero-image"> <div class="container h-100"> <div class="row h-100"> <div class="col-md-12 justify-content-center align-items-center"> <h1 class="text-center my-3">Cursos</h1> <div class="hero-text"> <nav> <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"> Ciências Biológicas </a> <a class="nav-item nav-link" id="nav-eng-tab" data-toggle="tab" href="#nav-eng" role="tab" aria-controls="nav-eng" aria-selected="false"> Engenharia de Produção </a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"> Farmácia </a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false"> Pedagogia </a> <a class="nav-item nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false"> Medicina </a> </div> </nav> <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <div class="d-sm-flex justify-content-center"> <div class="col-md-10"> <embed src="https://studiostatus.com.br/wp-content/uploads/2017/10/Convite-30-x-30-cm-12-pags-Pedagogia-curva.pdf" type="application/pdf" width="100%" height="600px" /> </div> </div> </div> <div class="tab-pane fade" id="nav-eng" role="tabpanel" aria-labelledby="nav-eng-tab"> <div class="d-sm-flex justify-content-center"> <div class="col-md-10"> <embed src="https://studiostatus.com.br/wp-content/uploads/2017/10/Convite-30-x-30-cm-12-pags-Pedagogia-curva.pdf" type="application/pdf" width="100%" height="600px" /> </div> </div> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <div class="d-sm-flex justify-content-center"> <div class="col-md-10"> [flipbook pdf="https://studiostatus.com.br/wp-content/uploads/2017/10/Convite-30-x-30-cm-16-pags-Farmacia-curva.pdf"] </div> </div> </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> <div class="d-sm-flex justify-content-center"> <div class="col-md-10"> [flipbook pdf="https://studiostatus.com.br/wp-content/uploads/2017/10/Convite-30-x-30-cm-12-pags-Pedagogia-curva.pdf"] </div> </div> </div> <div class="tab-pane fade" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab"> <div class="d-sm-flex justify-content-center"> <div class="col-md-10"> [flipbook pdf="https://studiostatus.com.br/wp-content/uploads/2017/10/Convite-MEDICINA-30-x-30-cm.pdf"] </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> </body> </html>

Related: See More

Light Bootstrap Dashboard PRO React

Questions / Comments: