Bootstrap 4.1.1 Snippet by prabuanan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Image src: image.jpeg Title: How to get a job? Excerpt: Learn from the best CEO's how to show yourself in the best possible way Link text: Read more Link href: /how-to-get-a-job/ Tags: job, career, business, know how --> <style> </style> <div> <div id="container"> <div class="flex wrap"> <div class="col"><img src="https://dummyimage.com/300x300/000/fff" /> </div> <div class="col"> <div class="full-space"> <ul> <li> <a href="">job</a> </li> <li> <a href="">career</a> </li> <li> <a href="">business</a> </li> <li> <a href="">know how</a> </li> </ul> <div class="text-block"> <h1> How to get a job? </h1> <p> Learn from the best CEO's how to show yourself in the best possible way </p> <p><a href="">Read more</a></p> </div> </div> </div> </div> </div> </div> https://css-tricks.com/how-to-make-a-media-query-less-card-component/ https://codepen.io/GeoffreyCrofte/pen/BajEZYa https://codepen.io/GeoffreyCrofte/pen/BajEwyJ https://codepen.io/GeoffreyCrofte/pen/BajEZYa
.flex { display: flex; } .no-wrap { flex-wrap: no-wrap; } .wrap { flex-wrap: wrap; } .col { flex-basis: 405px; flex-shrink: 1; flex-grow: 1; } /* Demo decoration */ img { width: 100%; } .full-space { padding: 12px; } .text-block h1 { margin-top: 12px; margin-bottom: 6px; text-align: left; } .text-block p { text-align: left; } .text-block p a { font-size: 12px; text-align: left; } ul { list-style: none; } ul { display: flex; flex-wrap: wrap; padding-inline-start: 0px; } ul li { background-color: #ea4b64; padding: 3px 12px; margin-right: 8px; margin-bottom: 8px; border-radius: 6px; text-align: center; flex-basis: 58px; flex-shrink: 2; flex-grow: 2; } ul li a { color: #fff; text-decoration: none; } .flex { margin: 0 auto; background-color: #acd8e4; } p { margin-top: 12px; margin-bottom: 12px; }

Related: See More

Questions / Comments: