'close' button of success alert, better to be aligned at the right
See original GitHub issueDescribe 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 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....
Read more >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...
Read more >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...
Read more >[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 ...
Read more >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:...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
It would also be better if the success message be on the extreme left of the page. Like this: