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

https://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 >
      <h3 >Marzo 2021 <br> Nasce un'idea</h3>

    </div>
    <div >
      <img  src="https://images.app.goo.gl/nSM1SCypuwV9g2zc6" alt="">
    </div>

CodePudding user response：

From your code snippet, I assumed you are using Bootstrap as your CSS framework, so I am going to write this answer based on that assumption. col-md, col-xs etc are classes to control Bootstrap's grid behaviour on different widths. col-xs-5 means 5 units on sm-and-up, meaning it will take 5 (of 12) units wide (5/12) on a typical small device width (> 768 pixels). Likewise col-md-5 means 5 units on md-and-up, etc.

Your CSS doesnt work because you placed the img in the col-xs-4, while technically you would like to put it on the center of the page. Bootstrap has 12 grids, so right now you placed it like this:

--------------------------------------------
|        text                 | image       |
--------------------------------------------

while from what I see, you would like it to be like this:

--------------------------------------------
|      text    |   image     |    text      |
---------------------------------------------

The solution is to split the grid into 3 columns of the same size, or 3 columns of different sizes. Since the max grid in one row is 12, you can choose either 4-4-4 or 5-2-5. I personally would recommend 5-2-5 since the image doesnt look like it will take a lot of space, but that's your choice.

<div class ="row">
<div >
<!-- your text here, align the text to the right -->
</div>

<div >
<!-- your image here, center it -->
</div>


<div >
<!-- your text here,  align the text to the left -->
</div>

</div>

And that's it.

References: What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap? -> for more info https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc -> to understand how bootstrap grid works.

CodePudding user response：

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 >
      <h3 >Marzo 2021 <br> Nasce un'idea</h3>

    </div>
    <div >
      <img  src="https://images.app.goo.gl/nSM1SCypuwV9g2zc6" alt="">
    </div>