Jump to content

Bootstrap Vertical alignment


HumbleApprentice

Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...