3

I have a Bootstrap grid with 6 items, I need them aligned.
For most resolutions they look good, but when the screen resolution is 991px - 1200px, the items on the grid stop being aligned:

enter image description here.

My HTML code: 

     <div class="container">
        <section class="row no-pad">
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail"> 
                    <i class="fa fa-usd"></i>
                    <div class="caption">
                        <h3></h3>
                        <p></p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail"> 
                    <img src="img/abtesting.png">
                    <div class="caption">
                        <h3></h3>
                        <p></p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail"> 
                    <img src="img/roi.png">
                    <div class="caption">
                        <h3></h3>
                        <p></p>
                    </div>
                </div>
            </div>

            <div class="clearfix visible-lg"></div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail"> 
                    <img src="img/crm-remarketing.png">
                    <div class="caption">
                        <h3></h3>
                        <p></p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail"> 
                    <img src="img/segment.png" alt="analytics-icon">
                    <div class="caption">
                        <h3></h3>
                        <p></p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail"> 
                    <img src="img/multi-channel.png">
                    <div class="caption">
                        <h3>/h3>
                        <p></p>
                    </div>
                </div>
            </div>
        </section> 
    </div>

No CSS code, Bootstrap version 3.3.5

What can I do to make grid items aligned for resolution 991-1200px?

Margareth Didyk
  • 87
  • 5
  • You can set all the heights equal to one another, or use flex-box to make sure they clear one another with variable heights. You can also use display: table and display: table-cell. Another option would be to wrap each line in a new .row - but that's a bit more challenging since you have variable columns depending on screen resolution. Try flexbox and see what you think. If you want to dynamically set the height, this plugin might work well for you: http://brm.io/jquery-match-height/ – dlane Mar 15 '16 at 20:39
  • @dward, Thanks! But when I use 2 .rows on tablet screen it look like this http://saveimg.ru/show-image.php?id=bd92d5bd5d872c2c5a1995404116d080 – Margareth Didyk Mar 15 '16 at 20:51
  • Agreed, it's not the best solution here. Try something with flexbox. It's fairly easy to setup. Once you give it a shot, update your question and others, including myself, will be happy to help you along the way. You just need to put in some effort first. You can also use the matchHeight jQuery plugin if you want do set the height automatically for each column, even on the resize of a browser. – dlane Mar 15 '16 at 20:53
  • 1
    Possible duplicate of [Clear Rows when doing multi-responsive columns - Bootstrap 3](http://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap-3) – max Mar 15 '16 at 21:31
  • @makshh that is a horrible solution\ – Adam Buchanan Smith Mar 16 '16 at 17:54
  • @AdamBuchananSmith In what way is your proposed solution any better? All you did was replace the clearfix element with a col-* element. In fact, the solution proposed in makshh's link is bootstrap's documented solution: http://getbootstrap.com/css/#grid-responsive-resets – Marcelo Mar 16 '16 at 18:12

1 Answers1

0

You can do it like this, see fiddle example https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/28/

Add a <div class="col-md-12"></div> in between the 3rd and 4th div's.

Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39