How to assemble this layout in Bootstrap 3

Asked

Viewed 93 times

0

I’m trying to mount the grid below in Bootstrap 3.

inserir a descrição da imagem aqui

This grid is being mounted inside a for loop.

this way I’m using the Grid System scheme, but they are aligned this way:

inserir a descrição da imagem aqui

That is the code:

<div class="col-xs-6 col-sm-3">
    <div class="panel panel-primary">
        <img class="img-circle center-block" alt="120x120" 
            src="https://hcommons.org/app/uploads/group-avatars/1000791/5913624c63eb1-bpfull.png" 
                data-holder-rendered="true" style="width: 120px; height: 120px;">
            <span class="pull-right">
                <small> 21/11/2018 </small>
            </span>
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">TITULO</h5>
            </div>

            <p class="mb-1">AQUI O PAINEL AUMENTA OU DIMINUI CONFORME A QUANTIDAD DE TEXTO QUE VEM DO LAÇO FOR </p>

            <div class="row">
                <div class="col-md-8 col-xs-12">
                    <button type="button" class="btn btn-primary btn-xs">TESTES 1</button>
                    <a class="btn btn-primary btn-xs" a href="#">TESTES 2</a>
                </div>
            </div>

    </div>
</div>

bootstrap-3

  • It is advisable to provide the code you are using, it is easier to suggest an edit on top of it if necessary, or even use it as a basis.

  • face ussa bi-dimentional array vc creates the first array 4 columns and within each column vc poe your Divs dai when you mount the first column with all Divs inside it after the second third and fourth

  • Hello @Caiodepaulasilva

  • Could you give a clearer example @Jasar Orion ? I’m a donkey

  • Dude is Bootstrap 3 or 4? I’m seeing your code and you’re using both classes at the same time... it doesn’t make sense...

  • It’s boostrap 3. Sorry about this mess, my strong one is back-end. But you got the problem.

  • already has answer, yes. but totally out of my context, which is bootstrap.

Show 2 more comments

1 answer

2


Using the bootstrap 3, unfortunately, it is impossible to assemble a layout same as what you want according to the first image above.

I suggest you use the following plugin that so you can arrive at this result.

https://masonry.desandro.com/

  • thanks. seems to be top. must have more plugins of this type around. I looked up Cascading grid, I found this one : http://mpezzi.github.io/bootstrap_isotope/

  • sometimes we don’t know the right term to search for this kind of thing

Browser other questions tagged bootstrap-3

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