Editing a pop-up window button - html

Question

i'm new to css + html and i've been stuck on a simple problem. So I got a popup window from bootstrap, the code is
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Contact Us!</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us</h4>
</div>
<div class="modal-body">
<p>Contact us at _____</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm wondering how to change the padding of the button, and the color of the text.
I tried using #myModal for the css tag as shown
#myModal{
background-color: green;
padding-left:40%;
}
What am I doing wrong?

Answer 1

Or You can use inline CSS in:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Contact Us!</button>
Like:
"<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="color :orange; padding-left:30x;">Contact Us!</button>"
This will help i hope.
Thank You..

Answer 2

To change the padding and color you can do this.
Add in CSS
.btn btn-info btn-lg{
color: green;
padding-left: 30px;
}

Answer 3

You're probably trying to change the button outside of the modal so a simple .btn selector will work, so there is no need to select #myModal.
The custom stylesheet must be included after the bootstrap declaration for the properties to override;
.btn {
color:green;
padding-left: 50px;
}
Example here i've added some padding and a custom color so you can see how it works.