display cards in horizontally format in bootstrap 4

<div class="card mb-3" style="max-width: 540px;"> <div class="row no-gutters"> <div class="col-md-4"> <img src="..." class="card-img" alt="..."> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div>

bootstrap cards in a row

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <body>
    <div class="container">
      <div class="row">
        <div class="col-4">
          <div class="card">1</div>
        </div>
        <div class="col-4">
          <div class="card">1</div>
        </div>
        <div class="col-4">
          <div class="card">1</div>
        </div>
      </div>
    </div>
  </body>

</html>

Posted by: Guest on July-06-2021

Source

Code answers related to "display cards in horizontally format in bootstrap 4"

Code answers related to "C#"

Browse Popular Code Answers by Language

Answers for "display cards in horizontally format in bootstrap 4"

Code answers related to "display cards in horizontally format in bootstrap 4"

Code answers related to "C#"

C# Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us