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:

<divclass="row"><divclass="col" >
      Product(s) Ready for Pickup
    </div><divclass="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).

<divclass="row col-md-12"><divclass="col-xs-12 col-sm-6" ><spanclass="float-left">Product(s) Ready for Pickup</span></div><divclass="col-xs-12 col-sm-6" ><spanclass="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<divclass="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><divclass="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.

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