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.
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>