CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4bootstrap-modal
Chirag
Chirag

Reputation: 31

Background color having rounded edges

I have a modal as given below.

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title"><b>Outage Details</b></h4>
        </div>

I'm trying to change the background color of the modal header using the given CSS

.modal-header
{
    background-color : #0063C3
}

It is working fine, but the color is not filling completely up to the edges. You can see white color on the edges. Screenshot below for reference. How can we fill the modal header completely with the background color.

enter image description here

Upvotes: 0

Views: 1333

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362700

You're looking for the rounded-0 utility class to remove the rounded corners..

   <div class="modal-header rounded-0">
         <h4 class="modal-title"><b>Outage Details</b></h4>
   </div>

Demo: https://www.codeply.com/go/XHvAXID48s

Upvotes: 1

Friday Ameh
Friday Ameh

Reputation: 1684

That may be as a result of border-radius. Try removing the border-radius like so

.modal-header
{
    background-color : #0063C3;
    border-radius:0!important;
}

Upvotes: 0

Related Questions