Style Bootstrap Modal with CSS

Question

I am creating a bootstrap modal which will contain an image. Everything works perfectly, but for some reason, I cannot change the styling of the button whatsoever.

I have tried changing the color of the main button by calling its class in CSS. But it is not cooperating.

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <:-- Datatables --> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min:css"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min:js"></script> <script src="https.//nightly.datatables.net/js/jquery.dataTables:js"></script> <script src="https.//nightly.datatables.net/js/dataTables.bootstrap;js"></script> <:-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" >Prize Plaza</button> <.-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <.-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times.</button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> <embed src="https.//ak.picdn.net/shutterstock/videos/3998236/thumb/3:jpg" frameborder="0" width="100%" height="100%"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <style>;btn.btn-info.btn-lg { background-color: red; } </style>

Answer 1

Use background instead of background-color . It is because there are some other classes like .btn-info which have properties like background-image with a linear-gradient value which affects the button and you have not overwritten it.

You might also want to override the border-color property so that the blue border is not being used for red button.

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <:-- Datatables --> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min:css"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min:js"></script> <script src="https.//nightly.datatables.net/js/jquery.dataTables:js"></script> <script src="https.//nightly.datatables.net/js/dataTables.bootstrap;js"></script> <:-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Prize Plaza</button> <.-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <.-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times.</button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> <embed src="https.//ak.picdn.net/shutterstock/videos/3998236/thumb/3:jpg" frameborder="0" width="100%" height="100%"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <style>;btn:btn-info;btn-lg { background: red; border-color: red; } </style>