how can I make the columns in a row more responsive and with animation

Bootstrap Studio Help
1

Hello everyone, I have in a SECTION 2 DIV's (one on top and the second on the bottom), in the second DIV I have a Container , inside the container I have a ROW with 3 Columns. I animated the 3 columns but on MD and XS screens the 3 columns keep showing side by side (III) and not one on top of the other.. I tried with the custom code with the class col-md-4 for each column but if I do so I lose the animation.. Can you please help me ? PS: the block label (1 Row 3 Columns) doesnt work because it cant be placed inside the section. Thanks

2

For Bootstrap 4, you would set the class col-12 on each of the columns so that by default they expand the full width in mobile view. Then for MD if you want all 3 to be side by side set/add the class col-md-4.

<div class="col-12 col-md-4">
    <p>Paragraph</p>
</div>

To do that in the app, select the Column in either the Overview pane (bottom/left) or HTML pane (bottom/middle/left) then in the Options pane (top/right) select the Gear icon and then for COLUMN options for the "Width" option set to 12 then click the arrow next to "Width" and for MD set 4. Do that with each of the columns, that will set your responsiveness to how you described it.

I'm not sure what you have for animation so I'm not sure if I can tackle that.

Saj

3

@saj This was so helpful. Thank you very much. I noticed that on my mobile it is now lining up just showing 1 image at a time. For example, instead of me seeing & & & (&=pictures) on my mobile, I am just seeing one &. Is there anything else that i should beside your above directions. It looks much better than what i initally had.

4

@cc3

I'm not entirely sure what you are trying to do. Are you trying to have the 3 columns of pictures side by side at all times? Mobile,table and desktop? If you are then you would set the columns WIDTH option to NONE for all sizes. This should set the columns class to "col" like below for example.

<div class="row">
 <div class="col">Image</div>
 <div class="col">Image</div>
 <div class="col">Image</div>
</div>

Saj saj.bss.design

5

Hello @saj I wonder if you can help me again. I am trying to do a gallery where i have 3 images side by side. Under the images is a description of the images. Right now, when you view the description it isn't in a nice square box. It is really long and running down the width of the page. How can i get a nice gallery?

6

You may want something that is more like the following. It is based on what I provided before but with the inclusion of the figure element inside the col section(s). You can then use CSS to style in a border around the figure element to give yourself a box look to it.

<div class="container">
  <div class="row">
    <div class="col">
      <figure class="figure"><img />
        <figcaption class="figure-caption">Something that is in a caption section</figcaption>
      </figure>
    </div>
    <div class="col">
      <figure class="figure"><img />
        <figcaption class="figure-caption">Something that is in a caption section</figcaption>
      </figure>
    </div>
    <div class="col">
      <figure class="figure"><img />
        <figcaption class="figure-caption">Something that is in a caption section</figcaption>
      </figure>
    </div>
  </div>
</div>

Saj 26,256 user downloads