Bootstrap : centering rows


I want my columns to be centered inside of the row. If I use two col-md-6 inside of the row, they fit in. But if I use two col-md-5, they aren’t being centered from left and the right. Is there a “Bootstrap way” to do it?

<!DOCTYPE html>
    <meta charset="utf-8">
    <link rel="stylesheet" href=""/>
    <link rel="stylesheet" href="">
        .color1 {
            background: brown;

        .color2 {
            background: yellow;

    <div class="container">
        <div class="row">
            <div class="color1 col-md-5 col-sm-8 col-xs-12">LEFT</div>
            <div class="color2 col-md-5 col-sm-8 col-xs-12">RIGHT</div>
            <div class="clearfix visible-sm"></div>
    <script src="/js/jquery-2.1.3.js"></script>
    <script src=""></script>


try text-align:center;? not sure what you mean by centering your columns…do you want to center the content

1 Like

I fixed the problem by changing the width of the container class. I was talking about margin:0 auto type of thing :smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.