javascripthtmlcsstwitter-bootstrapmaterialize

Bootstrap Modal at Bottom Sheet


For my last project I use Material Design for the website right now I switch to Bootstrap. Right now I'm looking for a way on how to create the bootstrap modal display actions to the user on the bottom of a screen. They still act the same as regular modals. I am looking for a modal that act like the Bottom Sheet Modal of materializecss. Is this possible for a bootstrap to do it? Or there are existing way to do it?


Solution

  • Yes, it is, but you need to change the modal css a little bit:

    Note: the only change you need to do is adding style to the element class="modal-dialog"

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      </head>
      <body>
    
      <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" style="position:absolute;bottom:0;margin:0;width:100%;">
    
            <!-- 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 in the modal.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
    
          </div>
        </div>
    
      </div>
    
      </body>
    </html>

    Example from: https://www.w3schools.com/bootstrap/bootstrap_modal.asp