GRID distortion with 6 columns with bootstrap 4?

Question

GRID distortion with 6 columns with bootstrap 4?

Navigation

#1 by (0 votes)

0

Hello, I'm trying to create a product section with this bootstrap component 4:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<style>
.card-block{
      background:#F781F3;
            border-radius:10%;

    }
    
    .card{
     border:none;
     width:500px;
     height:400px;
    }
    </style>
<div class="card">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up
      the bulk of the card's content.</p>
    <center>
   <img width="150" height="150" src="http://pidefrutasverdurasonline.com/wp-content/uploads/2016/07/slider-img-01.png">
    </center>
  </div>
  
</div>

Okay until all goes well but when I try to add it to this GRID of 6 columns:

<div class="row">
  <div class="col-sm-4 col-md-2" >div1</div>
  <div class="col-sm-4 col-md-2 col-md-push-2" >div3</div>
  <div class="col-sm-4 col-md-2 col-md-push-6" >div5</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div2</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4" >div4</div>
  <div class="col-sm-4 col-md-2" >div6</div>
</div>

if you add the products in each column but the problem is that it does not fit correctly, does anyone know what problem I have with my code?

bootstrap

asked by Gilberto 10.12.2017 в 22:04

source

1 answer

Problems with file_put_contents PHP Wocommerce does not redirect to cart

score 0 · Answer 1

The solution is your code, with the only exception of the css that I have put to see the edges of the div.

I get the impression that in the sample code that you put in the question you are not loading the css. Maybe the same thing happens in the project.

.bordes>div{
border:solid 1px red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row bordes">
  <div class="col-sm-4 col-md-2">div1</div>
  <div class="col-sm-4 col-md-2 col-md-push-2">div3</div>
  <div class="col-sm-4 col-md-2 col-md-push-6">div5</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4">div2</div>
  <div class="col-sm-4 col-md-2 col-md-pull-4">div4</div>
  <div class="col-sm-4 col-md-2">div6</div>
</div>