Html - Align card element in bootstrap 4

holybull
January 20, 2025
211 views
0 votes
2 Answers

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.

Answers

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>

- YathinChandra
- January 20, 2025 at 5:53 pm
- 0 votes
0
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.
Login or Signup to reply.