I require assistance in adjusting the CSS for different cards within the modal box. I would like all cards to have consistent column width for various content within them, creating a symmetrical appearance. Currently, the cards appear staggered. Also, please pay attention to the alignment of the Buy buttons on the different cards.
https://i.sstatic.net/lvdnh.png
<!--Card-->
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<input type="text" id="market-search" onkeyup="marketSearch()" placeholder="Search for stock names..">
<i class="fa fa-times" data-dismiss="modal"></i>
</div>
<div class="modal-body">
<div class="container">
<div class="card stock-card" data-name="{{ stock.name }}">
<div class="card-body">
<h4 class="card-title">ABB India Ltd.</h4>
<div class="market-info">
<p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
<p class="card-text stock-info up" id="diff"> 9.45
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</p>
<p class="card-text stock-info"><strong>$</strong> <span id="price">1340</span></p>
<p class="card-text stock-info">ABB</p>
<input id="input_{{stock.code}}"/>
<a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
</div>
</div>
</div>
<!-- Other card elements go here -->
</div>
</div>
</div>
</div>
CSS
.card {
margin-top: 2rem;
}
.card .card-title {
font-weight: 300;
}
/* Other CSS rules remain the same */
.modal-lg {
max-width: 40% !important;
}
I am struggling to resolve this issue. Any guidance or input would be greatly appreciated?
Link to codepen https://codepen.io/agrawalo/pen/NWKaWMm