'Having trouble styling a timeline in CSS

I'm relatively new to coding so bare with me. I want to create a simple timeline like the image I've included

enter image description herehttps://imgur.com/a/4upikgR

I'm having trouble understanding col-md, how does it work? how can I obtain result like that?

Here's some of code I wrote, can I block the circle in center of page? I've spent two days on it and can't make it work.

.img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: rgb(235, 234, 234) solid 7px;
  align-items: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.tml-title {
  border: 2px blue solid;
  font-weight: bold;
  max-width: fit-content;
  text-align: right;
}

.tml-text {
  text-align: left font-size: 15px;
  max-width: 200px;
  color: grey;
}
<div id="bruh">
  <div class='row'>
    <div class="col-xs-8">
      <h3 class="tml-title">Marzo 2021 <br> Nasce un'idea</h3>

    </div>
    <div class="col-xs-4">
      <img class="img" src="https://images.app.goo.gl/nSM1SCypuwV9g2zc6" alt="">
    </div>
htmlcss


Solution 1:[1]

You can use from position absolute and then scaling for that to be place in the center of page(for any element):

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);


.img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: rgb(235, 234, 234) solid 7px;
  align-items: center;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.tml-title {
  border: 2px blue solid;
  font-weight: bold;
  max-width: fit-content;
  text-align: right;
}

.tml-text {
  text-align: left font-size: 15px;
  max-width: 200px;
  color: grey;
}
<div id="bruh">
  <div class='row'>
    <div class="col-xs-8">
      <h3 class="tml-title">Marzo 2021 <br> Nasce un'idea</h3>

    </div>
    <div class="col-xs-4">
      <img class="img" src="https://images.app.goo.gl/nSM1SCypuwV9g2zc6" alt="">
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions