Coming from: Twitter Bootstrap Button Text Word Wrap
How can I set the word wrap of a text inside a button in bootstrap 4, without change the height or with all buttons with the same height? For example:
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
with the answer from that question (that is duplicated everywhere but the answer is the same everywhere)
.btn{
white-space:normal !important;
word-wrap: break-word;
}
but the expected result is that "Cambio de Nacionalidad" being aligned.