Skip to content

Instantly share code, notes, and snippets.

@julianxhokaxhiu

julianxhokaxhiu/_bs3_same-height-cols.scss

Created September 15, 2014 13:50
Show Gist options
  • Save julianxhokaxhiu/ddbb876734f90a58defa to your computer and use it in GitHub Desktop.
Save julianxhokaxhiu/ddbb876734f90a58defa to your computer and use it in GitHub Desktop.
Download ZIP
Vertical alignment on Bootstrap 3 columns with equal height
Raw
_bs3_same-height-cols.scss
// Source by http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
// columns of same height styles
.container-xs-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-xs-height {
display:table-row;
}
.col-xs-height {
display:table-cell;
float:none;
}
@media (min-width: 768px) {
.container-sm-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-sm-height {
display:table-row;
}
.col-sm-height {
display:table-cell;
float:none;
}
}
@media (min-width: 992px) {
.container-md-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-md-height {
display:table-row;
}
.col-md-height {
display:table-cell;
float:none;
}
}
@media (min-width: 1200px) {
.container-lg-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-lg-height {
display:table-row;
}
.col-lg-height {
display:table-cell;
float:none;
}
}
// vertical alignment styles
.col-top {
vertical-align:top;
}
.col-middle {
vertical-align:middle;
}
.col-bottom {
vertical-align:bottom;
}
@ursjega
Copy link

ursjega commented Mar 6, 2015

It is not working with my layout on bootstrap 3 , can you please help me to add align the items in center

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html, body {
    height: 100%;
}


/ columns of same height styles
.container-xs-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-xs-height {
display:table-row;
}
.col-xs-height {
display:table-cell;
float:none;
}
@media (min-width: 768px) {
.container-sm-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-sm-height {
display:table-row;
}
.col-sm-height {
display:table-cell;
float:none;
}
}
@media (min-width: 992px) {
.container-md-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-md-height {
display:table-row;
}
.col-md-height {
display:table-cell;
float:none;
}
}
@media (min-width: 1200px) {
.container-lg-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-lg-height {
display:table-row;
}
.col-lg-height {
display:table-cell;
float:none;
}
}

// vertical alignment styles
.col-top {
vertical-align:top;
}
.col-middle {
vertical-align:middle;
}
.col-bottom {
vertical-align:bottom;
} 
</style>
</head>
<body>

    <header>
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="<#">Home</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li id="postad"><a href="#">About Us</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li id="home"><a href="#">Login</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </nav>
    </header>
    <div class="container " style="border: 1px solid red; height: 100%;">
        <div class="row-fluid  " style="border: 1px solid blue; height: 100%;">
            <div class="col-md-offset-2 col-md-4 col-bottom ">
                <p class="lead">
                    Register now for <span class="text-success">FREE</span>
                </p>


                <p>
                    <a href="<?php echo $this->config->base_url();?>signup" class="help-block">please click here to register now !</a>
                </p>
            </div>

            <!--Right Side  -->
            <div class="col-md-offset-8 col-middle">
                <div class="well">
                    <form id="loginForm" method="POST" action="signin" novalidate="novalidate">
                        <fieldset>

                            <div class="form-group">
                                <label for="username" class="control-label">Email Id or Mobile number </label> <input type="text" class="form-control" id="username" name="username"
                                    title="Please enter you username" placeholder="example@jega.com or 1234567890">
                            </div>
                            <div class="form-group">
                                <label for="password" class="control-label">Password</label> <input type="password" class="form-control" id="password" name="password"
                                    title="Please enter your password" placeholder="Password (Min 6 charaters)"> <span class="help-block"></span>
                            </div>
                            <div class="checkbox">
                                <label> <input type="checkbox" name="remember" id="remember"> Remember login
                                </label>
                                <p class="help-block">
                                    <a href="#">Forgot Your Password ?</a>
                                </p>
                            </div>
                            <button type="submit" class="btn btn-success btn-block">Login</button>
                        </fieldset>
                    </form>
                </div>
            </div>




        </div>


    </div>
    <footer>
        <div class="navbar-fixed-bottom" style="background-color: #F5F5F5;">
            <div id="footer">
                <div class="container fixed-bottom col-md-6 col-md-offset-4">
                    <p class="muted credit">
                        <a href="#">Privacy & Terms 
                    </p>
                </div>

            </div>
        </div>
    </footer>


</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment