Centering Boostrap Buttons

Hi there,

I’m really struggling to get my pomodoro clock buttons centred, they are located in rows, within a div with class “text-center” but for some reason they just don’t want to budge!

class TimerButton extends Component {
  constructor() {
    super();

    this.getButton = this.getButton.bind(this);
  }

  getButton() {
    if (this.props.timerState === timerStates.NOT_SET)
      return (
        <div className="text-center">
          <div className="row">
            <div className="col-md-4 col-lg-4 col-sm-4">
              <button
                className="btn btn-success btn-block center-block"
                onClick={this.props.startShortBreak}
              >

                Short Break
            </button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-4 col-lg-4 col-sm-4">
              <button className="btn btn-success btn-block center-block" onClick={this.props.startTimer}>
                Start
            </button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-4 col-lg-4 col-sm-4">

              <button
                className="btn btn-success btn-block center-block"
                onClick={this.props.startLongBreak}
              >
                Long Break
            </button>
            </div>
          </div>
        </div>
      );

    if (this.props.timerState === timerStates.RUNNING)
      return (
        <button
          className="btn btn-lg btn-stop center-block"
          onClick={this.props.stopTimer}
        >
          Stop
        </button>
      );

    if (this.props.timerState === timerStates.COMPLETE)
      return (
        <button
          className="btn btn-lg btn-reset center-block"
          onClick={this.props.stopTimer}
        >
          Reset
        </button>
      );
  }

  render() {
    return <div className="row">{this.getButton()}</div>;
  }
}
export default TimerButton;

The buttons are elements themselves, not text. So you might want to add the center styling to your button elements.

Thanks for the reply, I’ve tried this but no joy so far. See below

  getButton() {
    if (this.props.timerState === timerStates.NOT_SET)
      return (
        <div className="container">
          <div className="row">
            <div className="col-md-2 col-lg-2 col-sm-2 center-block">
              <button
                className="btn btn-success btn-block center-block"
                onClick={this.props.startShortBreak}
              >

                Short Break
            </button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-2 col-lg-2 col-sm-2 center-block">
              <button className="btn btn-success btn-block center-block" onClick={this.props.startTimer}>
                Start
            </button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-2 col-lg-2 col-sm-2 center-block">

              <button
                className="btn btn-success btn-block center-block"
                onClick={this.props.startLongBreak}
              >
                Long Break
            </button>
            </div>
          </div>
        </div>
      );

  render() {
    return <div className="row">{this.getButton()}</div>;
  }
}
export default TimerButton;

I can’t edit your JavaScript to check, but if I manually change the class of the div with “text-center” class to “container” class the buttons are more centered. Hopefully this sets you in the right way, I have no clue how to do it exactly.