Here is my cms page code,
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="https://mdbootstrap.com/legacy/4.3.2/assets/compiled.min.css" rel="stylesheet" id="bootstrap-css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet" id="bootstrap-css"> <title>Social Media </title> </head> <body> <div class="container"> <div class="list-group-item list-group-item-success"><h1>Abc</h1></div> <div class="row jumbotron style="padding-left: 5px;""> <div class="col" > <a type="button" href="https://www.facebook.com/abc/" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</a> </div> <div class="col"> <a type="button" href="https://twitter.com/abc" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</a> </div> <div class="col"> <a href="https://www.instagram.com/abc/" type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</a> </div> <div class="col"> <a href="https://www.pinterest.com/abc/" type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</a> </div> <div class="col"> <a href="https://www.youtube.com/channel/abc" type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</a> </div> <!-- <div class="col"> <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Blog</button> </div> --> </div> <div class="list-group-item list-group-item-success"><h1>abc</h1></div> <div class="row jumbotron style="padding-left: 5px;""> <div class="col" > <a type="button" href="https://www.facebook.com/abc/" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</a> </div> <div class="col"> <a type="button" href="https://twitter.com/abc" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</a> </div> <div class="col"> <a href="https://www.instagram.com/abc/" type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</a> </div> <div class="col"> <a href="https://www.pinterest.com/abc/" type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</a> </div> <div class="col"> <a href="https://www.youtube.com/channel/abc" type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</a> </div> <!-- <div class="col"> <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Blog</button> </div> --> </div> <div class="list-group-item list-group-item-success"><h1>abc</h1></div> <div class="row jumbotron style="padding-left: 5px;""> <div class="col" > <a type="button" href="https://www.facebook.com/abc" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</a> </div> <div class="col"> <a type="button" href="https://twitter.com/abc" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</a> </div> <div class="col"> <a href="https://www.instagram.com/abc/" type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</a> </div> <div class="col"> <a href="https://www.pinterest.com/abc/" type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</a> </div> <div class="col"> <a href="https://www.youtube.com/channel/abc" type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</a> </div> <!-- <div class="col"> <button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Blog</button> </div> --> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> The code working good, but page header looks like unalignment.
