[solved] Bootstrapped my buttons, now the spacing is crazy. also tired

1

I put my buttons in divs with col’s

<div class="button-spacing">
     <div class="row">
          <div class="col-md-3">
               <button>buttonX</button>
          </div>
  • I have four buttons so 4 buttons so col-3-x 4. I think it’s how I set up my divs but moving the row div takes them out of a row (i know they’ll stack when the screens small).
  • Could be something with the button spacing class but I commented that with no change.
  • i’m so tired, i’m going to sleep my FCC peeps.

https://codepen.io/AmericanPi/pen/KyzYwr?editors=1000

2

Try adding text-align: center; to your buttonSpacing class. If you want the buttons to be spaced more closely, then add width: ____ px to your buttonSpacing class as well and enter the value that makes it look the way you want.

1 Like
3

Tx Man!</.em>

4

OK, so that did it.
Here’s a follow-up question

  • is that…
width: 50%;
  • …the width between the buttons?
    wt is it exactley.

tx

5

When you set the width of a div, or any element, to a percentage, it will fill that percentage of the parent div’s width. So when you set the width of your buttonSpacing div to 50%, it fills up 50% of its parent div — your container-fluid div.

The spacing between the buttons in this case has to do with the col-md-3 class you are using for each button, which creates 4 equally-sized divs inside the buttonSpacing div.

1 Like
6

tx man

  • but wouldn’t the parent be the immediate
row class="row"

?

7

Let me explain it a little better. Here’s your code (minus all button code):

<div class="container-fluid"> 
  <h1 class="headingName">Brian Moreira</h1>
  <div  class="buttonSpacing">
    <div class="row">  
      .
      .
      .
    </div> <!--class="row"--> 
  </div> <!--class="buttonSpacing"--> 
</div><!--container-fluid-->

This is important: Think of anything between a opening tag and its closing tag as its scope.

All the tags within that scope are its descendants (i.e. children, grandchildren, etc.), and all outside that scope would be its ancestors (i.e. parents, grandparents, etc.) It’s very much like a family tree.

So your buttonSpacing div and the h1 headingName are both children of the container-fluid div. The h1 is the sibling of buttonSpacing. The buttonSpacing div is the parent of the row div. If your buttonSpacing div was somewhere in between the opening h1 and closing h1 tags, then it would be the child rather than a sibling.

When code is tabbed nicely, the relationships are easy to see. You actually did a great job of that in your code. Siblings are on the same tab, children are tabbed more (so further right), and parents are tabbed less (so further left).

1 Like
8

hahaha I get now.
-the error I was making was not including everyone in the family and not going through the levels one by one.
-tx man and tx for sayin’ I did a gd job. ppl will look at this thread and get allot of help from ur explanation!

10

I can’t believe I did that. I’ll edit that post right away. Thanks for bringing it to my attention.

1 Like