Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!

Difference between revisions of "Bootstrap Test"

From wiki
Jump to navigation Jump to search
(Created page with " {{GCb-head-bootest-eng}} {{GCb-nav-bootest-eng}} <html> <h1 class="display-1">Display 1</h1> </html> {{GCb-footer-bootest-eng}} {{GCb-css-bootest-core}} {{GCb-css-boote...")
 
Line 4: Line 4:
 
{{GCb-head-bootest-eng}}
 
{{GCb-head-bootest-eng}}
 
{{GCb-nav-bootest-eng}}
 
{{GCb-nav-bootest-eng}}
 +
 
<html>
 
<html>
  

Revision as of 14:15, 15 April 2019


<html> <head> 

   <meta charset="utf-8">

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

   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>GCbootstrap - GCpedia, GCpedicure and Bootstrap</title>

   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 

   <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>

<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

</head>

<body lang="en"> <section class="super-body">

</html> <html lang="en"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" lang="en"> <a class="navbar-brand" href="http://www.gcpedia.gc.ca/" style="padding-top:13px;"> <img src="http://www.gcpedia.gc.ca/gcwiki/images/1/1d/GcpediaNextGen.png" height="26" width="105" alt="GCpedia"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> </button>

</nav> </html>

<html>

Display 1


</html> <html> <section class="footer fixed-bottom">

Contact Information: <a href="mailto:marco.battilana@dfo-mpo.gc.ca" class="text-info"> Your Contact</a>

<a href="http://www.gcpedia.gc.ca/wiki/GCbootstrap">Powered by GCbootstrap</a>

</section> 

   </section>


</body> </html> <html> <style> /* ===== core.css Purpose: To extend the wonderful GCpedicure (by Chris - Global Affairs Canada's Innolab) by being able to utilize default Bootstrap's common look and feel and retain GCpedia's functionality.

Author: Marco Battilana (marco.battilana@dfo-mpo.gc.ca) - Fisheries and Oceans Canada GCconnex: gcconnex.gc.ca/profile/crazybat Twitter: @crazybat

Revision History:

Version 1.0 (16 Oct 2018) - Using existing methodology of GCpedicure and having the added benefit of showing most of the default stylings of Bootstrap. You can now use Bootstrap framework directly - including almost all scripts, styles, etc.

Known Issues: - Need an easier way to add the Edit link (SOLVED! See override.css Version 1.0) - Incorporate existing GCpedia functionality: Language flipper, log in, etc. (SOLVED! See override.css Version 1.0)

Version 1.1 (31 Oct 2018) - Created override.css to bring back some of the default GCpedia functionality, language flipper, log in, etc.

Known Issues: - <multilang> does weird things to GCpedia include files. See if we can flip language using this. Otherwise, keep the built-in flipper for now.

References: GCpedicure: www.gcpedia.gc.ca/wiki/GCpedicure Bootstrap: getbootstrap.com 

*/

html { position: relative; min-height: 100%; -ms-overflow-style: none; }

html, body { height: 100%; }

body { overflow-y: hidden; background-color: #fff; /*min-height: 75rem;*/ /*margin-top: 4.5rem;*/ /*margin-bottom: 4.5rem;*/ }

/* ==== The main container style for GCbootstrap - DON'T CHANGE! ==== */ .super-body { 

 position: fixed;
 overflow-y: scroll;
 overflow-x: hidden;
 -ms-overflow-x: hidden;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 10000;
 background-color: #fff;
 -webkit-overflow-scrolling: touch;
 -ms-overflow-style: -ms-autohiding-scrollbar;
 /* moved from body as GCpedia renders it out */
 /*min-height: 75rem;
 margin-top: 4.5rem;
 margin-bottom: 4.5rem;*/

} /* ==== The main container style for GCbootstrap - DON'T CHANGE! ==== */

/* === GCbootstrap icon ===*/

  1. icon-gcb {

position: absolute; display: block; /*bottom: 30px;*/ bottom: 22px; right: 23px; z-index: 10005; }

/* ==== To override GCpedia styles. DO NOT REMOVE ==== */ div#mw-head { 

 position: absolute;
 top: 145px;
 right: 0;
 width: 100%;
 display: none;

} div#mw-panel { 

 position: absolute;
 top: 160px;
 padding-top: 1em;
 width: 10em;
 left: 0;
 display: none;

}

  1. footer {
 display: none;

}

