How to add 3 elements in Bootstrap's modal header? - html

Question

I need my modal to have 3 elements in it:
To the left: a button
In the center: a title
To the right: the close button
When you look at my modal it seems like I achieved what I need, but in reality, my title is not centered. Here's my code:
.modal-dialog {
max-width: 90%;
}
.modal-header {
border: none;
}
.modal-title-filter {
color: #2D2D2D;
font-size: 1.2em;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Header -->
<div class="modal-header">
<button class="btn btn-primary">Limpiar filtros</button>
<h5 class="modal-title modal-title-filter w-100 text-center" id="exampleModalLabel">Filtros</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- /Header -->

Answer 1

the title is centered, centered with respect to its container h5, no to the modal-header, but if you want the title looks centered with respect to modal-header you can edit the margin-left of your title for that, try with this:
.modal-header .modal-title{
margin-left: -20px;
}
The higher the negative value the title will be moved to the left or more centered according to your taste.
I hope i was help you. Regards

Answer 2

You can achieve something like this by setting the display of the modal header to flex, and justifying the content by the space between the items.
Note: I had to add a thing of margin-left:0 to the close button as it has a declaration of margin-left:auto.
.modal-dialog {
max-width: 90%;
}
.modal-header {
border: none;
}
.modal-title-filter {
color: #2D2D2D;
font-size: 1.2em;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Header -->
<div class="modal-header d-flex justify-content-between align-items-center">
<button class="btn btn-primary">Limpiar filtros</button>
<h5 class="modal-title modal-title-filter" id="exampleModalLabel">Filtros</h5>
<button type="button" class="close" style="margin-left:0;" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- /Header -->