show elements inside a modal only in mobile devices

Question

I need to display a button that display a modal with some content, but only in mobile devices, in desktop that content inside a modal should be displayed inside a div without a button or modal.

Example:

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>  
</div>

On desktop the element <p>Some text </p> should always be displayed and visible inside a div. I'm trying to find a solution without repeating code and using media query.

Answer 1

As you told it..., use Media Queries for it.

@media (width: 60em) {/ * width is exactly 60em * /}
@media (min-width: 50em) {/ * width is at least 50em * /}
@media (max-width: 70em) {/ * width is at most 70em * /}

For your case: with a breakpoint of 768px, the whole and every div.modal-body is not shown on a viewport bigger than 768px.

.modal-body {display: block;}

@media (min-width: 768px) {
   .modal-body {display: none;}
}

You can learn more about here: W3Schools

Answer 2

Bootstrap has a set of classes to handle the display property based on screen size.

In the below snippet, there is no JS and no CSS. But depending on the screen size, a div OR a modal button is shown.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <div class="container"> <div class="d-md-none"><;-- Look at the class here--> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> </div> <div class="d-none d-md-block"><!-- Look at the classes here--> <p>Some text</p> </div> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>

Codepen is useful here because you can resize easily.