Centering Boostrap Buttons

Centering Boostrap Buttons
0.0 0

#1

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!

https://sleepy-meadow-77466.herokuapp.com/

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;


#2

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


#3

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;


#4

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.