Currently, I am in the process of creating a new web page with Bootstrap 4. This page consists of four main elements - a header, a footer, and two content boxes contained within divs. While I have successfully utilized default bootstrap classes to ensure that the header stays at the top and the footer at the bottom of the page, I am facing difficulty in centering both content boxes vertically and horizontally on the page regardless of the screen size. The goal is for one content box to appear below the other with some spacing between them. For reference, you can view the attached picture.
I initially attempted to use the flex class provided by bootstrap, but unfortunately, it did not yield the desired outcome.https://i.sstatic.net/yfhH8.jpg