How to remove any spacing from bootstrap toast message?

Question

I'm trying to show a bootstrap alert message as an overlay toast (so it auto hides, and is shown above other elements).

Problem: I have a spacing at the bottom of the toast, and cannot get rid of it: https://jsfiddle.net/dertqczw/

<div data-delay="30000" id="myToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute; top:50px; left:50px;">
  <div class="toast-body">
     <div class="alert fade show alert-primary" role="alert">Success</div>
  </div>
</div>

//show toast with:
$("#myToast").toast('show');
 
/* get rid of toast styles */
.toast-body {
    padding: 0;
    font-size: 1rem;
}
.toast {
    border: none;
    background-color: inherit;
}

0stone0 · Accepted Answer · 2020-11-18T14:09:47.807

1

Reset the margin on the .alert-primary

.alert-primary {
    margin: 0;
}

Fiddle

If you wish to remove the margin for all the alerts, target the .alert class;

.alert {
    margin: 0;
}

Fiddle

To only target .alert inside an toast; target all the child elements;

.toast-body .alert {
    margin: 0;
}

Fiddle

edited Nov 18 '20 at 14:09

answered Nov 18 '20 at 14:03

0stone0

34,288
4
39
64

How could I remove the margin for just any alert type? – membersound Nov 18 '20 at 14:05
1

use the `.alert` class if you wish to target ALL alerts – 0stone0 Nov 18 '20 at 14:06
Great, and if I'd only want to target alerts *inside* just any toasts? – membersound Nov 18 '20 at 14:08
1

Please check the edit. However, this should be included in the OP since it's a different question. – 0stone0 Nov 18 '20 at 14:10

Mythos · Answer 2 · 2020-11-18T14:30:23.640

1

Add this to your css:

#myToast .alert {
    margin-bottom: 0;
}

Or a more general solution:

.alert {
    margin-bottom: 0;
}

EDIT:

For only toast alerts:

.toast-body .alert {
    margin-bottom:0;
}

Compared to the other answer, this one is just slightly better due to the specificity of setting 'margin-bottom', which is what the OP wanted, instead of 'margin'.

edited Nov 18 '20 at 14:30

answered Nov 18 '20 at 14:06

Mythos

1,378
1
8
21

That's nice. Can I restrict the css on alerts only **inside** toasts (independent of a `#myToast` id? – membersound Nov 18 '20 at 14:07

How to remove any spacing from bootstrap toast message?

2 Answers2