Fluid grid system with Bootstrap

Question

I have the following html structure for a container which consists an unordered list of elements

  <div className="container">
    <ul className="list-group">
        <li className="list-group-item">
            <div className="items col-md-3"><p>Username: {this.props.username}</p></div>
            <div className="items col-md-3"><p>First Name: {this.props.firstName}</p></div>
            <div className="items col-md-3"><p>Last Name: {this.props.lastName}</p></div>
            <div className="items">
                <button className="btn btn-success btn-xs">{this.props.status}</button>
            </div>  
            <div className="items">
                <span className="glyphicon glyphicon-plus-sign"></span>
            </div>
            <div className="items">
                <span className="glyphicon glyphicon-remove-circle"></span>
            </div>
            <div className="items">
                <span className="glyphicon glyphicon-arrow-up"></span>
            </div>

        </li>
    </ul>
  </div>

The layout looks ok initially but upon resizing the browser some of the elements start losing their fluidity. Could someone help me point out on how i can improve upon the above html structure? What built in classes from bootstrap should be applicable in this scenario?

I also had some additional styling added

  <style type="text/css">
     .items{
        display: inline-block;
     }
     button{
        width: 100px;
     }
     .glyphicon{
        padding-left: 30px;
     }
  </style>

Edit: Also i am making use of React hence "className" instead of "class"

Answer 1

You should try using Bootstrap's container-fluid class.