javascript - How to add container and image in modal bootstrap

I would like to make a modal that has a container and an image inside .modal-body.

Code:

<div class="add-data">
    <a href="" data-toggle="modal" data-target="#largeModal">
        <img class="img-responsive" src="" alt="">
        <h4 class="bold">lipsum</h4>
    </a>
</div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h3 class="modal-title uppercase capital bold " id="myModalLabel">portfolio</h3>
            </div>
            <div class="modal-body">
                <div class="container">
                  <img src="" alt="">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

.img{width:100%;}

And the result of my code is the image fully (i mean take the whole modal-body).

If i'm not include the container then image will be on the left.

Question : How can i make a modal that have a container and image(in middle) inside modal-body?

I would like to make a modal that has a container and an image inside .modal-body.

Code:

<div class="add-data">
    <a href="" data-toggle="modal" data-target="#largeModal">
        <img class="img-responsive" src="http://placehold.it/260x340" alt="">
        <h4 class="bold">lipsum</h4>
    </a>
</div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h3 class="modal-title uppercase capital bold " id="myModalLabel">portfolio</h3>
            </div>
            <div class="modal-body">
                <div class="container">
                  <img src="http://placehold.it/260x340" alt="">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

.img{width:100%;}

And the result of my code is the image fully (i mean take the whole modal-body).

If i'm not include the container then image will be on the left.

Question : How can i make a modal that have a container and image(in middle) inside modal-body?

Share Improve this question edited Feb 9, 2016 at 18:42 Zakaria Acharki 67.5k15 gold badges78 silver badges106 bronze badges asked Feb 9, 2016 at 18:30 vandi 671 gold badge1 silver badge11 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

This shall get the job done.

The html code:

<img class="img-responsive" src="http://placehold.it/260x340" alt="">

The css code:

.img-responsive{
    margin:0 auto;
}

Bootstrap modal has a default width of 600px. You can add custom css or load a wider image. "Container" is not required if your image width is close to 600px. You can add "margin:0 auto;" to center align smaller img. Check this example.

<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="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis./ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>My Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Launch 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>
          </div>
        <div class="modal-body">
         
            <img class="img-responsive" style="margin:0 auto;" src="http://placehold.it/260x340" alt="">
                   
        </div>
        
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Try to use bootstrap Grid system Offsetting columns :

<div class="modal-body">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <img src="http://placehold.it/260x340" alt="">
        </div>
    </div>
</div>

Hope this helps.

You can use container-fluid to take up 100% of the modal-body width and then center your image with center-block but it won't take up the full width of the modal becuase your image is only 260px wide.

http://www.codeply./go/2H5kFMkqGo

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to add container and image in modal bootstrap - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)