CODEWITHSUNDEEP
csstwitter-bootstrap
robert trudel
robert trudel

Reputation: 5749

Align tex with heigh of icon

I use bootstrap 5

enter image description here

Instead of having text below icon, I would like text align verticaly with icon heigh

h3 {
  text-align: center;
}

.testHead {
  background-color: #5c636a;
  color: white;
  text-align: center;
}

.testHead .col {
  font-size: 1.2rem!important;
}

.testHead i {
  font-size: 4rem!important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<nav class="testHead">
  <h3>For a few dollar</h3>
  <br>
  <div class="row">
    <div class="col ">
      <i class="bi bi-display"></i> Answer simple question

    </div>
    <div class="col">
      <i class="bi bi-download"></i> Download and print
    </div>
    <div class="col">
      <i class="bi bi-clock"></i> It take less then 10 minutes
    </div>
  </div>
</nav>

Search to get something like

enter image description here

Upvotes: 0

Views: 48

Answers (2)

Diop Nikuze
Diop Nikuze

Reputation: 41

or with simple CSS.

Surround your texts with a p tag, with a classname to give the margin-letf

Ex :

  <div class="col d-flex align-items-center">
      <i class="bi bi-display"></i>
      <p class="descr">Answer simple question</p>
   </div>

and then apply css to your <div class="col"> :

.col {
  display:flex;
  align-items:center;
}

.col .descr {
  margin-left: 10px
}

Upvotes: 1

Anthony REINA
Anthony REINA

Reputation: 46

Make your elements flex, it's the easiest solution. Add these Bootstrap classes to your elements that need to be vertically centered like this :

 <nav class="testHead">
  <h3>For a few dollar</h3>
  <br />
  <div class="row">
    <div class="col d-flex align-items-center">
      <i class="bi bi-display"></i>
      Answer simple question
    </div>
    <div class="col d-flex align-items-center">
      <i class="bi bi-download"></i>
      Download and print
    </div>
    <div class="col d-flex align-items-center">
      <i class="bi bi-clock"></i>
      It take less then 10 minutes
    </div>
  </div>
</nav>

Upvotes: 1

Related Questions