Aligning Icons with text in a row-CodePudding

I am attempting to have a page with 7 icons on it. Below each icon I would like a short link and a small sentence. Additionally, I am attempting to get 4 icons horizontally on one row and 3 horizontally on the second row. I've managed to get the text and link the way I want it, but I can't seem to align them in one row horizontally. Here is my code:

<div  style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
  <div  style="text-align:center;">
    <div >
      <div  style="position: relative; inline-block;">
        <i  style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div  style="position: relative; inline-block;">
        <i  style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div  style="position: relative; inline-block;">
        <i  style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div  style="position: relative; inline-block;">
        <i  style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <i  style="padding: 100px;"></i>
      <i  style="padding: 100px;"></i>
      <i  style="padding: 100px;"></i>
    </div>
  </div>
</div>

<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>

CodePudding user response：

By removing the "col-sm-12" and the "position relative" elements, I was able to achieve the desired content on each row. Additionally, I added a "display: flex" and "flex-wrap" element to the "row" parent div. Additionally, I added the meta "viewport" link in the head of the HTML to retain responsiveness.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Untitled Document</title>
</head>

<body>

  <div  style="text-align:center; align-items: center; display:flex; flex-wrap: wrap; width: 100%; justify-content: center;">

    <div  style="inline-block;">
      <i  style="padding: 18px;"></i>
      <a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
      <p>One sentence blurb<br>describing this item.</p>
    </div>
    <div  style="inline-block;">
      <i  style="padding: 18px;"></i>
      <a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
      <p>One sentence blurb<br>describing this item.</p>
    </div>
    <div  style="inline-block;">
      <i  style="padding: 18px;"></i>
      <a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
      <p>One sentence blurb<br>describing this item.</p>
    </div>
    <div  style="inline-block;">
      <i  style="padding: 18px;"></i>
      <a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
      <p>One sentence blurb<br>describing this item.</p>
    </div>

  </div>
  <div >
    <div >
      <i  style="padding: 100px;"></i>
      <i  style="padding: 100px;"></i>
      <i  style="padding: 100px;"></i>
    </div>
  </div>

  <script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>

</body>

</html>

CodePudding user response：

With your current structure, you can add d-flex and justify-content-around as classes on your col-sm-12 div. Then set w-100 on your row so they span the full width.

See below:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div  style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
  <div  style="text-align:center;">
    <div >
      <div  style="position: relative; inline-block;">
        <i  style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div  style="position: relative; inline-block;">
        <i  style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div  style="position: relative; inline-block;">
        <i  style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
      <div  style="position: relative; inline-block;">
        <i  style="padding: 18px;"></i>
        <a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
        <p>One sentence blurb<br>describing this item.</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <i  style="padding: 100px;"></i>
      <i  style="padding: 100px;"></i>
      <i  style="padding: 100px;"></i>
      <i  style="padding: 100px;"></i>
    </div>
  </div>
</div>

<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>