<div class="vertical-align container">
  <h3>Vertical align</h3>
  <div><span>ovpv</span><span class="align-baseline">.me</span></div>
  <div><span>ovpv</span><span class="align-top">.me</span></div>
  <div><span>ovpv</span><span class="align-middle">.me</span></div>
  <div><span>ovpv</span><span class="align-bottom">.me</span></div>
  <div><span>ovpv</span><span class="align-text-bottom">.me</span></div>
  <div><span>ovpv</span><span class="align-text-top">.me</span></div>
  <div><span>ovpv</span><span class="align-middle">.me</span></div>
</div>

<div class="bg container">
  <h3>Background</h3>
   <div class="bg-white">
     ovpv.me
   </div>
   <div class="bg-yellow">
     <div class="bg-transparent">
       ovpv.me
     </div>
  </div>
</div>
<div class="mt-3 mb-3 container borders">
   <h3>borders</h3>
  <div class="d-flex flex-wrap">
    <div class="cube border m-2">
    </div>
    <div class="cube border-right m-2">
    </div>
    <div class="cube border-left m-2">
    </div>
    <div class="cube border-bottom m-2">
    </div>
  </div>
</div>

<div class="mt-3 mb-3 container borders">
   <h3></h3>
</div>
.bg{
  background-color: red;
}
.bg-yellow{
  background-color: yellow;
}

.cube{
  height: 50px;
  width: 50px;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.