Bootstrap modal-header Login change bottom line color

Question

I am using Bootstrap login template and I want to change the bottom line color of model-header and align this line on left and right border.

<div id="login-ar" class="container" aria-hidden="true">
    <div class="modal-header">
        <h1 class="text-center" id="login-tit">Login</h1>
    </div>
    <div class="modal-body">
        <form role="form">
            <div class="form-group">
                <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            </div>
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
        </form>
    </div>
    <div class="modal-footer">
         <button class="btn btn-link">Forgot password?</button>
         <button class="btn btnExtra btn-large btn-primary">Login</button>
    </div>
</div>

Answer 1

ninjaxelite, both classes modal-footer and modal-header use
border-top: 1px solid #e5e5e5; for the footer and border-bottom: 1px solid #e5e5e5; for the header.
You could override these by adding the two classes below the Bootstrap css.
Both the header and footer are full width. and therefore wider than your inner content.
You could remove these border lines and add a color background to the header and footer as a way to change how this looks.
Or if you still want these lines hide the border top and bottom lines and add <hr class="yourcolor"> into your content.
That may be a way to do what you want here.

Here are the Bootstrap classes for you to use to override the main Bootstrap css.

 .modal-header {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  }

.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

If you wanted to just change the modal-header color and width border-bottom you would need to use this...
I color the header background aqua just to show the header overall width.

.modal-header {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 3px solid #ff0000;
  margin-left: 15px;
  margin-right: 15px;  
  background-color: aqua;
}

But it would look like this...