brandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout
Explore Our Templates 🚀
New
Powerful Svelte-Bootstrap SaaS App Template
Powerful Svelte-Bootstrap SaaS App Template
Admin CRM Application Template
Admin CRM Application Template
Robust Next.js SaaS App Template
Robust Next.js SaaS App Template
Powerful React-Bootstrap SaaS App Template
Powerful React-Bootstrap SaaS App Template
Modern Remix SaaS App Template
Modern Remix SaaS App Template
VueJS-Bootstrap SaaS App Template
VueJS-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template

Modal

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Modal Components

Below is a static modal dialog (without the positioning) to demonstrate the look and feel of the Modal.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Modal title

Modal body text goes here.

<div class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Modal body text goes here.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
import React from 'react';
import { Modal } from 'react-bootstrap';
const ModalComponents = () => {
  return (
    <Modal.Dialog>
        <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <p>Modal body text goes here.</p>
        </Modal.Body>
        <Modal.Footer>
            <Button variant="secondary">Close</Button>
            <Button variant="primary">Save changes</Button>
        </Modal.Footer>
    </Modal.Dialog>
  );
}
export default ModalComponents;
import React from 'react';
import { Modal } from 'react-bootstrap';
const ModalComponents = () => {
  return (
    <Modal.Dialog>
        <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <p>Modal body text goes here.</p>
        </Modal.Body>
        <Modal.Footer>
            <Button variant="secondary">Close</Button>
            <Button variant="primary">Save changes</Button>
        </Modal.Footer>
    </Modal.Dialog>
  );
}
export default ModalComponents;
<template>
    <div class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</template>
<template>
    <BModal
        title="Modal title"
        ok-title="Save changes"
        cancel-title="Close"
        body="Modal body text goes here."
    >
        <template #modal-footer>
            <BButton variant="secondary">Close</BButton>
            <BButton variant="primary">Save changes</BButton>
        </template>
    </BModal>
</template>
<div class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Modal body text goes here.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
Live demo

A modal with header, body, and set of actions in the footer. Use <Modal/> in combination with other components to show or hide your Modal. The <Modal/> Component comes with a few convenient "sub components": Modal.Header/>, <Modal.Title/>, <Modal.Body/>, and <Modal.Footer/>, which you can use to build the Modal content.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Props
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
	Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Woohoo, you're reading this text in a modal!</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
<template>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</template>
<template>
    <BButton variant="primary" @click="showModal">Launch Demo Modal</BButton>
    <BModal v-model="isModalVisible">
        <!-- Modal Title -->
        <template #title>
            <h1 class="fs-5">Modal title</h1>
        </template>
        <!-- Modal Body -->
        <p>Woo-hoo, you're reading this text in a modal!</p>
        <!-- Modal Footer -->
        <template #footer>
            <BButton variant="secondary" @click="isModalVisible = false">Close</BButton>
            <BButton variant="primary" @click="confirmModal">Save changes</BButton>
        </template>
    </BModal>
</template>
<script>
export default {
  setup() {
    const isModalVisible = ref(false);
    const showModal = () => {
      isModalVisible.value = true;
    };
    const confirmModal = () => {
      // Perform any confirmation action here
      isModalVisible.value = false;
    };
    return {
      isModalVisible,
      showModal,
      confirmModal,
    };
  },
};
</script>
<div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</div>
Scrolling long content

When modals become too long for the user's viewport or device, they scroll independent of the page itself.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
	Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Woohoo, you're reading this text in a modal!</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
<template>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</template>
<template>
    <BButton variant="primary" @click="showModal">Launch Demo Modal</BButton>
    <BModal v-model="isModalVisible">
        <!-- Modal Title -->
        <template #title>
            <h1 class="fs-5">Modal title</h1>
        </template>
        <!-- Modal Body -->
        <p>Woo-hoo, you're reading this text in a modal!</p>
        <!-- Modal Footer -->
        <template #footer>
            <BButton variant="secondary" @click="isModalVisible = false">Close</BButton>
            <BButton variant="primary" @click="confirmModal">Save changes</BButton>
        </template>
    </BModal>
