Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="box-wrap">
  <div class="help-boxes">
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit,  Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </div>
</div>
 
body {
  background: lightblue;
  padding: 1rem;
}
.box-wrap{ 
  height: 94vh;
}
.help-boxes{
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.help-box-link {
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
  border-radius: 3px;
  margin-bottom: 2%;
  padding: 1rem;
  flex: 0 0 31.33%;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers