HTML
xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<title>Bootstrap Example</title>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1">7
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">8
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>9
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>10
</head>11
<body>12
13
<div class="container gridcontainer">14
15
16
<div class="row gridimagerow ">17
<div class="col-sm-3 gridimagecol nopadding">18
19
20
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(5).jpg" alt="Lights" style="width:125px">21
<div class="collapse1"22
data-mdb-toggle="collapse"23
data-mdb-target="#collapseExample"24
aria-expanded="true"25
aria-controls="collapseExample">26
<h4>Abigail Long</h4>27
<p>2021 CELA Award Winner <br>CELA University </p>28
<p>CELA University </p>29
</div>30
31
32
</div>33
<div class="col-sm-3 gridimagecol nopadding">34
35
36
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(5).jpg" alt="Lights" style="width:125px">37
<div class="collapse2"38
data-mdb-toggle="collapse"39
data-mdb-target="#collapseExample2"40
aria-expanded="true"41
aria-controls="collapseExample2">42
<h4>Abigail Long</h4>43
<p>2021 CELA Award Winner <br>CELA University </p>44
<p>CELA University </p>45
</div>46
47
48
</div>49
<div class="col-sm-3 gridimagecol nopadding">50
51
52
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(5).jpg" alt="Lights" style="width:125px">53
<div class="collapse2"54
data-mdb-toggle="collapse"55
data-mdb-target="#collapseExample2"56
aria-expanded="true"57
aria-controls="collapseExample2">58
<h4>Abigail Long</h4>59
<p>2021 CELA Award Winner <br>CELA University </p>60
<p>CELA University </p>61
</div>62
63
64
</div>65
<div class="col-sm-3 gridimagecol nopadding">66
67
68
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(5).jpg" alt="Lights" style="width:125px">69
<div class="collapse2"70
data-mdb-toggle="collapse"71
data-mdb-target="#collapseExample3"72
aria-expanded="true"73
aria-controls="collapseExample3">74
<h4>Abigail Long</h4>75
<p>2021 CELA Award Winner <br>CELA University </p>76
<p>CELA University </p>77
</div>78
79
80
</div>81
</div>82
</div>83
84
<div class="container gridcontainer2">85
86
<div class="row gridcontainerrow">87
88
89
90
91
92
<div class=" col-md-8 collapse multi-collapse mt-3 collapsecard" id="collapseExample3" data-collapse-group="collapse-group">93
<div class="row gridcardrow">94
<div class="col-md-2">95
<h3>96
Test Bio Name97
</h3>98
</div>99
<div class="col-md-6">100
<p>101
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad102
squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt103
sapiente ea proident.104
</p>105
</div>106
</div>107
</div>108
109
<div class=" col-md-8 collapse multi-collapse mt-3 collapsecard" id="collapseExample" data-collapse-group="collapse-group">110
<div class="row gridcardrow">111
<div class="col-md-2">112
<h3>113
Test Bio Name114
</h3>115
</div>116
<div class="col-md-6">117
<p>118
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.119
</p>120
</div>121
</div>122
</div>123
<div class=" col-md-8 collapse multi-collapse mt-3 collapsecard" id="collapseExample2" data-collapse-group="collapse-group">124
<div class="row gridcardrow">125
<div class="col-md-2">126
<h3>127
Test Bio Name128
</h3>129
</div>130
<div class="col-md-6">131
<p>132
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."133
</p>134
</div>135
</div>136
</div>137
</div>138
</div>139
140
141
</body>142
</html>143
CSS
xxxxxxxxxx1
.nopadding {2
padding: 0 !important;3
margin: 0 !important;4
}5
6
7
.gridimagerow {8
9
align-items:center;10
padding:0;11
12
}13
14
.gridcontainer {15
display:flex;16
justify-content: center;17
flex-wrap:wrap;18
}19
20
.gridcontainer2 {21
22
margin:auto;23
justify-content: center;24
align-items: center;25
display: block;26
margin-left: auto;27
margin-right: auto;28
29
}30
31
.collapsecard {32
background-color: #f8f7f2;33
height:328px;34
align-items: center;35
}36
37
.gridcardrow {38
display:flex;39
justify-content: space-around;40
align-items: center;41
height: 328px;42
}43
44
.gridcontainerrow {45
margin: auto;46
display: flex;47
justify-content: center;48
}JS
xxxxxxxxxx1
$("[data-collapse-group]").on('show.bs.collapse', function () {2
var $this = $(this);3
var thisCollapseAttr = $this.attr('data-collapse-group');4
$("[data-collapse-group='" + thisCollapseAttr + "']").not($this).collapse('hide');5
}); Console errors: 0