How to get responsive behaviour in reactjs components with Bootstrap4?

I'm using Bootstrap4 in my React app to make it responsive and for styling the components. After going through the Bootstrap docs i got to know that is responsive by default. Though its satisfying the requirements of web app, but the issue is it's not working properly on Mobile devices as shown in the below image, all the 3 labels should come in a same line which is working fine in web app mode.

`

Here is my code:

return (
  <div className="container-sm">
          <label
      className="navbar-brand col-5 col-sm-2 m-2 m-md-auto"
      style={{
        "padding-left": "60px",
        "padding-top": "20px",
        color: "#33C4FF",
        "font-size": "16px",
        "font-family": "Arial",
      }}
    >
      My Messages
    </label>
    <button
      class="btn btn-light"
      style={{ "margin-left": "450px", color: "#33C4FF" }}
      onClick={this.handleClick}
    >
      {BUTTON_TEXTS.activeMsgs}({this.state.activeMessagesCount})
    </button>{" "}
    <button
      class="btn btn-light "
      style={{ "margin-right": "200px", color: "#33C4FF" }}
    >
      {BUTTON_TEXTS.archiveMsgs}
    </button>

);