Working on a frontend project using the React framework and Bootstrap 5.3 for design.
Noticing that shadows are deactivated in Bootstrap by default, which means buttons don't display shadows when active as per the Bootstrap v5.0 documentation.
Link to Bootstrap Buttons Documentation
Struggling to figure out how to customize individual buttons directly in the code. Is it possible to add a style tag to the button or use a label tag in grouped buttons to activate this shadow effect?
style={{*adding CSS magic here*}}
Below is sample code for three buttons where I want to apply this shadow effect like in v5.0:
<div className="row">
<h4>Choose buffer</h4>
</div>
<div className="row">
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer1" autoComplete="off" onClick={() => measurementConfig.buffer = 1 } />
<label className="btn btn-lg btn-warning" htmlFor="buffer1"><span className="bi-database-add"></span> Buffer 1</label>
</div>
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer2" autoComplete="off" onClick={() => measurementConfig.buffer = 2 } />
<label className="btn btn-lg btn-success" htmlFor="buffer2"><span className="bi-database-add"></span> Buffer 2</label>
</div>
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer3" autoComplete="off" onClick={() => measurementConfig.buffer = 3 } />
<label className="btn btn-lg btn-info" htmlFor="buffer3"><span className="bi-database-add"></span> Buffer 3</label>
</div>
</div>
Appreciate any help on this matter!