Displaying buttons and a title in bootstrap modal

Question

I'm using modal (from vue-bootstrap) and I wrote the following code:

<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>

where:

    .action_btn {
        margin: 0 5px;
    }

    .float-right {
        float: right;
    }

    .align-left {
        text-align: left;
    }

    h4 {
        float: left;
        font-size: 18px;
    }

I want to get the following header:

But currently I get:

As you can see, I have managed to display the buttons one by one but the <h4> header breaks, even though there is space. I was managed to do it, using the following topic. But now I can't seem to fix the title. Why does Bootstrap uses display: flex? It is very annoying and hard to display in that way. What is the easiest way to display the buttons and the title like shown?

score 1 · Accepted Answer · answered Mar 19 '20 at 10:07

Use ml-auto on your div wrapping the buttons. This will push them to the right, without trying to take as much space as possible that w-100 is doing.

new Vue({
  el: "#app",
  data() {
    return {
      showModal: true
    }
  }
});

<link href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="//unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <b-btn @click="showModal = true">Open Modal</b-btn>
  <b-modal v-model="showModal" size="xl">
    <template v-slot:modal-header>
      <h4 class="modal-title">
        <b>Note Full Report: 1234</b>
      </h4>
      <div class="ml-auto">
        <b-button variant="light" class="border-secondary">
          Move to parent
        </b-button>
        <b-button variant="light" class="border-secondary">
          Copy full path
        </b-button>
        <b-button variant="light" class="border-secondary">
          <b-icon-x></b-icon-x> Close
        </b-button>
      </div>
    </template>
  </b-modal>
</div>

score 0 · Answer 2 · answered Mar 19 '20 at 04:22

0

that's because you are using w-100 style to the button wrapper. <div class="w-100">, remove it will fix this issue

answered Mar 19 '20 at 04:22

Hank X

1,988
2
14
32

Displaying buttons and a title in bootstrap modal

2 Answers2