Search code examples
htmlcsstwitter-bootstrapmargin

how to set mr-0 in bootstrap 4 when position absolute

For a toast i use in bootstrap, i want to use the classmr-0 to push the toast to the right side. But this does not work:

<div class="toast hide position-absolute mr-0"  data-autohide="false">
    <div class="toast-header">
         <strong class="mr-auto text-primary">Share Link</strong>         
         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body">
    <?php echo $share_link; ?>
    </div>
</div>

When i use this: style="right: 0px;" it works:

<div class="toast hide position-absolute" style="right: 0px;" data-autohide="false">
...

Can someone tell me why mr-0 does not work in this case?

Solution

  • Use position relative to use margin. margin-bottom, margin-left,margin-right won't work in absolute positioning ,