</template>
<script>
export default {
  setup() {
    const isModalVisible = ref(false);
    const showModal = () => {
      isModalVisible.value = true;
    };
    const confirmModal = () => {
      // Perform any confirmation action here
      isModalVisible.value = false;
    };
    return {
      isModalVisible,
      showModal,
      confirmModal,
    };
  },
};
</script>
<div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</div>
Vertically centered

You can vertically center a modal by passing the centered prop.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Props
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
	Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Woohoo, you're reading this text in a modal!</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
<template>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</template>
<template>
    <BButton variant="primary" @click="showModal">Launch Demo Modal</BButton>
    <BModal v-model="isModalVisible">
        <!-- Modal Title -->
        <template #title>
            <h1 class="fs-5">Modal title</h1>
        </template>
        <!-- Modal Body -->
        <p>Woo-hoo, you're reading this text in a modal!</p>
        <!-- Modal Footer -->
        <template #footer>
            <BButton variant="secondary" @click="isModalVisible = false">Close</BButton>
            <BButton variant="primary" @click="confirmModal">Save changes</BButton>
        </template>
    </BModal>
</template>
<script>
export default {
  setup() {
    const isModalVisible = ref(false);
    const showModal = () => {
      isModalVisible.value = true;
    };
    const confirmModal = () => {
      // Perform any confirmation action here
      isModalVisible.value = false;
    };
    return {
      isModalVisible,
      showModal,
      confirmModal,
    };
  },
};
</script>
<div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</div>
Optional sizes

You can specify a Bootstrap large or small modal by using the size prop.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Props
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
	Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Woohoo, you're reading this text in a modal!</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
<template>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</template>
<template>
    <BButton variant="primary" @click="showModal">Launch Demo Modal</BButton>
    <BModal v-model="isModalVisible">
        <!-- Modal Title -->
        <template #title>
            <h1 class="fs-5">Modal title</h1>
        </template>
        <!-- Modal Body -->
        <p>Woo-hoo, you're reading this text in a modal!</p>
        <!-- Modal Footer -->
        <template #footer>
            <BButton variant="secondary" @click="isModalVisible = false">Close</BButton>
            <BButton variant="primary" @click="confirmModal">Save changes</BButton>
        </template>
    </BModal>
</template>
<script>
export default {
  setup() {
    const isModalVisible = ref(false);
    const showModal = () => {
      isModalVisible.value = true;
    };
    const confirmModal = () => {
      // Perform any confirmation action here
      isModalVisible.value = false;
    };
    return {
      isModalVisible,
      showModal,
      confirmModal,
    };
  },
};
</script>
<div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</div>
Modal with elements

Place a popover, a tooltip, forms, an editor or even a carousel within modals as needed.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
	Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>Woohoo, you're reading this text in a modal!</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
import React from 'react';
import { Button, Modal } from 'react-bootstrap';
const LiveDemo = () => {
  const [show, setShow] = useState(false)
  return (
    <Modal.Dialog>
        <Button variant="primary" onClick={() => setShow(true)}>
            Launch demo modal
        </Button>
        <Modal show={show} onHide={() => setShow(false)}>
            <Modal.Header closeButton>
                <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={() => setShow(false)}>
                    Close
                </Button>
                <Button variant="primary" onClick={() => setShow(false)}>
                    Save Changes
                </Button>
            </Modal.Footer>
        </Modal>
    </Modal.Dialog>
  );
}
export default LiveDemo;
<template>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</template>
<template>
    <BButton variant="primary" @click="showModal">Launch Demo Modal</BButton>
    <BModal v-model="isModalVisible">
        <!-- Modal Title -->
        <template #title>
            <h1 class="fs-5">Modal title</h1>
        </template>
        <!-- Modal Body -->
        <p>Woo-hoo, you're reading this text in a modal!</p>
        <!-- Modal Footer -->
        <template #footer>
            <BButton variant="secondary" @click="isModalVisible = false">Close</BButton>
            <BButton variant="primary" @click="confirmModal">Save changes</BButton>
        </template>
    </BModal>
</template>
<script>
export default {
  setup() {
    const isModalVisible = ref(false);
    const showModal = () => {
      isModalVisible.value = true;
    };
    const confirmModal = () => {
      // Perform any confirmation action here
      isModalVisible.value = false;
    };
    return {
      isModalVisible,
      showModal,
      confirmModal,
    };
  },
};
</script>
<div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
    </div>
</div>
Jump to