Bootstrap grid sm or xs not working

<div class="row" style="border: solid green 1px;"> <div align="left" style="margin-bottom: 10px;" class="col-sm-4 ">Center Spread  </div> <div class="col-sm-2"> &#8358;75,000 <a href="#"> <button class="btn btn-outline-success btn-sm"> Pay </button></a></div> </div>
                <div class="row" style="border: solid green 1px;"> <div align="left" style="margin-bottom: 10px;" class="col-sm-4 ">Full Page  </div> <div class="col-sm-2">&#8358;50,000 <a href="#"> <button class="btn btn-outline-success btn-sm"> Pay </button></a></div> </div>
                <div class="row" style="border: solid green 1px;"> <div align="left" style="margin-bottom: 10px;" class="col-sm-4 ">Half Page </div> <div class="col-sm-2">&#8358;30,000 <a href="#"> <button class="btn btn-outline-success btn-sm"> Pay </button></a></div> </div>
                <div class="row" style="border: solid green 1px;"> <div align="left" style="margin-bottom: 10px;" class="col-sm-4 ">Quarter Page  </div> <div class="col-sm-2">&#8358;20,000 <a href="#"> <button class="btn btn-outline-success btn-sm"> Pay </button></a></div> </div>

The code above renders like this:

I want the items in the row to line up horizontally, That is Center spread, amount and pay button all on one line Any help will be appreciated.

Solution

Please read the following documentations 1 more time to make sure you know the concepts and how to use them correctly:

Bootstrap grid: https://getbootstrap.com/docs/4.1/layout/grid/
Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Bootstrap utility classes for flex, esp align-items: https://getbootstrap.com/docs/4.1/utilities/flex/#align-items

Your problem can be fixed by cleaning up your HTML:

<div class="container">
    <div class="row align-items-center border border-success">
        <div class="col-5">Center Spread</div>
        <div class="col-4">&#8358;75,000</div>
        <div class="col-3">
            <a href="#" class="btn btn-outline-success btn-sm">Pay</a>
        </div>
    </div>
    <div class="row align-items-center border border-success">
        <div class="col-5 ">Full Page</div>
        <div class="col-4">&#8358;50,000</div>
        <div class="col-3">
            <a href="#" class="btn btn-outline-success btn-sm">Pay</a>
        </div>
    </div>
    <div class="row align-items-center border border-success">
        <div class="col-5">Half Page</div>
        <div class="col-4">&#8358;30,000</div>
        <div class="col-3">
            <a href="#" class="btn btn-outline-success btn-sm">Pay</a>
        </div>
    </div>
    <div class="row align-items-center border border-success">
        <div class="col-5">Quarter Page</div>
        <div class="col-4">&#8358;20,000</div>
        <div class="col-3">
            <a href="#" class="btn btn-outline-success btn-sm">Pay</a>
        </div>
    </div>
</div>

fiddle: http://jsfiddle.net/aq9Laaew/158451/