I am new to the front end. I am using Bootstrap 4 to create the design for my library management system. I struggle to align a card element used to display book details.

The following is the code in HTML.

<div class="row">
  <div class="col-8">
    <div class="card" style="width: 50rem;">
     <img class="card-img-top" src="..." alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">{{book.title}}</h5>
       <p class="card-text">
        Some text here to describe what the book
        is about.
       </p>
      </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Price: {{book.price}}</li>
    <li class="list-group-item">Is read: {{book.is_read}}</li>
    <li class="list-group-item">Page num: </li>
  </ul>
      <div class="card-body">
       <a href="#" class="card-link">Analyze</a>
       <a href="#" class="card-link">Borrow</a>
     </div>
   </div>
</div>

  <div class="col-4">
    this is the column col-4 after col-8
  </div>
</div>

I am new to the front end. I am using Bootstrap 4 to create the design for my library management system. I struggle to align a card element used to display book details.

The following is the code in HTML.

<div class="row">
  <div class="col-8">
    <div class="card" style="width: 50rem;">
     <img class="card-img-top" src="..." alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">{{book.title}}</h5>
       <p class="card-text">
        Some text here to describe what the book
        is about.
       </p>
      </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Price: {{book.price}}</li>
    <li class="list-group-item">Is read: {{book.is_read}}</li>
    <li class="list-group-item">Page num: </li>
  </ul>
      <div class="card-body">
       <a href="#" class="card-link">Analyze</a>
       <a href="#" class="card-link">Borrow</a>
     </div>
   </div>
</div>

  <div class="col-4">
    this is the column col-4 after col-8
  </div>
</div>

I have divided the row into two columns. I want to leave space between the card and the page's top, left, bottom, and right. I would appreciate any suggestions.

• html
• twitter-bootstrap
• bootstrap-4

• what about the second column with text? – Naeem Akhtar Commented Jan 20 at 16:44

2 Answers 2

To make the card center aligned and add spacing around the card. You need to make the following changes in your code in the card class.

<div class="card mx-auto my-4" style="width: 50rem;">

• my-4: Adds vertical margin (top and bottom) of 1.5rem.

• mx-auto: Centers the card horizontally within its column.

I think this change might work.

To make the card centre aligned in the col-8 you need to use mx-auto class.

This will set margin auto along the x-axis.

card mx-auto.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-8">
    <div class="card mx-auto" style="width: 90%;">
      <img class="card-img-top" src="https://placehold.co/100x50" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">{{book.title}}</h5>
        <p class="card-text">
          Some text here to describe what the book
          is about.
        </p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Price: {{book.price}}</li>
        <li class="list-group-item">Is read: {{book.is_read}}</li>
        <li class="list-group-item">Page num: </li>
      </ul>
      <div class="card-body">
        <a href="#" class="card-link">Analyze</a>
        <a href="#" class="card-link">Borrow</a>
      </div>
    </div>
  </div>

  <div class="col-4">
    this is the column col-4 after col-8
  </div>
</div>