Why are these divs clumping together?

Question

I've got these divs that I would like to align in their container in a 4 by 6 grid. I've got this code for the first row:

    <div class="container-fluid">
        <div class="swb col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="row">
                <div class="swb-button col-xs-3">
                    <p class="swb-button-name">1</p>
                </div>
                <div class="swb-button col-xs-3">
                    <p class="swb-button-name">2</p>
                </div>
                <div class="swb-button col-xs-3">
                    <p class="swb-button-name">3</p>
                </div>
                <div class="swb-button col-xs-3">
                    <p class="swb-button-name">4</p>
                </div>
            </div>
        </div>
    </div>

but they're clumping together like so: Since they are 3 bootstrap widths wide, they should be spacing out. What am I doing wrong?

but your code doesn't do it... explain the usage of each class in your example and why you use it, and it will probably solve your problem. — Dekel, Oct 06 '17 at 20:31
@Dekel All the classes are Bootstrap. The rest (swb) are for the border. — A Tyshka, Oct 06 '17 at 20:32
I know they are all bootstrap. Why you use each of them? Why `col-xl-6` and not `col-xl-8`? Why `col-xs-3` and not `col-md-1`? — Dekel, Oct 06 '17 at 20:33
Figured it out. I set the width to 50px in my CSS because I wanted circles. I guess I though bootstrap would adjust the spacing of the divs, but it tried to adjust the width, leading to a conflict. I'm putting each button in a container. — A Tyshka, Oct 06 '17 at 20:37
are you using bootstrap 4? the syntax has changed for columns. see this question: https://stackoverflow.com/questions/41794746/col-xs-not-working-in-bootstrap-4 — worc, Oct 06 '17 at 20:37
@ATyshka if you want circles spread evenly across the row, you're really looking at doing something like flexbox. — worc, Oct 06 '17 at 20:38
this is a duplicate of https://stackoverflow.com/questions/29859317/nested-flexboxes-and-items-alignment — Phil Lucks, Oct 06 '17 at 20:55
Possible duplicate of [Nested flexboxes and items alignment](https://stackoverflow.com/questions/29859317/nested-flexboxes-and-items-alignment) — Phil Lucks, Oct 06 '17 at 20:55

score 0 · Answer 1 · edited Oct 06 '17 at 21:50

Just change col-xs-3 to col-sm-3. If you want them to go completely across the screen get rid of your second div. col-xs-* no longer exists in the latest v4 release.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


 <div class="container-fluid">
    <div class="swb col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
        <div class="row">
            <div class="swb-button col-sm-3">
                <p class="swb-button-name">1</p>
            </div>
            <div class="swb-button col-sm-3">
                <p class="swb-button-name">2</p>
            </div>
            <div class="swb-button col-sm-3">
                <p class="swb-button-name">3</p>
            </div>
            <div class="swb-button col-sm-3">
                <p class="swb-button-name">4</p>
            </div>
        </div>
    </div>
</div>

Why are these divs clumping together?

1 Answers1