Display Flex on form/divs

by Kiran Duggal

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!------------ row closed ---------------------->
<div class="row shoppingCartDetailsBoxs">
    <div class="CartDetailsBoxs col-xs-1 col-xs-1-4Width text-uppercase text-center">
        <input type="checkbox">
    </div>
    <div class="CartDetailsBoxs col-sm-4 text-uppercase text-left"><a>Link</a>

        <br><strong>Details</strong>

    </div>
    <div class="CartDetailsBoxs col-sm-1 text-uppercase text-right">$10</div>
    <div class="CartDetailsBoxs col-xs-1 col-xs-1-4Width text-right">x</div>
    <div class="CartDetailsBoxs col-sm-2 text-uppercase text-right">
        <form class="form-inline" role="form"> <span class="form-group">
                <input size="3px" type="text" id="Quantity" value="1">
                
            </span>

        </form>
    </div>
    
    <div class="CartDetailsBoxs col-sm-2 text-uppercase text-right">$ 3</div>
    <div class="CartDetailsBoxs col-xs-1 col-xs-1-4Width text-center "><span class="glyphicon glyphicon-star"></span> 
    </div>
</div>

CSS

.col-lg-12 {


}

.CartDetailsBoxs {

    border: solid 1px blue;
    margin: 0 auto;

}

.shoppingCartDetailsBoxs {
display:flex;
justify-content: center;
    position: relative;
  justify-content:initial;
    align-items: center;


    background-color: pink;

    border: solid 2px green;

   

}