Topic: bootstrap 4.2 is implemented in this new version?
I am trying to make the divs children of class .row have the same height. I am trying to make the button that is on the right (close icon), center vertically and horizontally occupying all the height that should have with respect to the div that is on the left.
this is my code:
<div class="row mb-0 pb-0 d-flex" style="border:1px solid red;"> <div class="col-sm-8 mb-0 pb-0" style="border:1px solid blue;"> <div class="md-form mt-4"> <textarea type="text" id="objetivo_especifico" class="md-textarea form-control" formControlName="objetivo_especifico" mdbValidate mdbInputDirective></textarea> <label for="objetivo_especifico">Objetivo Específico</label> </div> </div> <div class="col-sm-4 flex-center" style="border:1px solid blue;"> <a mdbBtn size="sm" floating="true" class="m-0" mdbWavesEffect mdbTooltip="Cancelar" placement="top" class="btn-pin waves-light animated mr-8 bola_roja p-0 m-0" > <mdb-icon icon="close"></mdb-icon> </a> </div> </div>
but tested this same code in an earlier version of bootstrap, and it works. Why does this happen? If bootstrap is implementing this problem, it should not happen.
Yes, the Bootstrap 4.2.1 is added to the latest MDB Angular.
About your problem: please add the height: inherit style to the button, and it will occupy the 100% of available space.
- User: Free
- Premium support: No
- Technology: Angular
- MDB Version: 7.0.0
- Device: web
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: Yes