HumbleApprentice Posted August 26, 2017 Share Posted August 26, 2017 I am working on a landing page that has two horizontal columns in bootstrap. Everything works well except that I cannot vertically align the "COMING SOON" text in the top box without separating the 2 boxes and leaving a gutter between them. I would like to vertically center the text in the top column. Any help will be highly appreciated. Below is the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style> body{ background-color : #222 !important; /*background-color : #ECECEA; !important*/ } .container{ background-color: white; height:210px; } .row h1{ color: #FF530D; font-size: 3em; font:bold; } .container p{ color: black; font-size: 1.5em; } .jumbotron{ background-color : #222 !important ; } .jumbotron p { color: #A9A9A9; !important; } .jumbotron h1{ color: #FF530D !important ;<!--Thank you Jesus--> } } //vertical-align-self-center; </style> </head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="jumbotron text-center"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> <div class="container text-align center;"> <div class="row align-self-center"> <section="col-sm-12-col-sm-offset-0 "> <SPAN STYLE="color: #FF530D; font-size: 3em;"><center>Coming Soon!</center></SPAN><!--I am trying to vertically aligh coming soon--> </section> <div class="col-sm-12-col-sm-offset-0" style="background-color:#558c89;height:310px; margin-top: 130px; margin-bottom: 130px;"><!--to center a div in bootstrap use this formula 12-n/2 where n is the number in the column--> <!--next put another div inside a div to hold the form and its button--> <div class ="section-center2"> <h2 style="padding-top:65px; margin-bottom:20px;color: black;"><center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo. <center/></h2> <h3 style="margin-top:65px;"><center><mark>Be the first to know when we launch! Sign up below:<mark/><center/></h3> </div> <center> <form class="form-inline"> `<div class="form-group"> ` <label for="email">Email address:</label> ` <input type="email" class="form-control" id="email"> <button type="submit" class="btn btn-default">Submit</button> ` </div> </center></form> </div> </div> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 27, 2017 Share Posted August 27, 2017 It would help if the code supplied was not such a mess, attempting to provide a solution in its current state would be hindered. validate at https://validator.w3.org/ before posting. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now