css Question posted in
Some basic documentation can be found here.

Css – How to resize Bootstrap modal width with animation

I want to resize my Bootstrap 5 modal width after clicking a button. My current code works great.
But now I want to animate this change when it’s getting bigger.

I’ve tried with animate transition in my style-css but nothing worked out for me.

I found a lot of question regarding this topic – but none of them are working for me.

How can I achieve this? Thank you!

TEMPLATE

<template>
  <div class="modal fade modal-sm" id="modalID" tabindex="-1">
    <div class="modal-dialog" :class="resizeModal == true ? 'size-modal' : ''">
      <div class="modal-body">
        <button class="btn btn-dark col-3" @click="resizeModal = !resizeModal"></button>
      </div>
    </div>
  </div>
</template>

SCRIPT

<script lang="ts" setup>
import { ref } from "vue";
const resizeModal = ref(false);
</script>

STYLE

<style>
.size-modal {
  --bs-modal-width: 80%;
}
</style>
Tags:

2

Answers


  1. 0

    It shoud be helpful if you can share a minimal and reproducible example.

    But you can try the following steps first:

    • Update your template by adding a conditional class to your modal dialog
    <template>
  <div class="modal fade" id="modalID" tabindex="-1">
    <div class="modal-dialog" :class="{ 'size-modal': resizeModal }">
      <div class="modal-content">
        <div class="modal-body">
          <button class="btn btn-dark col-3" @click="resizeModal = !resizeModal">
            Toggle Size
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

    • About your script, just ensure resizeModal is a reactive varible in Vue

    • Add CSS for animation and handle the width transition

    <style>
.modal-dialog {
  transition: width 0.5s ease-in-out;
}

.size-modal {
  width: 80% !important; /* Adjust as needed */
}
</style>

    I think this should work or at least help you.

    Login or Signup to reply.
  2. 0

    Update your style element to apply max-width transition on your modal-dialog element.

    <style>
.size-modal {
  --bs-modal-width: 80%;
}
#modalID>.modal-dialog {
  transition: max-width .5s ease-in-out;
}
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search