/* ==== To override GCpedia styles. DO NOT REMOVE ==== */

/* === Globals: Building rows, column for proper spaces and shading, inheriting font sizes, visibility, etc. === */

/* == For debugging only! Puts boxes around all grid elements == */ /*[class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .2); }*/

/* == Content container that's NOT a header, nav, or footer == */ div[role*="main"] { 

 margin-top: 5em;
 margin-bottom: 4em;

}

@media screen { ul { list-style-image: inherit; margin-left: 0; } } @media screen { .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { margin-top: 0; } } @media screen { .mw-content-ltr nav ul, .mw-content-rtl .mw-content-ltr nav ul { margin-left: 0; } }

@media screen { .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol { margin: inherit; padding: inherit; } } @media screen { .mw-content-ltr nav ol, .mw-content-rtl .mw-content-ltr nav ol { margin: inherit; padding: inherit; } } div[class*="container"] ul[class*="list-group"], div[class*="container"] ul[class*="nav"], div[class*="container"] ul[class*="pagination"] { margin-left: 0; }

input[type=checkbox], input[type=radio] { margin-left: 0; position: inherit; }

.collapse, .collapse .show { 

 visibility: inherit;

}

.row { 

 margin-bottom: 1rem;

}

.btn-primary { 

 background-color: #007bff !important;

} .fade { 

 opacity: inherit;

}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { 

 font-family: inherit;
 margin-bottom: .25em;
 padding-bottom: 5px;
 padding-top: inherit;
 border-bottom: solid 1px transparent;

}

.mw-body-content { 

 font-size: inherit;

}

@media screen { .mw-body h1 { font-size: 2.5rem; line-height: 1.2; margin-top: 0; } } @media screen { .mw-body h2 { font-size: 2rem; line-height: 1.2; margin-top: 0; } }

@media screen { .mw-body h3 { font-size: 1.75rem; font-weight: inherit; line-height: 1.2; margin-top: 0; } }

@media screen { .mw-body h4 { font-size: 1.5rem; font-weight: inherit; line-height: 1.2; margin-top: 0; } }

@media screen { .mw-body h5 { font-size: 1.25rem; line-height: 1.2; margin-top: 0; } }

@media screen { .mw-body h6 { font-size: 1rem; line-height: 1.2; margin-top: 0; } } .modal-backdrop { z-index: -1; }

/* == Main Navigation bar == */ .navbar { 

 border-radius: 0;

}

.navbar-default { 

 background-color: #fff;
 border-color: #e7e7e7;

}

.navbar-default .navbar-brand { 

 color: #222;

}

.navbar-brand { padding: 0; }

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { 

 color: #5e5e5e;
 background-color: transparent;

}

.navbar-default .navbar-text { 

 color: #222;

}

.navbar-default .navbar-nav>li>a { 

 color: #222;

}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { 

 color: #111;
 background-color: transparent;

}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { 

 color: #555;
 background-color: #e7e7e7;

}

.navbar-default .navbar-nav>.disabled>a, .navbar-default .navbar-nav>.disabled>a:hover, .navbar-default .navbar-nav>.disabled>a:focus { 

 color: #ccc;
 background-color: transparent;

}

.navbar-default .navbar-toggle { 

 border-color: #ddd;

}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 

 background-color: #ddd;

}

.navbar-default .navbar-toggle .icon-bar { 

 background-color: #888;

}

.navbar-default .navbar-collapse, .navbar-default .navbar-form { 

 border-color: #e7e7e7;

}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { 

 color: #555;
 background-color: #e7e7e7;

}

@media (max-width: 767px) { 

 .navbar-default .navbar-nav .open .dropdown-menu>li>a {

color: #777; 

 }
 .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {

color: #333; background-color: transparent; 

 }
 .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
 .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {

color: #555; background-color: #e7e7e7; 

 }
 .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
 .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
 .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {

color: #ccc; background-color: transparent; 

 }

}

