CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Shrey
Shrey

Reputation: 156

How to move the 'x' symbol up on an alert message

I am trying to move the alert message's dismiss button up by a little.

I have tried adding a ID in the tag. 

#alertmsg {
  margin-top: 5px;
  font-family: Segoe UI;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <div id="alertmsg" class="alert alert-warning alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria- label="close">&times;</a> Incorrect username or password.
  </div>
</div>

The expected result is to see the dismiss button move up, but instead it stays in the same place

Upvotes: 0

Views: 202

Answers (1)

kess
kess

Reputation: 1309

  • First of all you used the wrong selector for selecting the close button
  • Second: margin-top moves down the element
  • If you look in the devtools you can see that by adjusting the padding-top you can move it upwards

Note: The first two points were also noted by arieljuod

#alertmsg .close {
  padding-top: 9px;
  font-family: Segoe UI;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <div id="alertmsg" class="alert alert-warning alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria- label="close">&times;</a> Incorrect username or password.
  </div>
</div>

Upvotes: 2

Related Questions