Columns don’t line up inside Row

Asked

Viewed 42 times

1

I’m trying to align a grid as follows: 3 columns x N rows

<div class="row" style="margin-top: 150px;">
  @forelse($models as $model)
    <div class="col-md-4" style="margin-left: 5px;">
      <div class="row card">
        <a href="#">
          <div class="col-md-12 card-img"
              style="background-image: url(''); background-size: 100% 100%;">
          </div>
          <div class="col-md-12 card-container">
              <h4 class="text-center"><b>{{$model->name}}</b></h4> 
          </div>
        </a>
      </div>
    </div>
  @empty
    <h2>Não existe modelos cadastrados ainda.</h2>
  @endforelse
</div>

All this code is inside a father div <div class="container"></div>

However, the result he’s returning to me is this

inserir a descrição da imagem aqui

Since how I’m using the col-md-4 inside a Row that is col-md-12 sure would be if he had 3 cards on each line and centered.

More information: inserir a descrição da imagem aqui

  • Any idea where I might be going wrong?
html css css3 twitter-bootstrap bootstrap-4

1 answer

1


Your grid is mounted wrong, it is col inside col, row unnecessary etc. Try to simplify things.

Its basic structure must be: 

<div class="row">
    <div class="col-md-4">
        <div class="card">

I built this model by removing some unnecessary classes and I think it will stay.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<style>

</style>
</head>

<body>

    <div class="container">

        <div class="row" style="margin-top: 150px;">

            <div class="col-md-4" style="">
                <div class="card">
                    <a href="#">
                        <div class="card-img" style="background: red; background-size: 100% 100%;">
                        </div>
                        img
                        <div class="card-container">
                            <h4 class="text-center"><b>{{$model->name}}</b></h4>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4" style="">
                <div class="card">
                    <a href="#">
                        <div class="card-img" style="background: red; background-size: 100% 100%;">
                        </div>
                        img
                        <div class="card-container">
                            <h4 class="text-center"><b>{{$model->name}}</b></h4>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4" style="">
                <div class="card">
                    <a href="#">
                        <div class="card-img" style="background: red; background-size: 100% 100%;">
                        </div>
                        img
                        <div class="card-container">
                            <h4 class="text-center"><b>{{$model->name}}</b></h4>
                        </div>
                    </a>
                </div>
            </div>

            <h2>Não existe modelos cadastrados ainda.</h2>

        </div>

    </div>


</body>

</html>

Browser other questions tagged html css css3 twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.