Twitter Bootstrap Question posted in

Why arent my divs centering in parent row when using bootstrap?-Twitter bootstrap

So I’m trying to center my green divs vertically which are the ones with the class myCol by using align-items-center on the parent row but it’s not centering it and I have no idea why.

Why does it behave like that?

.myRow {
    height: 30vh;
    border: orange dotted 2px;
}

.myCell {
    width: 100px;
    height: 100px;
    background: green;
    border: blue dotted 3px;
}
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
        <div class="container">

            <div class="row align-items-center myRow">
                <div class="col-3 myCell">

                </div>
            </div>

            <div class="row myRow">
                <div class="col-4 myCell">

                </div>

            </div>

        </div>
Tags:

2

Answers


  1. 0

    The problem with your code is that you are using Bootstrap version 2 whereas you should be using Bootstrap version 4.

    Just replace the links for bootstrap script and css file and it should work.

    Login or Signup to reply.
  2. 0

    You are using bootstrap version 2, but align-items-center class appear in bootstrap version 4.
    Replace your html code to:

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">

    <div class="row align-items-center myRow">
        <div class="col-3 myCell">

        </div>
    </div>

    <div class="row myRow">
        <div class="col-4 myCell">

        </div>

    </div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search