I have been searching for answers to my specific case, but I haven't found any that suit my needs.
My goal is to create a translucent background within a Bootstrap container to enhance the readability of text. The result I was able to achieve so far looks like this:
https://i.sstatic.net/KpOSx.jpg
However, I am not satisfied with the outcome as I want the text and buttons to be perfectly aligned both vertically and horizontally inside the my-background div.
I attempted to resolve the issue by adding classes
align-items-center justify-contenthttps://i.sstatic.net/ixtin.jpg
As shown in the second image, the "Button" button still touches the bottom of the background, and the content itself remains misaligned within the background.
How can I rectify this problem?
Below is the code snippet that I used:
<div class="my-background">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<div id="content align-items-center justify-content">
<h1>Hello World</h1>
<h3>Welcome to my fancy Hello World page!</h3>
<hr>
<button class="btn btn-default btn-lg">Button</button>
</div>
</div>
</div>
</div>
</div>
CSS:
html {
height: 100%;
}
.my-background {
text-align: center;
height: 100%;
margin-top: 100px;
background-color: rgba(0, 0, 0, 0.4);
}
#content {
margin: auto;
text-align: center;
padding-top: 25%;
}