.navbar-default .navbar-link { 

 color: #777;

}

.navbar-default .navbar-link:hover { 

 color: #333;

}

.navbar-default .btn-link { 

 color: #777;

}

.navbar-default .btn-link:hover, .navbar-default .btn-link:focus { 

 color: #333;

}

.navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:focus { 

 color: #ccc;

}

.navbar-default .navbar-nav>li>a:visited { 

 color: #222;

}

ul.dropdown-menu { 

 padding: 0;

}

.dropdown-menu>li>a { 

 display: block;
 padding: 15px 20px;
 clear: both;
 line-height: 1.42857143;
 color: #333;
 white-space: nowrap;
 border-bottom: 1px solid #e8e8e8;

}

/*= Pretty nav effects =*/ .nav-item::after{ content:; display:block; width:0px; height:2px; background:#a07dff; transition: 0.2s; } .nav-item:hover::after { width:100%; } .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{ color:#a07dff; } .nav-link { padding:15px 5px; transition:0.2s; } .dropdown-item.active, .dropdown-item:active { color:#212529; } .dropdown-item:focus, .dropdown-item:hover { background:#a07dff; }


/* == Cards, specific styles ==*/ .card { border: solid 1px #c8ced3; } .card-accent-primary { 

   border-top-color: #20a8d8;
   border-top-width: 5px;

} .card-accent-secondary { 

   border-top-color: #c8ced3;
   border-top-width: 5px;

} .card-accent-success { 

   border-top-color: #4dbd74;
   border-top-width: 5px;

} .card-accent-danger { 

   border-top-color: #f86c6b;
   border-top-width: 5px;

} .card-accent-warning { 

   border-top-color: #ffc107;
   border-top-width: 5px;

} .card-accent-info { 

   border-top-color: #63c2de;
   border-top-width: 5px;

} .card-accent-dark { 

   border-top-color: #2f353a;
   border-top-width: 5px;

}

/* == Main Footer == */ .footer a, .footer a:link, .footer a:visited { color: #a07dff !important; } .footer a:focus, .footer a:hover, .footer a:active { color: #e7e7e7 !important; text-decoration: underline; } /* == Sticky bottom == */ .fixed-bottom { 

 position: fixed;
 bottom: 0;
 width: 100%;
 height: 60px; /* Set the fixed height of the footer */
 line-height: 60px; /* Vertically center the text */
 background-color: #333;
 z-index: 10001;

}

@media (max-width: 767px) { .fixed-bottom { position: relative; bottom: none; width: 100%; height: 60px; /* Set the fixed height of the footer */ line-height: 60px; /* Vertically center the text */ background-color: #333; z-index: 10001; } }

/* === Content-specific styles ===*/ /* == Youtube Player styles == */

.youtube-player { position: relative; padding-bottom: 56.23%; /* Use 75% for 4:3 videos */ height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; }

.youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; }

.youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; }

.youtube-player img:hover { -webkit-filter: brightness(75%); }

.youtube-player .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://www.gcpedia.gc.ca/gcwiki/images/e/ef/Play-button.png") no-repeat; cursor: pointer; }

/*== Gallery ==*/ .thumbnail { 

   position:relative;
   overflow:hidden;

}

.caption { 

   position:absolute;
   top:-100%;
   right:0;
   background: rgba(102, 75, 229, 0.75);
   width:100%;
   height:100%;
   padding:2%;
   text-align:center;
   color:#fff !important;
   z-index:2;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;

} .thumbnail:hover .caption { 

   top:0%;

}

/*== Personas ==*/ .our-team-main { width:100%; height:auto; border-top:5px #323233 solid; background:#fff; overflow:hidden; position:relative; transition:0.5s; margin-bottom:28px; } .our-team-main h3 { font-size:20px; font-weight:700; }

.our-team-main p { margin-bottom:0; }

.team-back { width:100%; height:auto; position:absolute; top:0; left:0; padding-right: 90px; text-align:left; background:#fff;

} .team-back img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ 

   filter: grayscale(100%);

filter: gray; }

.team-front { width:100%; height:auto; position:relative; z-index:10; background:#fff; bottom:0px; transition: all 0.5s ease; text-align:left; }

.our-team-main:hover .team-front { bottom:-300px; transition: all 0.5s ease; }

.our-team-main:hover { border-color:#777; transition:0.5s; }

/*== FAQs ==*/

  1. accordian ul {
   margin-left: 35px;

}

  1. accordion .card {
   border: medium none;
   border-radius: 0;
   box-shadow: none;
   margin: 0 0 15px 0;

}

  1. accordion .card-header {
   border-radius: 30px;
   padding: 0;

background-color: none; border-bottom: none; border-top-color: #c8ced3; 

   border-top-width: 5px;

}

  1. accordion h5 {

background: #fff; margin-bottom: 0; padding: 5px 15px 5px 0; }

  1. accordion .card-title a {
   background: #28a745 none repeat scroll 0 0;
   border: 1px solid transparent;
   border-radius: 5px;
   color: #fff;
   display: block;
   padding: 12px 20px 12px 60px;
   position: relative;
   transition: all 0.3s ease 0s;

}

  1. accordion .card-title a.collapsed {
   background: #fff none repeat scroll 0 0;
   border: 1px solid #bbb;

border-top-color: #c8ced3; 

   border-top-width: 5px;  
   color: #333;

}

  1. accordion .card-title a::after {
   background: #28a745 none repeat scroll 0 0;
   border: 1px solid transparent;
   border-radius: 50%;
   color: #fff;
   content: '\02C5';
   height: 55px;
   left: -1px;
   line-height: 55px;
   position: absolute;
   text-align: center;
   top: -5px;
   transition: all 0.3s ease 0s;
   width: 55px;

}

  1. accordion .card-title a.collapsed::after {
   background: #fff none repeat scroll 0 0;
   border: 1px solid #bbb;

box-shadow: none; 

   color: #333;
   content: '\003E';

}

  1. accordion .card-body {
   background: transparent none repeat scroll 0 0;
   border-top: medium none;
   padding: 20px 0 10px 9px;
   position: relative;

border: 1px solid #28a745; margin-right: 15px; }</style></html> <html> <style>

/* ===== override.css Purpose: To override the initial core.css styles.

Dependancy: - core.css (runs first) -- override.css (runs second)

Author: Marco Battilana (marco.battilana@dfo-mpo.gc.ca) - Fisheries and Oceans Canada Twitter: @crazybat

Revision History:

Version 1.0 (26 Oct 2018) - Brought in existing GCpedia functionality for pages. Uses same links, just styled and displayed different.

Known Issues: - Incorporate additional GCpedia functionality: Language flipper, log in, etc. (PARTIALLY SOLVED! Still need to bring over remaining GCpedia items) -- Search GCpedia -- Categories -- Others???

References: GCpedicure: www.gcpedia.gc.ca/wiki/GCpedicure Bootstrap: getbootstrap.com 

*/

/* ==== To override the initial override from core.css. DO NOT REMOVE ==== */

/* === GCpedia Head content (Personal, GCpedia Tools) === */ div#mw-head { 

 position: absolute;
 top: -145px;
 display: block;
 height: 0;

} div#mw-head #left-navigation, div#mw-head #right-navigation .pull-left, div#mw-head #right-navigation #p-cactions { 

 display: none;

}

div#mw-head #p-personal { position: fixed; /*bottom: -97px;*/ bottom: -109px; /*right: 140px;*/ right: 82px; display: block; width: auto; }

/* == NOTE: The Eng / Fr button only changed the language of GCpedia UI, NOT YOUR CONTENT. ==*/ div#mw-head #right-navigation #p-views { 

 position: fixed;
 /*bottom: -30px;*/
 bottom: -40px;
 display: block;
 right: 20px;

} div#mw-head #right-navigation #p-views ul { background: #eee; 

   border: solid hsla(0, 0%, 96%, 0.5);
   transition: 0.2s;

border-top-left-radius: 10px; border-top-right-radius: 10px; } div#mw-head #p-personal ul { transition: 0.2s; }

div#mw-head #right-navigation #p-views ul::before { color: white; background: #222; display: block; float: right; margin-bottom: 5px; content: ' Views \A\A\A\A\A'; white-space: pre-wrap; position: relative; top: -30px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: solid 1px #777; padding: 0 5px; } div#mw-head #p-personal ul::before { color: white; background: #222; display: block; float: right; margin-bottom: 5px; content: ' Personal Tools \A\A\A\A'; white-space: pre-wrap; position: relative; top: -30px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: solid 1px #777; padding: 0 5px; }

div#mw-head #right-navigation #p-views:hover { bottom: 30px; transition: 0.2s; z-index: 10000; } div#mw-head #p-personal:hover { /*bottom: -35px;*/ bottom: -43px; transition: 0.2s; }

div#mw-head #right-navigation #p-views ul li, div#mw-head #p-personal ul li { background-image: none; background: #eee; height: 30px; text-align: center; }

div#mw-head #right-navigation #p-views ul li#ca-ve-edit { display: none; }

div#mw-head #right-navigation #p-search #simpleSearch { height: inherit; position: fixed; right: 16px; top: 29px; } /*TO DO Have search show on very small devices, but results don't show very well on older template. Staying invisible for now.*/ @media (max-width: 767px) { div#mw-head #right-navigation #p-search { display: none; } } @media screen { div#mw-head #right-navigation #p-search #simpleSearch #searchInput { font-size: inherit; padding: 0 0 0 5px; } } @media screen { div#mw-head #right-navigation #p-search #simpleSearch input { background-color: none; } }

@media screen { div#simpleSearch #searchButton, div#simpleSearch #mw-searchButton { background-color: #ccc; } }


.icon#ca-unfavorite a, .icon#ca-favorite a { 

   padding-top: 2.3em;

}

@media screen { div.vectorTabs { background-image: none; background-image: none !ie; } } @media screen { div.vectorTabs span { display: inherit; background-image: none; background-image: none !ie; } } @media screen { div.vectorTabs ul { height: auto; } } @media screen { div.vectorTabs ul li { line-height: 0; } } @media screen { #p-personal { top: auto; background: #eee; border: solid hsla(0, 0%, 96%, 0.5); border-top-left-radius: 10px; border-top-right-radius: 10px; } } @media screen { #p-personal ul { padding-left: 0; } } @media screen { #p-personal li { font-size: 0.8em; padding: 0 0.375em; } }

/*TO DO: Figure out a way to make GCpedia tools not sticky on the footer with small resolutions. For now, don't show as it's hard to edit a GCpedia page with such a small window.*/ @media (max-width: 767px) { div#mw-head #right-navigation #p-views { display: none; } } @media (max-width: 767px) { div#mw-head #p-personal { display: none; } }

/* === GCpedia Left Navigation content === */ /* == Eng / Fr button (Used to flip the language of your CONTENT ==*/

div#mw-panel { 

 position: absolute;
 left: -9999px;
 display: block;

}

div#mw-panel #p-lang .interlanguage-link { position: fixed; top: -2px; right: 17px; display: block; font-size: inherit; }

@media (max-width: 767px) { div#mw-panel #p-lang .interlanguage-link { position: fixed; /*top: -4px;*/ left: 0; width: 95px; height: 0px; } } div#mw-panel #p-lang .interlanguage-link a { color: #fff; /*padding: 15px;*/ padding-left: 71px; padding-right: 71px; line-height: 2.1rem; display: block; /*background: #333;*/ /*border: solid 1px #aaa;*/ font-weight: bold; } @media (max-width: 767px) { div#mw-panel #p-lang .interlanguage-link a { line-height: 0; padding-left: 10px; padding-right: 10px; display: inline; } } div#mw-panel #p-lang .interlanguage-link a::after { /*content:; display:block; width:0px; height:2px; background:#00d6fe; transition: 0.2s;*/ } div#mw-panel #p-lang .interlanguage-link a:hover::after { /*width:100%;*/ }

</style> </html>

Retrieved from "https://wiki.gccollab.ca/index.php?title=Bootstrap_Test&oldid=9056"