Admin LTE - "small-box" distribution

Question

See Image

I want to distribute the "small-box" side by side. What is the correct approach?

Sorry, because I'm a newbie in this.

<div className="container-fluid">
        <div className={"small-box " + (props.item.registros > 0 ? "bg-success" : "bg-warning")}>
            <div className="inner">
                <h3>{props.item.dia}/{props.item.mes}/{props.item.ano}</h3>
                {props.item.qtd > 0 ? <p>Qtd. apontada: {props.item.qtd}</p> : ""}
            </div>
            <div className="icon">
                <i className="ion ion-stats-bars" />
            </div>
            <a href='#' onClick={e => { navigate("/Apontar/" + props.item.data) }} className="small-box-footer">Apontar <i className="fas fa-arrow-circle-right" /></a>
        </div>
    </div>

Answer 1

I discovered the Solution Se Image

<div className="row">
<div className="col-lg-3 col-6">
    <div className="small-box bg-warning">
    //content...
    </div>
    <div className="small-box bg-warning">
    //content...
    </div>
    <div className="small-box bg-warning">
    //content...
    </div>
</div>