[solved] couldn't center btn-group in Bootstrap4

Jesus Ch$** man!!
This goddam portfolio is killing me.
I started over and am STILL having problems but I don’t understand?
Look, see?
https://codepen.ioa/AmericanPi/pen/rYvJKX?editors=1100

  • my button group won’t center. I’ve tried targeting the id #header-button-group w/ JS and adjusting the margins with auto and percentages like I leared in other threads but it just wont work.
    ARGHHHH! What the heck man! Why do they have us using CodePen?
  • I’ve tried to learn d-flex stuff.
  • I’ve tried to apply tex-align:center; to the child div of < div class=row>
  • jeez I’ve tried so many things.
  • And NOW my font awesome just stopped working.
  • I haven’t even started placing anything in a grid system yet…so bad guys

*allot of text expressing frustration and super upsetness was here. Like SUPER upsetness! since removed"

OK, take a deep breath, we’ll get you through this.

The first thing to do is to open up your browser console (ctrl-shft-j or something like that depending on system and browser) where you’ll see an error:

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at bootstrap.min.js

That needs to be taken care of.

Yes, I am often frustrated with centering things too. But we’ll get you through this. Just take a deep breath. I’ll be back in a few…

ok I’ll try that right now.

Ok.
What I did was put jQuery before Bootstrap4 in my JavaScript setting in Codepen.

I ctrl-shift-J’d again and that error no longer appears. Now it’s only this error.

Yes, I ran into that too, include:

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js

before bootstrap 4

OK, to get the font awesome to work, correct the spelling on

i class="fa fa-info-cricle">x</i>

and add

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

in your settings/css

Ok.
I added that in before the bootstrap addon in the JavaScript settings in CodePen.
I no longer get that error.
Now I only have

  • TypeError: this.$menu is null[Learn More]
    doesn’t seem like a biggie.

Jesus I spelled it wrong…I would laugh at myself if I wasn’t so off.
one sec.

It happens, trust me, it won’t be the last spelling mistake that makes you beat your head against the desk.

I would get rid of that JS for now, all that should be done in the CSS anyway.

Still working …

Ok. I’ve corrected the mispelling in my FontAwesome.

If you add:

#header-button-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

To your CSS, that will center the buttons.

can I pause here to ask a few clarifiying questions?

Also, line 5 of the HTML should be:

<div class="row">

Sure, as best as I answer.

I thought it was best to try and do everything you can in JavaScript?

For me, JS is for doing logic. If you’re just applying CSS values, then do it in the CSS. If you need it to change as data changes or on user events (mouse clicks, etc…) then JS will do that.

You are also getting a “mixed content” warning in your console. This is because your background image is being loaded over http but codepen is https. Change the background image url to https and that should go away.

ok. now this bit of css you taught me…

<!--I'm targeting an id w/# right?-->
#header-button-group {
<!--I'm setting the margins to fill as much space as possible,
 but no side is specified?-->
  margin: auto;
<!--I'm turning this btn-group into a flex-box?-->
  display: flex;
  flex-direction: row;
<!--I wouldv'e thought 'justify-content:center;'-->
  justify-content: space-between;
}

Yeah, I think center would work there and would be the same because the containing box is wrapped tight. center might be a more logical choice there.

I’m just learning flex myself, but I really like it. I’m actually going back and relearning CSS now. It often gets breezed over because it’s not “sexy” but it will save your life. So many arrrrghh moments are caused by me not knowing CSS well enough. If I ever write a book about learning web dev it will be called Why the @$&# Won’t This @&#@&$ Thing Center?!?

You need to remove the first = in line 5:

  <div= class="row">