CODEWITHSUNDEEP
csstwitter-bootstrapvertical-alignment
alexandrepa
alexandrepa

Reputation: 33

Bootstrap vertical align a row in a col

I have a code : http://www.bootply.com/8uA4jyGZKB

I would like to vertically center the text and icons at the right of the picture. How can I vertically center the contents of the col-md-10 div ?

Upvotes: 1

Views: 16924

Answers (1)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use CSS Flexbox.

Make the .row a flex container and use align-items property to vertically center the content. Just like:

.row {
  display: flex;
  align-items: center;
}

Have a look at the snippet below (use full screen for preview):

body {
  padding-top: 50px;
}

.row {
  display: flex;
  align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <img id="cover" src="http://cdn-images.deezer.com/images/cover/e19f5a2ec7877377a58b9d1ba22f55e1/120x120-000000-80-0-0.jpg" class="">
        </div>
        <div class="col-md-10">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-12" contenteditable="false">Justin Bieber</div>
                </div>
                <div class="row">
                    <div class="col-md-12">Baby</div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-2"><span class="glyphicon glyphicon-fast-backward"></span>

                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-play"></span>

                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-fast-forward"></span> 
                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-volume-up"></span>

                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-random"></span>

                    </div>
                    <div class="col-md-2"><span class="glyphicon glyphicon-volume-off"></span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.container -->

Hope this helps!

Upvotes: 18

Related Questions