How to decipher this React+Bootstrap code and what does it look like visually?

Question

JavaScript

There is this React+Bootstrap code:

<div class="container-fluid">
 <Col xs={12} sm={8} smOffset={2}>
            <Image src="assets/person-1.jpg" className="about-profile-pic" rounded />
            <h3>Frank The Tank</h3>
            <p>That's a crooked tree. We'll send him to Washington. These little son of a guns hide in your brush and you just have to push them out. These trees are so much fun. I get started on them and I have a hard time stopping. How to paint. That's easy. What to paint. That's much harder. Be brave. The man who does the best job is the one who is happy at his job.</p>
            <p>Anyone can paint. You can do anything here. So don't worry about it. Life is too short to be alone, too precious. Share it with a friend. Every highlight needs it's own personal shadow.</p>
            <p>That's what makes life fun. That you can make these decisions. That you can create the world that you want. Of course he's a happy little stone, cause we don't have any other kind. It's so important to do something every day that will make you happy.</p>
            <p>You better get your coat out, this is going to be a cold painting. That's the way I look when I get home late; black and blue. That's crazy. We're trying to teach you a technique here and how to use it.</p>
</Col>

How to decipher this part of the code and how does it look visually? As I understand it, these are Bootstrap columns, where xs, sm are classes depending on the user's device, smOffset is the indent. What do the numbers in brackets mean?
<Col xs={12} sm={8} smOffset={2}>

Answer 1

Bootstrap has 12 columns, these numbers mean how many columns to take. In your example, sm={8} - means to take 8 columns on sm-screens (≥576px), smOffset={2} - offsets on sm-screens by two columns relative to the left edge, that is, in total it will take 10 columns out of 12 (2 columns of offset from the left and 8 columns of Col width). If you specify the number 12, then the block will take up the entire width, xs={12} - on screens <576px it will take up the entire width.
It is described in more detail here - https://react-bootstrap.github.io/layout/grid/