BeniaminoBaggins
BeniaminoBaggins

Reputation: 12443

bootstrap 4 columns seem to block off rest of columns to take up the full row

I want 2 divs on the same row. One taking up 8 columns and the next taking up 4 columns.

However, It is automatically blocking off the remaining columns in the row, causing every div with col-xx-xx to take up a full row. Here is what I mean:

enter image description here enter image description here

How do I get it to stop blocking off the rest of the row so I can have both divs on the same row?

Making the div with 4 cols take up less space by deleting its contents doesn't work. Neither does turning the div with 4 cols into a col-xs-3.

Code:

<div id="shops-section">
   <div id="map" #map></div>
   <ul>
      <li *ngFor="let shop of result?.nearbyShops">
         <div class="container-fluid">
            <div class="row">
               <div class="shop-details">
                  <div class="col-xs-8">
                     <h5>{{ shop.name }}</h5>
                     <h6>{{ shop.address }}</h6>
                     <button id="open-hours" type="button" class="btn btn-default">OPEN HOURS</button>
                  </div>
                  <div class="col-xs-4">
                     <div class="icon-container">
                        <img class="icon card-icon review-icon" src="images/sad-face.png">
                        <h6>10</h6>
                        <img class="icon card-icon review-icon" src="images/happy-face.png">
                        <h6>21</h6>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </li>
   </ul>
</div>

css:

    #map {
        height: 325px;
        width: 100%;
        max-width: none !important;
        -webkit-transform: translate3d(0px, 0px, 0px);
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        -webkit-border-top-right-radius: 10px;
        -moz-border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        -webkit-border-top-left-radius: 10px;
        -moz-border-top-left-radius: 10px;
    }
    #map > div {
        max-width: none !important;
        border-top-right-radius: 10px;
        -webkit-transform: translate3d(0px, 0px, 0px);
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        -webkit-border-top-right-radius: 10px;
        -moz-border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        -webkit-border-top-left-radius: 10px;
        -moz-border-top-left-radius: 10px;
    }


  .shop-details {
        width: 100%;
        background-color: #fff;
        border-right: 1px solid rgba(0,0,0,.08);
        border-left: 1px solid rgba(0,0,0,.08);
        border-bottom: 1px solid rgba(0,0,0,.08);
        padding:18px;
    }

    .shop-details h5 {
        text-transform: uppercase;
        color: $primary-500;
        font-weight: 200;
        text-transform: uppercase;
    }

    .shop-details h6 {
        color: $primary-500;
        text-transform: uppercase;
        font-size: 12px;
    }

    #open-hours {
        font-weight: 200;
        font-size: 14px;
        text-transform: uppercase;
        border-radius: 4px;
        text-decoration: none;
        text-decoration: none;
        padding: 12px;
        color: $accent;
        cursor: pointer;
        border: 1px solid $accent;
        background: transparent;
        padding: 4px;
        font-size: 10px;
    }

    li {
        list-style-type: none;
    }

    ul {
        padding-left: 0 !important;
        height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .icon-container {
        display: flex;
        margin-top: 0;
        align-items: center;
        justify-content: center;
    }

    .icon-container img {
        margin-right: 0;
        margin-right: 8px;
    }

    .icon-container h6 {
        font-weight: 200;
        display: inline-flex;
        margin-right: 15px;
    }

    .icon {
        height: 32px;
        margin-right: 10px;
        display: inline-flex;
    }

Upvotes: 0

Views: 723

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362580

The col-*'s need to be the immediate children of the row. row>shop-details>col* won't work because shop-details is overriding the negative margins (-15px) of the Bootstrap row making your columns wrap.

Upvotes: 1

Glenn Packer
Glenn Packer

Reputation: 221

i believe the isseu is due to

.shop-details {
     padding:18px;
}

which makes the cols too wide to fit across the page. i.e it can no longer fit in the full 12.

Upvotes: 0

Related Questions