How to show multiple horizontal images in Bootstrap card? - html

Question

How do I place multiple images side by side in a Bootstrap Card?
It should be multiple pictures, but only one title header and description.
In my code, the images start crossing over and intersecting each other.
Eventually, I'd like to use an array of pictures (two or more) and combine them with JavaScript.
The card can be as wide as needed.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card" style="width: 50rem;">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
Tree
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>

Answer 1

You might find Bootstrap's image-fluid class useful.
Images in Bootstrap are made responsive with .img-fluid.
max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Responsive images
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center">
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
Here's your second version with the checkbox.
You might consider using max-width instead of width to keep the card responsive.
.card {
max-width: 50rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<div cardcheckbox id="checkboxdiv">
<input type="checkbox" class="cardcheckbox" id="checkid" align="right" onclick="toggleBoxVisibility()" />
</div>
<div class="well text-center">
<div class="col-md-12">Sister Properties:</div>
<div class="row">
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="inn_logo" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="ccs_logo" class="img-fluid">
</div>
</div>
</div>
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">Tree</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div class="card-body">
Oak Tree with leaves in grassy picture with sunset
</div>
</div>
</div>
</div>
</div>