<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- ZAWODNIK INFO --> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> WŁĄCZ </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="container"> <div class="row"> <!-- Okienko modala --> <div class="col-md-8"> <!-- Nav tabs --><div class="card"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#informacje" aria-controls="home" role="tab" data-toggle="tab">Informacje</a></li> <li role="presentation"><a href="#starty" aria-controls="profile" role="tab" data-toggle="tab">Wcześniejsze starty</a></li> <p class="text-right"><button type="button" class="btn btn-link glyphicon glyphicon-remove" data-dismiss="modal"></button></p> </ul> <!-- Tab panes --> <div class="tab-content"> <!-- INFORMACJE --> <div role="tabpanel" class="tab-pane active" id="informacje"> <div class="row"> <div class="col-md-1"></div> <div class="col-md-4"><img src="https://wejherowo.karatecup.pl/wp-content/uploads/cup-images/zawodnicy/karate-per.jpg" class="img-circle"></div> <div class="col-md-6"> <table class="tabela-zawodnik"> <tr><td><strong><p class="text-right">Imię:</p></strong></td><td> Wojciech</td></tr> <tr><td><strong><p class="text-right">Nazwisko:</p></strong></td><td> Wawer</td></tr> <tr><td><strong><p class="text-right">Klub:</p></strong></td><td> Sonkei<a href="#" class"glyphicon glyphicon-new-window"> <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></td></tr> <tr><td><strong><p class="text-right">Data urodzenia:</p></strong></td><td> 26.09.2009 rok</td></tr> <tr><td><strong><p class="text-right">Wiek (aktualny):</p></strong></td><td> 7 lat</td></tr> <tr><td><strong><p class="text-right">Waga (aktualna):</p></strong></td><td> 30 kg</td></tr> <tr><td><strong><p class="text-right">Stopień (aktualny):</p></strong></td><td> 8,2 kyu</td></tr> <tr><td><strong><p class="text-right">Licencja:</p></strong></td><td> -</td></tr> </table> </div> </div> </div> <!-- STARTY --> <div role="tabpanel" class="tab-pane" id="starty"> <div class="row"> <table class="table"> <tr style= "background-color:#337ab7; height:20px; color:#ddd"><td style= "width:130px" class="text-center"><strong>Data</strong></td><td style= "width:500px" class="text-center"><strong>II Grand Prix KARATE Lębork</strong></td><td style= "width:130px" class="text-center"><strong>Lokata</strong></td></tr> <tr><td style= "width:130px" class="text-center">2016-11-12</p></td><td style= "width:500px">KATA INDYWIDUALNE Chłopcy 7 lat i mniej</td><td style= "width:130px" class="text-center">1</p></td></tr> <tr><td style= "width:130px" class="text-center">2016-11-12</td><td style= "width:500px">KATA INDYWIDUALNE Chłopcy 7 lat i mniej</td><td style= "width:130px" class="text-center">1</td></tr> </table> </div> <div class="row"> <table class="table"> <tr style= "background-color:#337ab7; height:20px; color:#ddd"><td style= "width:130px" class="text-center"><strong>Data</strong></td><td style= "width:500px" class="text-center"><strong>II Grand Prix KARATE Lębork</strong></td><td style= "width:130px" class="text-center"><strong>Lokata</strong></td></tr> <tr><td style= "width:130px" class="text-center">2016-11-12</p></td><td style= "width:500px">KATA INDYWIDUALNE Chłopcy 7 lat i mniej</td><td style= "width:130px" class="text-center">1</p></td></tr> <tr><td style= "width:130px" class="text-center">2016-11-12</td><td style= "width:500px">KATA INDYWIDUALNE Chłopcy 7 lat i mniej</td><td style= "width:130px" class="text-center">1</td></tr> </table> </div> </div> </div> </div> </div> </div> </div> <!-- Koniec Okienko modala --> </div> </div> <!-- KONIEC ZAWODNIK INFO -->

.nav-tabs-zawodnik { border-bottom: 0px solid #DDD; } .nav-tabs-zawodnik > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; } .nav-tabs > li > a { border: none; color: #337ab7; font-size: 18px; } .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #337ab7 !important; background: transparent; } .nav-tabs > li > a::after { content: ""; background: #337ab7; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); } .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); } .tab-nav > li > a::after { background: #337ab7 none repeat scroll 0% 0%; color: #fff; } .tab-pane { padding: 7px 0; } .tab-content { padding: 20px; } .card { background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; } .tabela-zawodnik { border: #FFF; } .tabela-zawodnik > td { height: 15px; vertical-align: super; } .tabela-zawodnik > thead > tr > th, .tabela-zawodnik > tbody > tr > th, .tabela-zawodnik > tfoot > tr > th, .tabela-zawodnik > thead > tr > td, .tabela-zawodnik > tbody > tr > td, .tabela-zawodnik > tfoot > tr > td { padding: 0px; line-height: 1; vertical-align: super; border-top: 0px solid #ddd; } .tabela-zawodnik > a, .tabela-zawodnik > a:hover, .tabela-zawodnik > a:focus, .tabela-zawodnik > a:active { font-size: 18px; }