Bootstrap Grid leaving empty columns

Question

I'm using bootstrap to implement the grid system. The grids are responding correctly when the page is resized but on load the screen the grid is leaving out or skipping columns.

Error Screenshot

The point in where they're empty depends on the screen size.

<div class="row rowmain">
        <div class="col-md-9 col-xs-12 maincol">
                <!--new button-->

                <div class="col-lg-2 col-sm-3 col-xs-6">
                <div class="square">
                    <a target="_blank" href=""><button type="button" class="buttonlink">link</button></a>
                </div>

When I refresh the page or resize the window the grid system resets its self and displays correctly. I'm not doing anything clever with the css, its standard bootstrap. All boxes are the same size.

Hope anyone knows why this is happening?

UPDATE * JSFiddle https://jsfiddle.net/hrx6c2b7/

Have you read about the difference of `lg`, `md`, `sm` and `xs`? And it would be better if you post the whole code — Carl Binalla, Apr 06 '17 at 08:17
@Tesseract Thanks, I have read up on the grid system. I want it to display 6 on lrg screen or bigger, 4 on sm screens and 2 on xs screens. This works fine. The code isnt much different. Is there a way I can put it online as there is a lot of it? — Joe C, Apr 06 '17 at 08:25
@Tesseract I have posted an update with a JSFiddle link. My HTML and CSS are all at the top. — Joe C, Apr 06 '17 at 08:36
@Tesseract every screensize, it happens most when the bottom of the screen hits a button. When there are buttons ready to be scrolled. — Joe C, Apr 06 '17 at 10:29
I'll try to re-code it tomorrow, but it would be better if you supply `lg`, `md`, `sm` and `xs` so that you will not miss anything, or re-code it again, while checking every time for different screen size — Carl Binalla, Apr 06 '17 at 10:32
The fiddle doesn't repro/show the problem, but the image clearly looks like the "height problem". If you can post a code or fiddle that shows otherwise, the question can be reopened. — Carol Skelly, Apr 06 '17 at 11:23

Mohammad Wasim · Answer 1 · 2017-04-06T08:46:23.600

0

you have enclosed buttons into row like this

<div class="row">
 <div class="col-lg-2 col-sm-3 col-xs-6">
 <div class="square">
   <a target="_blank" href=""><button type="button" class="buttonlink">link</button></a>
 </div>
....
....
....
</div>

edited Apr 06 '17 at 08:46

answered Apr 06 '17 at 08:38

Mohammad Wasim

199
2
14

Is there anything wrong with this? – Joe C Apr 06 '17 at 10:29

Bootstrap Grid leaving empty columns

1 Answers1