Grid Domains

use a combo of accordion functionality with cards inside the accordion tabs for subsections of the APIs

by grafixguy76

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>

     <div class="container">
     <div class="row">
     <div class="col-md-12">
     <div class="card">
     <h4 class="card-header">Benefits Domain APIs</h4>
 <div class="card-block">
 
 
     <h6 class="card-title">Summary</h6>
     <p class="card-text">
       The Benefits domain includes information related to current and future employee benefit enrollment. This includes medical enrollment information, flexible spending contribution amounts, retirement contributions and more.
     </p>
          <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#domain1">Show APIs by group</button>
    
    <!-- accordion -->
  
  <div id="domain1" class="collapse">
<!-- inside accordion -->
 
<div class="row">
<div class="col-sm-12">

<div class="card">
  <h5 class="card-header">Benefits</h5>
  <div class="card-block">
    <h4 class="card-title">Benefit Management</h4>
    <p class="card-text">Participant Benefit Elections is the list of elections made by a participant for organization provided benefits. This specification details the Election Summary which is a list of health and welfare benefits Elections which the participant has (in force and future), and the Election Detail which gives the details of a particular benefit election.</p>
    
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#domain1-1">Show related APIs</button>
  <!-- accordion -->
  
  <div id="domain1-1" class="collapse">
  
  <h4>
 Available APIs: <small>Benefits > Benefit Management</small>
 </h4>
     <table class="table table-hover">

  <thead>
    <tr>
      <th>#</th>
      <th>API Name</th>
     ...

CSS

html,body {
	height:100%;
}
      
.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
	-webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
	 margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
	width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
	flex-flow: column nowrap;
}

.flex-grow {
	display: flex;
    -webkit-flex: 2;
    flex: 2;
}

.modal-dialog {
  background: #ffffff;
  max-width: 65%;
  border-radius: 6px;
 
}

.collapse {
  margin-top: 25px;
 
}