HTML Bootstrap Coding | Cards

February 13, 2023

I am using a bootstrap to create cards for my site. I am trying to center the card contents of the grid image cards. I have tried applying class="center" into various parts and the items are still all aligned left. This is a snippet of one of the grids

<div class="col">
    <div class="card">
      <i class="fa fa-medkit fa-5x" aria-hidden="true" class="center"></i> 
      <div class="card-body">
        <h5 class="card-title" >Allied Health</h5>
        <p class="card-text" class="center"></p>
      </div>
    </div>
  </div>

I added class="center" and even class="all contents aligned center" into different parts, but there was no change.

>Solution :

Add text-center to the card element.

Also, note that you can only have one class attribute per html element. To add multiple classes to a single element, you separate them with a space.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <div class="col-6">
    <div class="card text-center">
      <i class="fa fa-medkit fa-5x" aria-hidden="true"></i> 
      <div class="card-body">
        <h5 class="card-title">Allied Health</h5>
        <p class="card-text">Some card text here...</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>