bootstrap panel-left i can't center it

Question

.left-panel .panel-default{border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-bottom:2px #DDD solid;}
.left-panel .panel-default .panel-body {padding:0; margin:0;}
.left-panel .panel-default .panel-body .col-md-12{margin:0; padding:0;}
.left-panel .panel-default .panel-body .thumbnail{border:none; margin:0; padding:0; position:relative;}
.left-panel .panel:hover img {opacity:.8;}
.left-panel .panel-default .panel-body .icerik-bilgi{margin:30px;}
.icerik-bilgi .btn-primary{float:right; margin-bottom:30px;}
.icerik-bilgi h2{margin-bottom:30px; color:#333;}
.icerik-bilgi h2:hover{color:#E74C3C; text-decoration:none;}
.icerik-bilgi a:hover{text-decoration:none;}
.icerik-bilgi p{margin-bottom:30px; line-height:25px; font-size:16px;}
.icerik-bilgi .btn-group{float:left;}
.btn-group a{font-size:26px; color:#CCC;}
.btn-group .btn-facebook:hover{color:#3B5998;}
.btn-group .btn-twitter:hover{color:#55ACEE;}
.btn-group .btn-google:hover{color:#DD4B39;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="left-panel">
            <div class="col-xs-12 col-sm-6 col-lg-8">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="col-md-12">
                            <div class="thumbnail">
                                <a href="#"><img src="http://www.istanbluegayrimenkul.com/wp-content/uploads/2014/05/image6.jpg" class="img-responsive" alt=""/></a>
                            </div>
                            <div class="icerik-bilgi">
                                <a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum eget nunc quis semper. Nunc pellentesque nec libero sed viverra. Donec turpis velit, suscipit sit amet mauris quis, viverra ornare massa. Morbi tellus eros, fringilla eu sodales id, ultricies ut sapien. Duis et tristique enim, vitae mattis neque. Aliquam efficitur, dui id laoreet blandit, lorem […]</p>
                                <div class="btn-group">
                                    <a class="btn btn-social btn-facebook" href="#" data-toggle="tooltip" title="Share Facebook"><i class="fa fa-facebook"></i></a>
                                    <a class="btn btn-social btn-twitter" href="#" data-toggle="tooltip" title="Share Twitter"><i class="fa fa-twitter"></i></a>
                                    <a class="btn btn-social btn-google" href="#" data-toggle="tooltip" title="Share Google"><i class="fa fa-google"></i></a>
                                </div>
                                <a href="#">
                                    <button type="button" class="btn btn-primary">
                                        <span class="btn btn-google">Read More <i class="fa fa-chevron-right"></i></span>
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

I have this bootstrap code for my news article site.I have used panel-left class...but I don't know how to center it in my page.I have tried with margin properties or center classes in bootstrap, but I didn't get a result.Any suggestions ?

Answer 1

Add below two lines to child div of .left-panel. I have added a new class .content_center check snippet:

.content_center {
    margin: 0 auto;
    float: none;
}

.left-panel .panel-default{border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-bottom:2px #DDD solid;}
.left-panel .panel-default .panel-body {padding:0; margin:0;}
.left-panel .panel-default .panel-body .col-md-12{margin:0; padding:0;}
.left-panel .panel-default .panel-body .thumbnail{border:none; margin:0; padding:0; position:relative;}
.left-panel .panel:hover img {opacity:.8;}
.left-panel .panel-default .panel-body .icerik-bilgi{margin:30px;}
.icerik-bilgi .btn-primary{float:right; margin-bottom:30px;}
.icerik-bilgi h2{margin-bottom:30px; color:#333;}
.icerik-bilgi h2:hover{color:#E74C3C; text-decoration:none;}
.icerik-bilgi a:hover{text-decoration:none;}
.icerik-bilgi p{margin-bottom:30px; line-height:25px; font-size:16px;}
.icerik-bilgi .btn-group{float:left;}
.btn-group a{font-size:26px; color:#CCC;}
.btn-group .btn-facebook:hover{color:#3B5998;}
.btn-group .btn-twitter:hover{color:#55ACEE;}
.btn-group .btn-google:hover{color:#DD4B39;}
.content_center {margin: 0 auto; float: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="left-panel">
            <div class="col-xs-12 col-sm-6 col-lg-8 content_center">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="col-md-12">
                            <div class="thumbnail">
                                <a href="#"><img src="http://www.istanbluegayrimenkul.com/wp-content/uploads/2014/05/image6.jpg" class="img-responsive" alt=""/></a>
                            </div>
                            <div class="icerik-bilgi">
                                <a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum eget nunc quis semper. Nunc pellentesque nec libero sed viverra. Donec turpis velit, suscipit sit amet mauris quis, viverra ornare massa. Morbi tellus eros, fringilla eu sodales id, ultricies ut sapien. Duis et tristique enim, vitae mattis neque. Aliquam efficitur, dui id laoreet blandit, lorem […]</p>
                                <div class="btn-group">
                                    <a class="btn btn-social btn-facebook" href="#" data-toggle="tooltip" title="Share Facebook"><i class="fa fa-facebook"></i></a>
                                    <a class="btn btn-social btn-twitter" href="#" data-toggle="tooltip" title="Share Twitter"><i class="fa fa-twitter"></i></a>
                                    <a class="btn btn-social btn-google" href="#" data-toggle="tooltip" title="Share Google"><i class="fa fa-google"></i></a>
                                </div>
                                <a href="#">
                                    <button type="button" class="btn btn-primary">
                                        <span class="btn btn-google">Read More <i class="fa fa-chevron-right"></i></span>
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>