Twitter Bootstrap Question posted in

Twitter bootstrap – Center container div horizontally and vertically

Currently I’m working on a website which contains four rows. I’d like to center the container horizontally and vertically where horizontally centering is already done.

Can anyone help me, please? I already tried with “display: flex” but it still doesn’t work.

I’m working with Twitter Bootstrap and Font Awesome.

https://jsfiddle.net/L9dbzgpr/

Code:

<div class="container text-center">
    <div class="row">
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-desktop"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-music"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cloud"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cog"></i></a>

        </div>
    </div>
    <div class="row margin-top">
        <div class="col-sm-3">  <a href="https://www.youtube.com/" target="_blank"><i class="fa fa-5x fa-youtube-play"></i></a>

        </div>
        <div class="col-sm-3">  <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-5x fa-facebook"></i></a>

        </div>
        <div class="col-sm-3">  <a href="https://soundcloud.com/" target="_blank"><i class="fa fa-5x fa-soundcloud"></i></a>

        </div>
        <div class="col-sm-3">  <a href="https://www.google.ch/" target="_blank"><i class="fa fa-5x fa-google"></i></a>

        </div>
    </div>
    <div class="row margin-top">
        <div class="col-sm-3">  <a href="https://instagram.com/accounts/login" target="_blank"><i class="fa fa-5x fa-instagram"></i></a>

        </div>
        <div class="col-sm-3">  <a href="https://www.dropbox.com/" target="_blank"><i class="fa fa-5x fa-dropbox"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-twitter"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cog"></i></a>

        </div>
    </div>
    <div class="row margin-top">
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cog"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-desktop"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-music"></i></a>

        </div>
        <div class="col-sm-3">  <a href="#" target="_blank"><i class="fa fa-5x fa-cloud"></i></a>

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

CSS:

@charset "UTF-8";
/********** General styles **********/
body {
    font-size: 16px;
    background: url('../media/images/banner.jpg') no-repeat center center fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
}
a, a:focus, a:active {
    text-decoration: none;
    color: #F9F9F9;
    opacity: 0.7;
}
a>.fa:hover, a:hover {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    transform: scale(1.2);
    opacity: 1;
}
.container {
    margin: 0 auto; /* horizontally centered */
}
.margin-top {
    margin-top: 3em;
}

Update of my solution:
HTML:

@charset "UTF-8";
/********** General styles **********/
html, body {
    height: 100%;
    margin: 0;
}
body {
    font-size: 16px;
    background: url('../media/images/banner.jpg') no-repeat center center fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
a, a:focus, a:active {
    text-decoration: none;
    color: #F9F9F9;
    opacity: 0.7;
}
a>.fa:hover, a:hover {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    transform: scale(1.2);
    opacity: 1;
}
.wrapper {
    display: table;
    height: 100%;
    margin: 0 auto;
}
.wrapper-inner {
    display: table-cell;
    vertical-align: middle;
}
.margin-top {
    margin-top: 3em;
}
.col-sm-3 {
    padding-right: 4em;
    padding-left: 4em;
}

CSS:

@charset "UTF-8";
/********** General styles **********/
html, body {
    height: 100%;
    margin: 0;
}
body {
    font-size: 16px;
    background-color: blue;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
a, a:focus, a:active {
    text-decoration: none;
    color: #F9F9F9;
    opacity: 0.7;
}
a>.fa:hover, a:hover {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    transform: scale(1.2);
    opacity: 1;
}
.wrapper {
    display: table;
    height: 100%;
    margin: 0 auto;
}
.wrapper-inner {
    display: table-cell;
    vertical-align: middle;
}
.margin-top {
    margin-top: 3em;
}
.col-sm-3 {
    padding-right: 4em;
    padding-left: 4em;
}
Tags:

2

Answers


  1. 0

    If you don’t know the height and width of the container you could use this styling to center the element horizontally and vertically:

    .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    But I don’t know if this has other unwanted effects.

    Login or Signup to reply.
  2. 0

    Patrick F, Hi there.
    Have a look at just using this to center both ways. 

    .center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}

    In your code you use col-sm-3 I changed this to col-xs-3 to stop all the display items going 1 row vertical in small screens. Unless that is what you want to happen.
    Resize the window and you will see what I mean.

    Here is the Fiddle.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search