Issue On Setting Width For Bootstrap 3 Responsive Panel -

Issue On Setting Width For Bootstrap 3 Responsive Panel -

can please take @ this demo , allow me know why heading of panel behaves demo (got margin left , right)? mentioned on post title trying create responsive panel element in side of righttoc-->panel panel-default--> forms behave responsive

<div class="row"> <div class="col-lg-2 col-md-2 col-sm-2 col-sx-12" id="lefttoc">left</div> <div class="col-lg-7 col-md-7 col-sm-7 col-sx-12" id="maptoc">center</div> <div class="col-lg-3 col-md-3 col-sm-3 col-sx-12" id="righttoc"> <div class="panel panel-default col-lg-10 col-md-11 col-sm-2 col-sx-12 "> <div class="panel-heading"> <h3 class="panel-title">panel title</h3> </div> <div class="panel-body"> panel content </div> </div> </div> </div><!-- end of row -->

thanks

the problem you've nested columns without adding required row element in between. there negative margins on rows resolve issue.

try instead:

<div class="row"> <div class="col-sm-2 col-xs-12" id="lefttoc">left</div> <div class="col-sm-7 col-xs-12" id="maptoc">center</div> <div class="col-sm-3 col-xs-12" id="righttoc"> <div class="row"> <div class="col-lg-10 col-md-11 col-sm-2 col-xs-12"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">panel title</h3> </div> <div class="panel-body">panel content</div> </div> </div> </div><!-- end of row --> </div> </div><!-- end of row -->

twitter-bootstrap twitter-bootstrap-3