I have implemented a modal using vue-bootstrap. The code for the modal is as follows:
<template id="child">
<b-modal v-model="showModal" size="lg">
<template v-slot:modal-header>
<h4 class="modal-title">
<b>{{ title }}: {{ detailedResults.pid }}</b>
</h4>
<div class="w-100">
<b-button variant="light border-dark" class="btn btn-primary action_btn float-right" v-on:click="closeModal">
Close
</b-button>
<b-button variant="light border-dark" class="btn btn-primary action_btn float-right" v-on:click="copyFullPath">
Copy full path
</b-button>
<b-button v-if="checkIfNotMainPID()" variant="light border-dark" class="btn btn-primary action_btn float-right" v-on:click="parentFunc(detailedResults.ppid)">
Move to parent
</b-button>
</div>
</template>
</b-modal>
</template>
Specific styling for the buttons and header in this code includes:
.action_btn {
margin: 0 5px;
}
.float-right {
float: right;
}
.align-left {
text-align: left;
}
h4 {
float: left;
font-size: 18px;
}
The desired appearance of the modal header is shown here:
https://i.sstatic.net/0JaSO.png
However, the current output looks like this:
https://i.sstatic.net/owTiZ.png
The issue I am facing is that although there seems to be enough space, the <h4> header breaks. I followed advice from a topic on Stack Overflow to display the buttons individually but now I'm struggling with fixing the title alignment. Why does Bootstrap use display: flex? It's quite challenging to work with it in this manner. Can someone provide an easier way to align both the buttons and the title correctly?