Bootstrap Card with Photo (Part-1)-7

 

<!-- ############################################################## FIRST 3 card########################################### -->

<br>

 <div class="container"  >

     <h1 class="text-center ">Cards In Botstrap</h1>

     <br>

     <br>

    <div class="row">

        <div class="col col-md-4" >

     <div class="card" style="width:250px;"> 

         <img src="../pic/tem (3).jpg" class="card-img shadow-lg"  height="220px" >

         <div class="card-body">

             <h4 class="card-title">

                 Dani

            </h4>

            <p class="card-text">Welcome To Dani's profile.Please Subscribe.</p>

            <a href="#" class="btn btn-primary d-block">Subscribe</a> 

         

         </div>

     </div>

    </div> 

      

    <div class="col col-md-4">

     <div class="card "  style="width:250px">

        

        <div class="card-body bg-secondary">

            <h4 class="card-title text-center text-white">

                Sunny

           </h4>

           <p class="card-text text-center text-white">Welcome To Sunny's profile.Please Subscribe.</p>

           <a href="#" class="btn btn-primary d-block">Subscribe</a>

        </div>

        <img src="../pic/tem (3).jpg" class="card-img" height="220px">

    </div>

  </div> 

    

     <div class="col col-md-4">

    <div class="card" style="width:250px">

        <img src="../pic/tem (3).jpg" class="card-img"  height="220px">

        <div class="card-body">

            <h4 class="card-title">

                Handy

           </h4>

           <p class="card-text">Welcome To Handy's profile.Please Subscribe.</p>

           <a href="#" class="btn btn-success">Subscribe</a>

        </div>

    </div>

   </div>

</div>

<!-- ############################################### 2nd three card########################################################## -->

   <div class="container"  >

 

    <br>

    <br>

    <hr>

    <hr>

    <br>

   <div class="row">

       <div class="col col-md-4" >

    <div class="card" style="width:250px;"> 

        <img src="../pic/tem (3).jpg" class="card-img "  height="220px" >

        <div class="card-body">

            <h5 class="card-header bg-warning">Actress</h5>

            <h4 class="card-title">

                Dani

           </h4>

           <p class="card-text">Welcome To Dani's profile.Please Subscribe.</p>

           <a href="#" class="btn btn-primary d-block">Subscribe</a> 

           <!--   d-block=display block -->

           <div class="card-footer " >Share and Subscribe</div>

        </div>

    </div>

   </div> 

     

   <div class="col col-md-4">

    <div class="card "  style="width:250px">

       

       <div class="card-body badge-secondary">

           <h4 class="card-title text-center">

               Sunny

          </h4>

          <p class="card-text text-center">Welcome To Sunny's profile.Please Subscribe.</p>

          <a href="#" class="btn btn-primary d-block">Subscribe</a>

       </div>

       <img src="../pic/tem (3).jpg" class="card-img" height="220px">

   </div>

 </div> 

   

    <div class="col col-md-4">

   <div class="card shadow-lg" style="width:250px">

       <img src="../pic/tem (3).jpg" class="card-img shadow-lg"  height="220px">

       <div class="card-body">

           <h4 class="card-title">

               Handy

          </h4>

          <p class="card-text">Welcome To Handy's profile.Please Subscribe.</p>

          <a href="#" class="btn btn-primary">Subscribe</a>

       </div>

   </div>

    </div>

</div>