Issue with Bootstrap (using React)

Question

I want a margin between my button (increment) and badge (bootstrap classes badge badge-primary). The tutorial I am using is outdated and I am having trouble finding it online. What is the proper margin class to use (tutorial said m-2)

 render() {
//React.createElement('div')
return (
  //in curly braces any js statement is valid
  <div>
    <span className="badge badge-primary m-2">
      {this.formatCount()}
    </span>
    <button>Increment</button>
  </div>
);
}

And to be clear, the issue is in this exact snippet.

<span className="badge badge-primary m-2">

Thank you for any responses, I am a beginner :)

Answer 1

With m-2 you should have 0.5 rems of margin on all four sides of that span element. Are the badge and badge-primary classes being applied? I suggest using Google Chrome Dev tools => Elements tab => ".cls" button => add and remove classes to see how elements receive styles. Refer to Bootstrap spacing docs: https://getbootstrap.com/docs/4.0/utilities/spacing/

EDIT: It's also probably because the span element is an inline element, so try either adding class d-block or d-inline-block to see m-2 apply, or change from span to a block-level element like div.