CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Keirathi
Keirathi

Reputation: 397

Bootstrap row hanging out past containing div

I'm not a front-end dev so I really have very little experience with html/css, but I was asked to try to implement a new page in a web portal for someone and I'm kind of stuck.

The basic idea is I have something like:

<div class="page">
  <div class="panel">
    <div class="panel-heading">
       <!--stuff-->
    </div>
    <div class="row">
      <div ng-repeat="product in products" class="col-lg-3 col-md-6 col-xs-12">
        <div class="container-fluid block-container">
          <!--Stuff-->
        </div>
      </div>
    </div>
  </div>
</div>

The problem comes because the row is hanging outside of the panel horizontally, matching the page width instead of the panel width.

Example image: https://i.sstatic.net/WkqKg.jpg (I added the border around .block-container to demonstrate)

I feel like this should be easy to fix, but nothing I've come across has worked. Thanks!

Upvotes: 1

Views: 275

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362820

The Bootstrap .row has negative margins, so you should place the row inside .panel-body...

<div class="panel">
     <div class="panel-heading">
                <!--stuff-->
     </div>
     <div class="panel-body">
           <div class="row">
               <div ng-repeat="product in products" class="col-lg-3 col-md-6 col-xs-12">
                     <div class="block-container">

                     </div>
               </div>
           </div>
     </div>
</div>

Upvotes: 3

mayersdesign
mayersdesign

Reputation: 5310

Add a div wrapping everything with the class .container in fact add that class here:

<div class="page container">

Upvotes: 2

Related Questions