Vertical and Horizontal Alignment in fullscreen with bootstrap 3

Question

I'm beginner in this world, and have some tricks I still need to learn, I'm playing in this design and the most thing I've been crushed is the align. I'm trying to make this align vertically and horizontally in a full screen style. I've tried some different things but it always break in some point.

I'm using latest Bootstrap.

The base is the following one: https://i.stack.imgur.com/RUL9K.png

Thanks for your time.

[How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Josh Crozier, Feb 11 '15 at 04:08
put the code what you have tried.. usually you can control horizontal alignment by `
.....
`, which will occupy 4/12th space in big screen and full(12/12) in small screen — suhailvs, Feb 11 '15 at 04:19

score 1 · Answer 1 · answered Feb 11 '15 at 06:18

You can try it by this code below:

<!DOCTYPE html>
<html>
<head>
    <title>Centering</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
    jQuery(document).ready(function(){
        window_height=jQuery(window).height();
        my_div_height=jQuery(".col-centered").height();
        center_value=(window_height-my_div_height)/2;

        jQuery(".col-centered").css('margin-top',center_value);
    });

    // script for responsive;
    jQuery(window).resize(function(){
        window_height=jQuery(window).height();
        my_div_height=jQuery(".col-centered").height();
        center_value=(window_height-my_div_height)/2;

        jQuery(".col-centered").css('margin-top',center_value);
    });
</script>

<style type="text/css">  
    .col-centered {
        margin:auto;
        float: none; 
        text-align:center;
    }
</style>
</head>

<body>

    <section class="custom_name">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-10 col-centered">
                    fsadfljsd
                </div>
            </div>
        </div>
    </section>

</body>
</html>

score 0 · Answer 2 · answered Feb 11 '15 at 04:28

you can control horizontal alignment by creating a div class="row" then put need space divs with class col-md-*

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-8">col-md-8.. This will occupy 8/12th space. but will occupy full width in small screens.</div>
  <div class="col-md-4">You can also add more colomuns. this one is 4/12th space.</div>
</div>
<hr>
<div class="row">

  <div class="col-md-4 col-md-offset-3">if you add some offset to beginning you can use .col-md-offset-*. here there will be 3/12th space offset. again in small screen it will be full width</div>
</div>

Vertical and Horizontal Alignment in fullscreen with bootstrap 3

2 Answers2