CODEWITHSUNDEEP
javascriptcssbootstrap-4
Syntax Error
Syntax Error

Reputation: 1640

Resizing bootstrap alerts and keeping the 'x' in the right place

I have the following HTML

<div class="row mt-2">
    <div class="col-lg-5">
        <div id="alertmessages"></div>
    </div>
    <div class="col-lg-7">
        <div class="btn-group-sm">
            <button type="button" id="SaveDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Save Draft</button>
            <button type="button" id="RestoreDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Restore Draft</button>
            <button type="button" id="DeleteDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Delete All Drafts</button>
        </div>
    </div>
</div>

I'm using this javascript to display alert messages when the buttons are clicked, this one is for the save draft button:

$('#alertmessages').html
        ('<div class="alert alert-success alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>Your draft has been saved</div>');

This is how the alerts display. Larger than the "small" buttons

Alert larger than buttons picture

I did try overriding the CSS but the x button then showed up too far down.

.alert {
  margin-bottom: 1px;
  height: 30px;
  line-height:30px;
  padding:0px 15px;
}

Upvotes: 1

Views: 772

Answers (1)

Girisha C
Girisha C

Reputation: 1950

Add class px-2 py-1 to both .alert and .close, please check the working example below.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">


<div class="container">
  <div class="row mt-2">
    <div class="col-lg-5">
      <div class="alert alert-success alert-dismissible fade show px-2 py-1">
        <button type="button" class="close px-2 py-1" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        Your draft has been saved
      </div>
    </div>
    <div class="col-lg-7">
      <div class="btn-group-sm">
        <button type="button" id="SaveDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Save Draft</button>
        <button type="button" id="RestoreDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Restore Draft</button>
        <button type="button" id="DeleteDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Delete All Drafts</button>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

Upvotes: 2

Related Questions