If you want different contents on different screen sizes, I will suggest taking look at bootstrap’s display property, where you can hide/show certain elements on certain resolutions.
Therefore (e.g. use sm as a breakpoint):
<!-- Shows on xs and sm -->
<div class="d-block d-sm-none">
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
Things inside your modal
</div>
</div>
</div>
</div>
<!-- Shows on screens larger than sm -->
<div class="d-none d-sm-block">
Stuff whichever things that you want to include
</div>
I’d like to avoid duplicating the content and code.
Hence this part, it is possible to include one template into another, and please check out other questions that are likely to provide help for reducing your code.
Please do comment below if you have other questions.
I’ve been searching the internet on this, but unfortunately, I am not able to find anything and hope you may be able to help me with this.
I am using modals to display details on my page, but on mobile devices, would like to display the content itself, instead of as modals and I’d like to avoid duplicating the content and code.
Is there any setting or method, that would allow this kind of different handling?
Sorry, this may be quite a simple question, but due to the modal issues on mobile devices, it seems near impossible to find anything relating to the subject.
I am using absolutely standard Bootstrap Modal settings.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
Essentially, I want to display everything with the div modal-content as a normal div column on small devices.
Would greatly appreciate your help here.
Many thanks and best regards,
Simon
Hi cpy, Thank you for looking at this. The issue I face, is that I want to display the content from the modal on smaller divices directly, so it should be displayed there, but not as a modal. I am however not certain if modals actually allow this. I have the modal triggers as cards in a carousel. It looks good on large screens, but on smaller displays, I take out the carousel altogether and would prefer to have the modal content show directly if possible. Especially needed for the print version. Are modals able to do this by default at all? Thank you for your help here, Simon
