My footer Alignment - html

Question

I am trying to make footer to the center when it reaches the lg break point, the three columns should be seen as one column in 3 rows, and i want to achieve it at the center portion of the page.
But if you see in the codepen link below the second one isn't aligning bottom to the first one.
https://codepen.io/Sunny143/pen/VybbGX?editors=1100
footer {
margin-left: 0;
margin-right: 0;
background-color: #305C7A;
position: absolute;
bottom: 0px;
width: 100%;
height: auto;
}
footer h3 {
color: white;
text-decoration: underline;
text-decoration-color: white;
}
footer p {
color: white;
width: 100%;
align-content: center;
align-items: center;
justify-content: center;
}
footer span {
color: white;
}
.address {
float: left;
padding: 35px;
padding-bottom: 50px;
width: 30%;
margin-left: 4%;
margin-right: 4%;
}
.Main-address {
float: left;
width: 30%;
padding: 35px;
text-align: left;
margin-left: 4%;
margin-right: 4%;
}
.contact-info {
float: left;
position: relative;
padding-bottom: 50px;
padding: 35px;
width: 30%;
text-align: left;
margin-left: 4%;
margin-right: 4%;
margin-bottom: 35px;
}
.copyright {
position: absolute;
bottom: 0px;
width: 100%;
height: 35px;
background-color: #111B22;
align-items: center;
margin-bottom: 0%;
}
<footer>
<!-- starting of a footer-->
<section class="address col-lg-3 col-md-12 col-sm-12">
<h3>Branch Office</h3>
<span class="Name">SambaSiva Rao Muvva</span><br>
<span class="qual">B.com., A.C.A</span>
<p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
</section>
<section class="Main-address col-lg-3 col-md-12 col-sm-12">
<h3>Head Office</h3>
<span class="Name">Konduru Anil Kumar</span><br>
<span class="qual">B.com., A.C.A</span>
<p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
</section>
<Section class="contact-info col-lg-3 col-md-12 col-sm-12">
<h3>Contact Information</h3>
<span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>[phone]<br>[phone]</span><br>
<span class="Email-ID">Email :</span><span class="email">casmaba.assosciates#gmail.com</span>
</Section>
<p class="text-center copyright">Copyright # 2017 indusfilings.com</p>
</footer>

Answer 1

None of the block are centered because the 3 are floating and you are simply facing floating issue as the first one is pushing the third one to be under the second one like you can read in this question: Floated elements of variable height push siblings down
Instead you need to simply remove float and correctly use the bootstrap classes (container/row) and your div will behave correctly. Then you may add text-align:center when reaching the breakpoint of lg:
footer {
margin-left: 0;
margin-right: 0;
background-color: #305C7A;
position: absolute;
bottom: 0px;
width: 100%;
height: auto;
}
footer h3 {
color: white;
text-decoration: underline;
text-decoration-color: white;
}
footer p {
color: white;
width: 100%;
align-content: center;
align-items: center;
justify-content: center;
}
footer span {
color: white;
}
.address,.contact-info,.Main-address {
padding: 35px;
}
.copyright {
width: 100%;
height: 35px;
background-color: #111B22;
align-items: center;
margin-bottom:0;
}
#media all and (max-width:991px) {
.address,.contact-info,.Main-address {
text-align:center;
}
}
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<footer>
<div class="container">
<div class="row justify-content-around">
<!-- starting of a footer-->
<section class="address col-lg-3 col-md-12 col-sm-12">
<h3>Branch Office</h3>
<span class="Name">SambaSiva Rao Muvva</span><br>
<span class="qual">B.com., A.C.A</span>
<p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
</section>
<section class="Main-address col-lg-3 col-md-12 col-sm-12">
<h3>Head Office</h3>
<span class="Name">Konduru Anil Kumar</span><br>
<span class="qual">B.com., A.C.A</span>
<p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
</section>
<Section class="contact-info col-lg-3 col-md-12 col-sm-12">
<h3>Contact Information</h3>
<span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>[phone]<br>[phone]</span><br>
<span class="Email-ID">Email :</span><span class="email">casmaba.assosciates#gmail.com</span>
</Section>
</div>
</div>
<p class="text-center copyright">Copyright # 2017 indusfilings.com</p>
</footer>

Answer 2

1) Avoid using custom layout CSS on top of bootstrap this will defeat the purpose of using responsive library.
Example:
position:absolute;
float:left;
width:30%;
2) Follow the guidelines provided on the bootstrap page for proper implementation of components. In this case you are missing a "row" block
link -> Grid system Bootstrap
Solution for the above problem can be found on the below link
https://codepen.io/YasirKamdar/pen/ypbXVg
HTML
<footer>
<!-- starting of a footer-->
<div class="row">
<section class="address col-lg-4 col-md-12 col-sm-12">
<h3>Branch Office</h3>
<span class="Name">SambaSiva Rao Muvva</span><br>
<span class="qual">B.com., A.C.A</span>
<p>23-5-93, Besides Bank of India<br>
Naidupet 1st lane<br>
Koritepadu, Guntur-7</p>
</section>
<section class="Main-address col-lg-4 col-md-12 col-sm-12">
<h3>Head Office</h3>
<span class="Name">Konduru Anil Kumar</span><br>
<span class="qual">B.com., A.C.A</span>
<p>No 4, 2nd floor<br>
Rangarajulu Street, Ayyavoo colony<br>
Aminjikarai, Chennai-29</p>
</section>
<Section class="contact-info col-lg-4 col-md-12 col-sm-12">
<h3>Contact Information</h3>
<span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>[phone]<br>[phone]</span><br>
<span class="Email-ID">Email :</span><span class="email">casmaba.assosciates#gmail.com</span>
</Section>
</div>
<p class="text-center copyright">Copyright # 2017 indusfilings.com</p>
</footer>
CSS
footer{
margin-left:0;
margin-right:0;
background-color:#305C7A;
bottom:0px;
width:100%;
height:auto;
}
footer h3{
color:white;
text-decoration:underline;
text-decoration-color:white;
}
.address, .Main-address, .contact-info {
padding-left: 35px;
}
footer p{
color:white;
width:100%;
align-content:center;
align-items: center;
justify-content: center;
}
footer span{
color:white;
}
.copyright{
bottom:0px;
width:100%;
height:35px;
background-color:#111B22;
align-items:center;
margin-bottom: 0%;
}