I am currently learning Bootstrap and have encountered a challenge that I can't seem to figure out.
Let's take a look at a snippet of the code:
<button
className="
col-md-4
col-sm-auto
btn
btn-info
btn-custom"
onClick={this.toggleModalHandler}
> Save
</button>
And here is a more detailed version of the code:
<div className="container">
<h2 className="border-bottom mb-4 pt-sm-2">Insert Product Values</h2>
<div className="pt-4 border-bottom">
<h5>Total Value: $ </h5>
<div className="
row
align-items-md-center
mb-2
flex-md-row
flex-sm-column"
>
<h5 className="col-md-4 col-sm-auto mb-md-0">Accumulated Total Value: $</h5>
<div className="col-md-8 col-sd-12">
<button
className="col-auto btn btn-success btn-custom"
onClick={() => this.addOrcHandler()}
> Add Quote
</button>
<button
className="col-auto btn btn-danger btn-custom"
onClick={() => this.clearQuoteHistory()}
> Clear Quotes
</button>
<button
className="col-md-4 col-sm-auto col-3 btn btn-info btn-custom"
onClick={this.toggleModalHandler}
> Save
</button>
</div>
</div>
</div>
</div>
From what I have learned, col-md-4 should take precedence over col-sm-auto when the screen size is larger than 768px. However, it doesn't seem to be working in this case, even though it worked for other elements.
https://i.sstatic.net/y82RW.png
https://i.sstatic.net/bcmbs.png
After researching, I couldn't find a solution specific to my issue.
My confusion lies in why col-md-4 is not occupying 4 columns of the grid.
One thing to note is that it works fine if I remove col-sm-auto, and it is within a row.
Can anyone point out what mistake I might be making?