Changing Width of a Modal

Asked

Viewed 1,048 times

2

Hello, while trying to increase the width of a modal in bootstrap 4, I tried to change the width of the modal-lg through css as I saw in the English stack overflow. However, I’ve tried the same code and I can’t get modal-lg to go from the 800px preset to a custom measure. The code used is as follows::

.modal-lg{
max-width:80% !important;
}

2 answers

1


To work you have to put the custom CSS style inside the breacking point! If you are interested here you have a reference in the official documentation, however the default size of modal-lg is 800px and not 80% wide on large screens... https://getbootstrap.com/docs/4.0/components/modal/#optional-Sizes

Look at the example in this example, notice that I had to put the rule of width of the modal within the media query correct @media (min-width: 992px) { .modal-lg {css} }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    @media (min-width: 992px) {
        .modal-lg {
            max-width: 80%;
        }
    }
</style>
</head>
<body>
    
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        ...
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    </div>
</div>
</div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

  • It helped a lot. I just changed the css to .modal-lg{ min-width:80%;} and ran straight thanks.

  • @Joãomartins good, good that solved then.

0

You can add a class modal-long where the class modal-dialog is.

.modal-long {
  width: 1080px !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Abrir modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content modal-long">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

  • I don’t know if it’s just here, but his modal isn’t centered and he kept cutting a piece that was out of the screen....

  • @hugocsl because I put 1080px to illustrate the increase in modal width.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.