Centering elements in container

Centering elements in container
0.0 0

#1

I’m trying to center the elements in a container:

code (https://codepen.io/Mike-was-here123/pen/qoVwxR):

<body>
  <header>
        <h1 class="title">Pomodoro Clock</h1>
      </header>
    <div class="container">
        <div class="container-fluid">
        <div class="col-xl-6 col-xl-offset-3 col-lg-8 col-offset-2 col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
          <div class="row">
            <h2>00</h2>
            <h2>:</h2>
            <h2>00</h2>
            <h2>.</h2>
            <h2>00</h2>
          </div>
        </div>
      </div>
    </div>
</body>

Output:

How would i get the elements to center (in the container)? I already tried range of different stuff, so i want to see what other people can do. I’m trying to center it not by using widths. I am using bootstrap, which is responsive with the container.


#2

Update: edited the question:


#3

Why not keep it simple? With the following, you would just target the span with id=“timer” to display the time left you would build via JavaScript.
HTML

<body>
  <header>
    <h1 class="title">Pomodoro Clock</h1>
  </header>
  <div class="container">
    <div class="container-fluid">
        <div class="row">
          <div class="col text-center">
            <span id="timer">00:00.00</span>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

span#id {
  font-size: 120px;
}

If you really want to update each part of the time (mins, secs, milliseconds) separately, then you could write the following and use the span id to target the applicable time component.

<body>
  <header>
    <h1 class="title">Pomodoro Clock</h1>
  </header>
  <div class="container">
    <div class="container-fluid">
        <div class="row">
          <div class="col text-center">
            <span id="minutes">00</span>
            <span>:</span>
            <span id="seconds">00</span>
            <span>.</span>
            <span id="milliseconds">00</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

NOTE: You are currently using two different Bootstrap versions. Pick one and stick with it’s syntax. Including two versions could have strange side effects.


#4

I had to remove the #id to get the css to run. Thanks so much for your help, iv never used span before and i will now :slight_smile:

What does the col mean? I though you had to assign screen size w/ columns