Bootstrap4 - Splitting The Row Into Two Columns

I need to split a row into two so that I can accommodate two headings in a row, something like below: With the current code that I have written, I am unable to separate the row i

Solution 1:

Here is super easy/clean code:

<div class="row">        
    <div class="col" >
      Product(s) Ready for Pickup
    </div>
    <div class="col text-right" >
      Quantity
    </div>           
</div>

See the preview link: https://codepen.io/ziruhel/pen/LOZjWZ

Solution 2:

You need to make two columns within your row using the col-sm-6 (or relevant classes as per the device needs). Assuming you need the row to have 2 columns for small, Medium, Large devices and 1 column for extra small devices, Below is my suggestion (Note: I have removed the style rules for better readability).

<div class="row col-md-12">        
    <div class="col-xs-12 col-sm-6" >
      <span class="float-left">Product(s) Ready for Pickup</span>
    </div>
    <div class="col-xs-12 col-sm-6" >
      <span class="float-right">Quantity</span>
    </div>           
</div>

Solution 3:

Use col-xl-{value} to get columns. Bootstrap Grid http://getbootstrap.com/docs/4.0/layout/grid/

 <div class="row">   //row

    <div class="col-xs-6" >  //column 1 for extra large screen, use sm for small, md for medium screen
      <span>Product(s) Ready for Pickup</span>
    </div>

    <div class="col-xs-6" > //column 2
      <span>Quantity</span>
     </div>    

 </div>

Solution 4:

You can use col-md-* class for child element inside the parent row class to split the columns for your need.

<div class="row">        
  <div class="col-md-9" >
    Product(s) Ready for Pickup
  </div>
  <div class="col-md-3 text-center" >
    Quantity
  </div>           
</div>