Centering buttons

HTML-CSS
1

Tell us what’s happening:
Instead of just always following along with the challenges i like to try and change things slightly that bother me. In this exercise i noticed each button is offset to the right slightly within its well. I have spent about 2 hours trying to figure out how to get the button elements to center inside of their respective wells.
I feel like this should be an easy thing to figure out but apparently not, makes we want to throw the white towel…

Please help!

I have tried things like: class=“text-center”, class=“center-block”, style=“text-align:center”, align=“center”

Your code so far

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row text-center">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/use-comments-to-clarify-code

2

This is caused to the buttons having extra padding, so the button area is taking a bigger space.

You can easily see that if you remove the default

.btn {
 padding: 6px 12px;
}

that Bootstrap is adding.

The way I see it you can “solve” it in two ways:

1- rethink your Button.
Perhaps that padding is suited for larger screen resolution.

2 - change the .well width:
if you add width: fit-content to your wells you’ll see that they are center, simply because we are now taking more space from the row. So the problem is the same as 1 but deferred to well instead of button.

My solution: change design :smiley:

3

Thank you so much Marmiz! i was hoping there had to be a reasonable explanation for why nothing seemed to work. I’ll have to look into the css of the bootstrap classes when things don’t seem to react the way i’m intending.

4

i have one more question, how do i see what css is being used for each bootstrap class? is there a simple way to find out?

5

Use your chrome developer tools and inspect the item you are talking about. If you right click on the item in chrome and choose "inspect’. Then scroll to the bottom of the side bar, you can see a graphic on the padding and margin that has been used.

6

that is a very useful way to look at things.

Thanks a lot guys!

1 Like