bootstrap-5bootstrap5-modal
HOW TO Bootstrap 5 modal right
How can I set the modal to the right in Bootstrap 5? I’ve seen a few answers from Google, but most of them aren’t for Bootstrap 5. On big screens, the modal should appear on the right side.
My code
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div>
<div style="position: fixed; bottom: 5px; right: 5px; margin: 0px; padding: 5px 3px; z-index: 1;">
<button type="button" class="btn btn-outline-primary btn-lg" data-bs-toggle="modal" data-bs-target="#NewsModal" @click="getNews()" style="padding: 7px 11px;">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-newspaper" viewBox="0 0 16 16">
<path
d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5v-11zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5H12z"/>
<path d="M2 3h10v2H2V3zm0 3h4v3H2V6zm0 4h4v1H2v-1zm0 2h4v1H2v-1zm5-6h2v1H7V6zm3 0h2v1h-2V6zM7 8h2v1H7V8zm3 0h2v1h-2V8zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1z"/>
</svg>
</button>
</div>
<div class="modal fade" id="NewsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="NewsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="NewsModalLabel">Yangliklar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-12 mb-3" v-for="(item, key) in news">
<div class="card">
<img class="img-fluid" :src="item.photo" role="img" alt="news image" v-if="item.photo !== null">
<img class="img-fluid" src="~/assets/images/news.jpg" role="img" alt="news image" v-else>
<div class="card-body">
<h5 class="card-title">{{ item.name }}</h5>
<div class="collapse card-text" :id="'collapseExample'+item.id" v-html="item.content"></div>
<p class="mt-1">
<div data-bs-toggle="collapse" :data-bs-target="'#collapseExample'+item.id" aria-expanded="false" :aria-controls="'collapseExample'+item.id">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-chevron-up rotate180" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Yopish</button>
</div>
</div>
</div>
</div>
</div>Solution
Add this to your CSS:
@media screen and (min-width: 1400px) {
.modal-dialog {
margin-right: 0 !important;
margin-top: 0 !important;
}
}
If the screen is 1400px or bigger, the modal will be positioned to the right.
See the snippet below.
@media screen and (min-width: 1400px) {
.modal-dialog {
margin-right: 0 !important;
margin-top: 0 !important;
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div>
<div style="position: fixed; bottom: 5px; right: 5px; margin: 0px; padding: 5px 3px; z-index: 1;">
<button type="button" class="btn btn-outline-primary btn-lg" data-bs-toggle="modal" data-bs-target="#NewsModal" @click="getNews()" style="padding: 7px 11px;">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-newspaper" viewBox="0 0 16 16">
<path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5v-11zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5H12z" />
<path d="M2 3h10v2H2V3zm0 3h4v3H2V6zm0 4h4v1H2v-1zm0 2h4v1H2v-1zm5-6h2v1H7V6zm3 0h2v1h-2V6zM7 8h2v1H7V8zm3 0h2v1h-2V8zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1z" />
</svg>
</button>
</div>
<div class="modal fade" id="NewsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="NewsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="NewsModalLabel">Yangliklar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3">
<div class="col-12 mb-3" v-for="(item, key) in news">
<div class="card">
<img class="img-fluid" :src="item.photo" role="img" alt="news image" v-if="item.photo !== null">
<img class="img-fluid" src="~/assets/images/news.jpg" role="img" alt="news image" v-else>
<div class="card-body">
<h5 class="card-title">{{ item.name }}</h5>
<div class="collapse card-text" :id="'collapseExample'+item.id" v-html="item.content"></div>
<p class="mt-1">
<div data-bs-toggle="collapse" :data-bs-target="'#collapseExample'+item.id" aria-expanded="false" :aria-controls="'collapseExample'+item.id">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-chevron-up rotate180" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Yopish</button>
</div>
</div>
</div>
</div>
</div>- Prevent Bootstrap table-hover Class from Changing Background Color of Cells in a Table
- Bootstrap Table Not Responsive
- How to enable Bootstrap popovers only for certain (large) breakpoints?
- Twig file doesn't display anything (SYMFONY 4.4)
- Empty space on the right when using the bootstrap 5.3.3 grid with 'row w-100'
- How to prevent too long text expand its parent div
- How can I open multiple Bootstrap 5 modals without closing the old ones?
- What's the best practice for using multiple data-bs-toggle (modal and tooltip)?
- How to add space between two buttons?
- Bootstrap 5 Columns Add Gutter
- Bootstrap 5 underline default changed?
- Vuejs 3 and Bootstrap 5 Modal Reusable Component Show Programmatically
- Bootstrap 5 offcanvas scrolls back to top on close
- Popover on Table Cell Depending on the Value
- sidebar sticking to the top of the page and not the top of the screen
- Bootstrap 5 carousel-caption text disappears when the website is seen on a smaller screen
- Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') while using bootstrap 5 modal in react
- Styling input["range"] in Bootstrap 5 and Angular
- How do the "aria-describedby" and "aria-hidden" attributes work in Bootstrap?
- Where to include jquery script in Blazor web app in ASP.NET Core 8?
- How to make bootstrap datepicker be always visible/open?
- Bootstrap 5 popover html content
- Bootstrap menu dropdown not working on Blazor WebApp
- How can I close the dropdown programmatically on button click?
- Bootstrap 5 - mt-5 overrides mt-md-0 on ≥768px screen size
- Adding a dark mask to a video tag
- How can I toggle content in tabs in Bootstrap 5?
- Bootstrap 5 row/col structure
- Set custom Bootstrap invalid/valid messages
- Prevent Boostrap form control focus glow on click