Bootstrap/HTML - Using an Accordion and Bootstrap Grid - html

Question

So I wanted to know if it's possible to use the bootstrap grid (something like ) to try and have two accordions side by side.
This is the code I've been using, taken from w3schools with some modifications. I've just included the relevant sections, but if more information is required, please say so.
img {
max-width: 100%;
max-height: 100%;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.solid {
border-style: solid;
}
.gainsboro-background {
background-color: gainsboro;
}
.white-box {
background-color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
<button class="accordion"><b> Example 1 </b></button>
<div class="panel">
<p> Example 1 </p>
<p> Example 1 </p>
<p> Example 1 </p>
</div>
<button class="accordion"><b> Example 2 </b></button>
<div class="panel">
<p> Example 2 </p>
<p> Example 2 </p>
<p> Example 2 </p>
</div>
I thought I could add
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
Above the button classes, and obviously closing the div elements, but that doesn't work. I'm not too sure what I should do here.
Question: Is it possible to use the bootstrap grid on an accordion, to have two side by side accordions?.
I have checked the appropriate APIs and I can't find a similar question.

Answer 1

try this in bootstrap
<style>
img {
max-width: 100%;
max-height: 100%;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.solid {border-style: solid;
}
.gainsboro-background { background-color:gainsboro;
}
.white-box {
background-color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-6">
<button class="accordion" data-toggle="collapse" data-target="#example_1"><b> Example 1 </b></button>
<div class="panel collapse" id="example_1">
<p> Example 1 </p>
<p> Example 1 </p>
<p> Example 1 </p>
</div>
</div>
<div class="col-sm-6">
<button class="accordion" data-toggle="collapse" data-target="#example_2"><b> Example 2 </b></button>
<div class="panel collapse" id="example_2">
<p> Example 2 </p>
<p> Example 2 </p>
<p> Example 2 </p>
</div>
</div>
</div>
</div>
and demo link https://jsfiddle.net/kingtaherkings/cxbxs8vj/