Need to remove extra white space between FAQ's

Question

This question already has an answer here:

• How to Create Grid/Tile View? 8 answers

I have a FAQ page with blocks of texts. When you click read more, the text expand. I am using Bootstrap, Wordpress and CSS. The order of the FAQ's does not matter. It can be in any order.

The problem: When you click read more, it create a lot of white space. I would like to remove this space. I think it might be a row issue. I want the FAQ's to look nice and have the same amount of space between them.

I am new to bootstrap and not sure what is the best approach. I don't have to use bootstrap grids for this page. If there is a better way of doing this, that would be great too.

    <div class="row">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
               <div class="col-lg-4 col-sm-6">
                  <div class="faq-all">
                    <div class="faq-item">
                        <h2><?php the_title(); ?></h2>
                        <article>
                          <div class="faq-intro">
                             <?php the_content(); ?>
                          </div>
                          <div class="faq-info">
                             <?php the_content(); ?>
                          </div>   
                          <div class="faq-link">
                            <a href="#" class="read-more">LES HELE SVARET</a>
                            <a href="#" class="read-less">LES MINDRE</a>
                        </div>
                       </article>
                    </div>
                  </div>
               </div>
                <?php endwhile; ?>
            </div>

Thanks in advance.

Answer 1

row can contain up to 12 columns. You have to count how many item you are creating to correctly create multiple rows with at most 12 columns. The white space may be due to the fact that (accordingly to the screen) you have a single row with 5 div, each with 4 column in lg screen and 6 in sm screens, that is 5*4 = 20 columns in a single row in lg screens and 5*6 = 30 columns in sm screens.