Bootstrap 4 - Why is 'col-sm-auto' overriding 'col-md-4'? - html

Question

I am learning Bootstrap and now I am facing a problem that I just couldn't get it.
This is a snippet of the code:
<button
className="
col-md-4
col-sm-auto
btn
btn-info
btn-custom"
onClick={this.toggleModalHandler}
> Salvar
</button>
Here a somewhat more complete code:
<div className="container">
<h2 className="border-bottom mb-4 pt-sm-2">Insira Os Valores Do Produto</h2>
<div className="pt-4 border-bottom">
<h5>Valor Total: R$ </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">Valor Total Acumulado: R$</h5>
<div className="col-md-8 col-sd-12">
<button
className="col-auto btn btn-success btn-custom"
onClick={() => this.addOrcHandler()}
> Adicionar Orçamento
</button>
<button
className="col-auto btn btn-danger btn-custom"
onClick={() => this.limparHistoricoOrcHandler()}
> Limpar Orçamentos
</button>
<button
className="col-md-4 col-sm-auto col-3 btn btn-info btn-custom"
onClick={this.toggleModalHandler}
> Salvar
</button>
</div>
</div>
</div>
</div>
As I understand it so far col-md-4 should override col-sm-auto when the screen is bigger than 768px, but it is not working and I don't know why, since it worked properly in other elements.
I couldn't find an answer to this specific situation on my researches.
What I am not getting is why col-md-4 is not ocuppying 4 columns of the grid.
Just an observation: It works fine if I remove col-sm-auto. And it is in a row
What am I doing wrong?

Answer 1

You see, the .col uses for blocks which are the part of Bootstrap Grid. For correct work they should be covered in .row and .container parents. Although, you shouldn't mix it with button and .btn, because they works with different logic and for different purpose. The correct code is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-auto">
<button class="btn btn-info btn-custom btn-block">Salvar</button>
</div>
</div>
</div>
UPDATED
More about .col wrapping https://getbootstrap.com/docs/4.0/layout/grid/#column-wrapping
Added .btn-block for .btn to get them 100% in a parent .col.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container">
<h2 class="border-bottom mb-4 pt-sm-2">Insira Os Valores Do Produto</h2>
<div class="pt-4 border-bottom">
<h5>Valor Total: R$ </h5>
<div class="row align-items-md-center mb-2 flex-md-row flex-sm-column">
<h5 class="col-md-4 col-sm-auto mb-md-0">Valor Total Acumulado: R$</h5>
<div class="col-md-8 col-sd-12">
<div class="row">
<div class="col-sm-4 col-auto">
<button class="btn btn-success btn-custom btn-block">Adicionar Orçamento</button>
</div>
<div class="col-sm-4 col-auto">
<button class="btn btn-danger btn-custom btn-block">Limpar Orçamentos</button>
</div>
<div class="col-sm-4 col-auto">
<button class="btn btn-info btn-custom btn-block">Salvar</button>
</div>
</div>
</div>
</div>
</div>
</div>