htmlcssbootstrap-4bootstrap-gridbootstrap-cards

adjusting span value inside a col in bootstrap 4

I am currently using bootstrap 4 for the cards. I would like to add a numbering beside my card. which is show in the image below.

I tried adding padding-top on the span text the same goes with the assigned col of the span text but the card beside it is adjusting as well. Can anyone help me with this one?

I want the numbering to be at the horizontal range of the card either at the top or at the middle, as you can see it's above the card.

enter image description here

<div class="container">
     <div class="col-sm-2">
        <span style="display:inline-block; padding-top: 15px;" >1</span>
      </div>
       <div class="col-sm-12">
        <div class="card h-100" style="width: 15rem;">
           <div>
              <a class="fancybox" href="admin/files/Images/flutterfest.png">
                <img class="card-img-top" src="admin/files/Images/flutterfest.png">
              </a>
            </div>
            <div class="card-body">
                <h5 class="card-title text-center">Library Management System</h5>
                 <p class="card-text">Date added: <span>May 23, 2021</span></p>
             </div>
          </div>
         </div>
       </div>
Solution

  • give column classes as col-sm-2 and col-sm-10. there are 12 columns max you can create in bootstrap. So you have given col-sm-12 to second div thats why it is going to next line

          <div class="col-sm-2">
        <span style="display:inline-block; padding-top: 15px;" >1</span>
      </div>
       <div class="col-sm-10">