Jump to content
HumbleApprentice

Bootstrap Vertical alignment

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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...