Question 40584 in PHP Question posted in
Official manual can be found here.

HTML Bootstrap Coding | Cards – PHP

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.

Tags:

2

Answers


  1. 0

    add the attribute display: flexbox; to your div element.

    You should add a justify-content-center class in it, to make it center the content in a flexbox way.
    I can give you a useful link :center element in bootstrap

    Login or Signup to reply.
  2. 0

    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/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search