Hey there, I managed to create two buttons aligned on opposite sides of my webpage - one on the left and one on the right. Each button, when clicked, displays an alert text on its corresponding side, similar to what you see in this picture https://i.sstatic.net/hyARN.png
The code snippet that I used is as follows :
<div class="row">
<div class="col-lg-6">
<div class="previous">
<button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button>
<span id="alert_info_1" class="alert alert-info">
Alert Info
</span>
</div>
</div>
<div class="col-lg-6 text-left">
<div class="next" >
<button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button>
<span id="alert_info_2" class="alert alert-info ">
Alert Info
</span>
</div>
</div>
</div>
In order to align the buttons properly using CSS, here's what I did:
.previous {
text-align: left;
}
.next {
text-align: right;
}
My issue now is with getting the alert info text of Button 2 to appear on the left side instead of the right, like it shows in the provided image.
I tried adding "text-left" to the button class but that didn't work.
I also experimented with adding the "pull-left" class to the span element, which did move the text to the left, but it ended up being quite far from Button 2 as shown in this image:
https://i.sstatic.net/G80cF.png
If anyone has any thoughts or suggestions on how to resolve this issue, please let me know!