Bootstrap : centering rows

HTML & CSS
1

Hi.

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>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href=""/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
        .color1 {
            background: brown;
        }

        .color2 {
            background: yellow;
        }

    </style>
</head>
<body>
    <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>
        </div>
    </div>
    <script src="/js/jquery-2.1.3.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>
2

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

1 Like
3

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
4

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