Portolio - Play

Sample BS4 Portfolio If you use please give me credit.

by Keith Jeter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://unpkg.com/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<!-- Custom HTML5 markup by Keith Jeter http://galnova.com -->

<div class="container">

  <h2>Toggleable Tabs</h2>
  <br/>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs nav-justified" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#edu"><icon class="fas fa-graduation-cap"></icon> Education</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#exp"><icon class="fas fa-rocket"></icon> Experience</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#apps"><icon class="fas fa-language"></icon> Applications</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#frames"><icon class="fas fa-file-code"></icon> Coding</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
  
    <div id="edu" class="container tab-pane active"><br/>
      <h3>Education</h3>
      <p>Here are the various schools I have attended.</p>

<div class="row">

<!-- -- -->

<div class="col-xs-12 col-md-6">
<div class="grey">

<h4>The Academy of Art</h4>

<img src="http://galnova.com/2015/img/l-aau.png" alt="AAU Logo" title="AAU Logo" />

<hr/>

<p>
<strong>Graduation Year: </strong>2015
  <br/>
  <strong>City: </strong>San Francisco, CA
  <br/>
  <strong>Degree: </strong>MFA / Web Design & New Media
</p>

<div class="progress">

  <div class="progress-bar progress-bar-animated progress-bar-striped bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"><span>Adobe 30%</span>
  </div>

  <div class="progress-bar progress-bar-striped...

CSS

/* --Custom BS4 CSS3 overrides by Keith Jeter http://galnova.com*/

.nill { margin: 0; padding: 0; }

.nav-tabs li, .nav-tabs li a { border-radius: 0!important; }

.nav-tabs li a { margin-right: 0!important; text-align: center!important; }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-color: #ddd #ddd #fff; }

.nav-tabs li { background: #a11; }

.nav-tabs li a { 
  text-align: center;
  border: none;
  color: #666;
  outline: none;
  }

.nav-tabs .nav-link { border-bottom: solid 1px #ddd; }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-top: solid 2px #a94442; }

.nav-tabs li.active a {
    color: #4285f4!important;
}

.nav-tabs li a:hover {
    background: #eee;
    color: #a94442!important;
}

.nav-tabs li { background: #fff!important; border-bottom: 0px; }
.nav-tabs li a { color: #000!important; }

.tab-content { 
	overflow: hidden;
	min-height: 400px;
}

.progress { 
  margin-top: 10px;
/*text-shadow:
  -1px -1px 0 #fff,  
  1px -1px 0 #fff,
  -1px 1px 0 #fff,
  1px 1px 0 #fff; */
}

.progress-bar { 
  height: 2.4rem!important;
  line-height: 40px;
  font-weight: bold;
  color: #000; 
}

.progress-bar span {
  background: #ffffff69;
  padding: 3px;
  margin: auto;
  border-radius: 3px;
}

.grey { 
	background: #4f78a50a;
  line-height: 34px;
  border: solid 1px #666;
  border-top: solid 5px #003366;
	padding: 15px;
	/* margin: 10px!important; */
	margin-bottom: 30px;
}

.grey img { 
  float: left;
  padding: 50px 25px 50px 0;
  width: 20%;
  max-width: 20%;
  min-width: 30%;
  margin: auto;
}

.grey.alte img { 
  padding: 25px 25px 25px 0;
}

hr { background: #4285f4; }

@media (max-width: 767px) { 
  .fas { width: 100%; }
  .grey img { padding-bottom: 25px; }
  .grey.alte img { padding-bottom: 50px; }
}

@media (max-width: 420px) { 
  .nav-tabs li {
    border: solid 1px #000!important;
    border: none!important;
    border-bottom: solid 1px;
  }
  
  .nav-tabs .nav-item.show .nav-link, .nav-tabs...