ARTICLE AD BOX
Card Made with Bootstraps
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <style> body { background-color: #f5f7fa; } .card { border: none; border-radius: 15px; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; cursor: pointer; } .card img { height: 200px; object-fit: cover; } .card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .card-title { font-weight: bold; } .box-img { max-width: 100%; height: auto; margin-top: 15px; } </style> </head> <body> <div class="container py-5"> <div class="row g-4"> <div class="col-md-4"> <div class="card position-relative"> <img src="https://picsum.photos/400/300?2" class="card-img-top"> <div class="card-body text-center"> <h5 class="card-title">Good Health and Well Being</h5> <p class="card-text">Click anywhere on this card</p> <a href="solarpower.php" class="stretched-link"></a> </div> </div> </div> <div class="col-md-4"> <div class="card position-relative"> <img src="https://picsum.photos/400/300?2" class="card-img-top"> <div class="card-body text-center"> <h5 class="card-title">Good Health and Well Being</h5> <p class="card-text">Click anywhere on this card</p> <a href="page2.html" class="stretched-link"></a> </div> </div> </div> <div class="col-md-4"> <div class="card position-relative"> <img src="https://picsum.photos/400/300?3" class="card-img-top"> <div class="card-body text-center"> <h5 class="card-title">Good Health and Well Being</h5> <p class="card-text">Click anywhere on this card</p> <a href="page3.html" class="stretched-link"></a> </div> </div> </div> <div class="col-md-4"> <div class="card position-relative"> <img src="https://picsum.photos/400/300?4" class="card-img-top"> <div class="card-body text-center"> <h5 class="card-title">Affordable and Clean Energy</h5> <p class="card-text">Click anywhere on this card</p> <a href="page4.html" class="stretched-link"></a> </div> </div> </div> <div class="col-md-4"> <div class="card position-relative"> <img src="https://picsum.photos/400/300?5" class="card-img-top"> <div class="card-body text-center"> <h5 class="card-title">Enequality Education</h5> <p class="card-text">Click anywhere on this card</p> <a href="page5.html" class="stretched-link"></a> </div> </div> </div> <div class="col-md-4"> <div class="card position-relative"> <img src="https://picsum.photos/400/300?6" class="card-img-top"> <div class="card-body text-center"> <h5 class="card-title">Gender Enequality</h5> <p class="card-text">Click anywhere on this card</p> <a href="page6.html" class="stretched-link"></a> </div> </div> </div> </div> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> --> </body> </html>When implementing card UI components using Bootstrap, following coding best practices ensures both maintainability and scalability. It is important to structure the HTML semantically, using Bootstrap’s predefined classes like card, card-body, card-title, and card-text consistently, which promotes readability and reduces CSS redundancy. Reusable components should be modular, enabling easy updates without affecting other parts of the UI. Proper spacing, alignment, and responsive design considerations using Bootstrap’s grid and utility classes enhance the visual appeal and accessibility across devices. Additionally, keeping custom styles minimal and clearly separated from Bootstrap defaults prevents conflicts and simplifies debugging. Incorporating dynamic content through templating or JavaScript should follow clear data-binding patterns to maintain performance and code clarity, ultimately resulting in a clean, professional, and user-friendly card interface.
