My Footer Alignment

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 porti

Solution 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;
}

footerh3 {
  color: white;
  text-decoration: underline;
  text-decoration-color: white;
}

footerp {
  color: white;
  width: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
}

footerspan {
  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;
}

}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css"><footer><divclass="container"><divclass="row justify-content-around"><!-- starting of a footer--><sectionclass="address col-lg-3 col-md-12 col-sm-12"><h3>Branch Office</h3><spanclass="Name">SambaSiva Rao Muvva</span><br><spanclass="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><sectionclass="Main-address col-lg-3 col-md-12 col-sm-12"><h3>Head Office</h3><spanclass="Name">Konduru Anil Kumar</span><br><spanclass="qual">B.com., A.C.A</span><p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p></section><Sectionclass="contact-info col-lg-3 col-md-12 col-sm-12"><h3>Contact Information</h3><spanclass="ph">Ph.No:</span><spanclass="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br><spanclass="Email-ID">Email :</span><spanclass="email">casmaba.assosciates@gmail.com</span></Section></div></div><pclass="text-center copyright">Copyright @ 2017 indusfilings.com</p></footer>

Solution 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--><divclass="row"><sectionclass="address col-lg-4 col-md-12 col-sm-12"><h3>Branch Office</h3><spanclass="Name">SambaSiva Rao Muvva</span><br><spanclass="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><sectionclass="Main-address col-lg-4 col-md-12 col-sm-12"><h3>Head Office</h3><spanclass="Name">Konduru Anil Kumar</span><br><spanclass="qual">B.com., A.C.A</span><p>No 4, 2nd floor<br>
  Rangarajulu Street, Ayyavoo colony<br>
  Aminjikarai, Chennai-29</p></section><Sectionclass="contact-info col-lg-4 col-md-12 col-sm-12"><h3>Contact Information</h3><spanclass="ph">Ph.No:</span><spanclass="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br><spanclass="Email-ID">Email :</span><spanclass="email">casmaba.assosciates@gmail.com</span></Section></div><pclass="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;
}
  footerh3{
    color:white;
    text-decoration:underline;
    text-decoration-color:white;
}
.address, .Main-address, .contact-info  {
  padding-left: 35px;  
}
  footerp{
    color:white;
    width:100%;
    align-content:center;
    align-items: center;
    justify-content: center;  
}
  footerspan{
    color:white;
}
.copyright{
    bottom:0px;
    width:100%;
    height:35px;
    background-color:#111B22; 
    align-items:center;
    margin-bottom: 0%;
}