Object Isn't Appearing in the Middle of Component React Bootstrap/CSS

Question

I have created a custom clock with react-bootstrap, with buttons to increment and decrement minutes and seconds. However, I can't seem to style it the way I would like. I'm not sure how to get the increment buttons closer to one another, and the minutes and seconds can't seem to display in the centre of the component. Here's my code:

const [timer,userTimer] = useState(0);

export const formatTime = (timer) => {
  const getSeconds = `0${timer % 60}`.slice(-2);
  const minutes = `${Math.floor(timer / 60)}`;

  const getMinutes =
    minutes < 100
      ? `0${minutes % 130}`.slice(-2)
      : minutes < 110
      ? `10${minutes % 130}`.slice(-3)
      : minutes < 120
      ? `11$${minutes % 130}`.slice(-3)
      : minutes < 130
      ? `12$${minutes % 130}`.slice(-3)
      : 130;

  return `${getMinutes}:${getSeconds}`;
};

  return (
        <Col>
          <Row>
            <Col sm={2}>
              <Row>
                <BsFillCaretUpFill
                />
              </Row>
              <Row>
                <BsFillCaretDownFill
                />
              </Row>
            </Col>
            <Col sm={8}>
              <div className="clock">{formatTime(timer)}</div>
            </Col>
            <Col sm={2}>
              <Row>
                <BsFillCaretUpFill
                />
              </Row>
              <Row>
                <BsFillCaretDownFill
                />
              </Row>
            </Col>
          </Row>
        </Col>);

clock.css

.clock {
  font-size: 1.6em;
  letter-spacing: 0.1em;
  color: white;
}

I'm not sure why the clock display isn't appearing nicely centred within the component. I'd also like to get BsFillCaretUpFill and BsFillCaredDownFill closer together- I've tried adjusting the height of the Row but it doesn't work. Help please!

Here's a rough sketchof what I'd like the clock to look like, arrows slightly closer vertically and the clock display centered:

Answer 1

You may want to have the clock wrapped in a flex div like this :

const [timer,userTimer] = useState(0);

export const formatTime = (timer) => {
  const getSeconds = `0${timer % 60}`.slice(-2);
  const minutes = `${Math.floor(timer / 60)}`;

  const getMinutes =
    minutes < 100
      ? `0${minutes % 130}`.slice(-2)
      : minutes < 110
      ? `10${minutes % 130}`.slice(-3)
      : minutes < 120
      ? `11$${minutes % 130}`.slice(-3)
      : minutes < 130
      ? `12$${minutes % 130}`.slice(-3)
      : 130;

  return `${getMinutes}:${getSeconds}`;
};

  return (
        <Col>
          <Row>
            <Col sm={2}>
              <Row>
                <BsFillCaretUpFill
                />
              </Row>
              <Row>
                <BsFillCaretDownFill
                />
              </Row>
            </Col>
            <Col sm={8}>
               <div style={{ display : "flex" , justifyContent : "center" , 
                 alignItems : "center" , width : "100%"}} >
                    <div className="clock">{formatTime(timer)}</div>
               </div> 
            </Col>
            <Col sm={2}>
              <Row>
                <BsFillCaretUpFill
                />
              </Row>
              <Row>
                <BsFillCaretDownFill
                />
              </Row>
            </Col>
          </Row>
        </Col>);

Note

If you want to move the up and down icons of the clock you can either apply a css className with styles to them or have a div wrapped around them with inline styles like this :

 <Col sm={2}>
    <Row>
       <div style={{ transform : `translate(5px , 0)` }} >
         <BsFillCaretUpFill />
       </div>
    </Row>
    <Row>
       <div style={{ transform : `translate(-5px , 0)` }} >
          <BsFillCaretDownFill />
       </div>
    </Row>
  </Col>