Customizing Bootstrap modal by targetting its class - css

Question

I'm trying to customize Bootstrap's modal by adding another class and targeting another div class inside it. However, I have no idea why any styles aren't applied.
<div id="myModal1" class="modal custom-modal fade">
<div class="modal-content text-center">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<img src="img/proj1.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div><!-- /.modal -->
CSS
.custom-modal .modal-content {
padding:20px 0;
}
Any idea? Any help would be appreciated!

Answer 1

This is how you define a modal, style it and fire it:
$(document).ready(function() {
$('#myModal').modal();
});
.modal-body {
padding: 70px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.css" />
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut erat diam. Aenean tempus diam facilisis, sollicitudin augue quis, ultricies nibh. Maecenas molestie augue eu risus vulputate luctus. In vestibulum ac nibh quis accumsan. Praesent fermentum risus id sodales sagittis. Mauris non neque porttitor, congue tortor nec, tincidunt sapien. Suspendisse vel condimentum ligula. Praesent at semper risus. Fusce vel ex in eros tempus porttitor nec in nisi. Vestibulum vel justo eget odio fermentum maximus vel ut nisi. Nam consectetur vehicula nisi, ut pellentesque leo pharetra in. Vestibulum nunc lectus, vulputate a odio tempus, euismod dictum dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam interdum lacinia urna at convallis. Quisque in metus id turpis mattis pretium.
</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>
Please note: using !important might not be necessary, try without.