React, Unable to make the row responsive using bootstrap

Question

I have a row which is a collection of columns, it displays properly in widescreen but has a problem in the mobile screen, I tried col-sm- but it didn't work. please help me solve this

Desktop view

Has you can see in the above image, all the elements in the same line but when in switch to mobile the elements are divided into 2 rows MobileView . I want the row to adjust itself in a single line

My code

 <div className="row leaderBoard_main p-2 m-3">
                    <div className="col-1 leaderBoard_1">
                         <h4>1</h4>
                    </div>
                    <div className="col-1 leaderBoard_2">
                       <img className = "leadBoard_22" src="account.png" />
                    </div>
                    <div className="col-8 leaderBoard_3">
                    <h4 className="">Username</h4>
                    </div>
                    <div className="col-2 leaderBoard_4">
                    <h4>10 Points</h4>
                     </div>
                </div>

CSS code

.leaderBoard_main {
  background-color:#0092FF;
  border-radius: 10px;
}

.leaderBoard_1 {
  color: white;
  border-right: 5px solid white;
}
.leaderBoard_2 {
  color: white;
}
.leaderBoard_22 {
  width: 25px;
  height: 25px;
}
.leaderBoard_3 {
  color: white;
}

.leaderBoard_4 {
  color: white;
  border-left: 5px solid white;
}

Answer 1

The problem is the extra margin added by the row class. Try adding the "no-gutters" class to the row:

<div class="row no-gutters leaderBoard_main p-2 m-3">
</div>

To vertically center the text, add the classes d-flex and align-items-center to their containers, for instance:

<div class="col-1 leaderBoard_1 d-flex align-items-center">
  <h4>1</h4>
</div>

(Same for the divs with the classes leaderBoard_2 and 3)