Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'close' button of success alert, better to be aligned at the right

See original GitHub issue

Describe the Issue

https://www.freecodecamp.org/learn the close button on the alert located at some distance from the right side

Affected Page

https://www.freecodecamp.org/learn

Steps to Reproduce

Go to ‘learn’
After loggin in you will see alert notification at the top
the close button on the alert located at some distance from the right side

Expected behavior

i think it is better for close button to be located at the right

Screenshots

current

better design

System

Device: [Laptop]
OS: [ Windows 10]
Browser: [Chrome]
Version: [e.g. 22]

Additional context

No response

Issue Analytics

State:
Created a year ago
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

ahmadabdolsahebcommented, Sep 23, 2022

I see your point here. We are intentionally trying to keep the close button close its related content so the users eyes does not have to travel across the viewport to close the flash message.

Ideally we could make the message and the close button stay within a similar container that footer stays on, but for now I think it is a non-issue.

2reactions

divyanshraj0408commented, Sep 23, 2022

It would also be better if the success message be on the extreme left of the page. Like this: Screenshot from 2022-09-23 14-17-21

Top Results From Across the Web

Bootstrap 4 alert box close button not aligned - Stack Overflow

I tried using the <div clas="alert..." style="top: -4px;"> and it kind of worked but I was wondering if there is a better approach....

Alerts · Bootstrap v5.0

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight...

Bootstrap 5 Warning, Info, Success and Error Alerts

Learn how to use Bootstrap alert component to create alert messages like success, warning, info and error to show important and critical information...

[Best solution]-Bootstrap 4 alert box close button not aligned

Best coding solution for query Bootstrap 4 alert box close button not aligned. ... <div class="alert alert-success fade show d-flex justify-content-center ...

How to align button to right side of text box in Bootstrap?

As we want to align the button to the right side of the text box, we have to use the float-right class. Syntax:...